<template>
  <el-dialog
    append-to-body
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="40%"
    @close="close"
  >
    <div class="div-bg bg-white">
      <div style="padding-bottom: 0.5rem">
        <div
          class="bg-white"
          style="
            width: 92%;
            margin-left: 4%;
            margin: auto;
            padding-left: 15px;
            padding-right: 15px;
          "
        >
          <div>
            <div class="track-rcol">
              <div class="track-list">
                <ul>
                  <div v-for="(item, index) in logisticsList" :key="index">
                    <li v-if="index === 0" class="first">
                      <div></div>
                      <i class="node-icon"></i>
                      <span class="txt">{{ item.AcceptStation }}</span>
                      <span class="time">{{ item.AcceptTime }}</span>
                    </li>
                    <li v-if="index > 0 && index !== logisticsList.length - 1">
                      <i class="node-icon"></i>
                      <span class="txt">{{ item.AcceptStation }}</span>
                      <span class="time">{{ item.AcceptTime }}</span>
                    </li>
                    <li
                      v-if="index === logisticsList.length - 1"
                      class="finall"
                    >
                      <i class="div-spilander"></i>
                      <i class="node-icon"></i>
                      <span class="txt">{{ item.AcceptStation }}</span>
                      <span class="time">{{ item.AcceptTime }}</span>
                    </li>
                  </div>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import { returnlogistics } from '@/api/order/return'
  export default {
    name: 'Logic',
    data() {
      return {
        dialogFormVisible: false,
        returnForm: {},
        logisticsList: [],
        title: '',
      }
    },
    /**
     * 加载时执行
     */
    created() {},
    methods: {
      async viewLogistics() {
        const { msg, data, status } = await returnlogistics(this.returnForm)
        if (200 === status) {
          this.logisticsList = data.traces
        } else {
          this.$baseMessage(msg, 'error')
        }
      },
      showEdit(row) {
        this.title = this.__('物流详细')
        this.returnForm.return_tracking_name = row.return_tracking_name
        this.returnForm.return_tracking_number = row.return_tracking_number

        if (row.order_id) {
          this.returnForm.order_id = row.order_id
        }
        this.viewLogistics(), (this.dialogFormVisible = true)
      },
      close() {
        this.dialogFormVisible = false
      },
    },
  }
</script>
<style scoped>
  ul li {
    list-style: none;
    font-size: 1rem;
  }
  ul {
    padding-left: 1.5rem;
  }
  .track-rcol {
  }
  .track-list {
    position: relative;
  }
  .track-list li {
    position: relative;
    padding: 0px 0 1.5rem 25px;
    line-height: 1rem;
    border-left: 1px solid #d9d9d9;
    color: #999;
  }
  .track-list li.first {
    color: red;
    padding-top: 0;
    width: 100%;
    text-align: left;
    border-left: 1px solid #d9d9d9;
  }
  .track-list li .node-icon {
    position: absolute;
    left: -5.5px;
    border-radius: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    top: 4px;
    background-color: #999999;
  }
  .track-list li.first .node-icon {
    background-position: 0-72px;
    background-color: red;
    width: 1rem;
    z-index: 2;
    height: 1rem;
    position: absolute;
    left: -9px;
    top: 0;
    border-radius: 0.5rem;
  }
  .track-list li .time {
    margin-right: 20px;
    position: relative;
    top: 4px;
    display: inline-block;
    vertical-align: middle;
    background-color: white;
    color: #999;
    width: 100%;
    text-align: left;
  }
  .track-list li .txt {
    position: relative;
    display: inline-block;
    vertical-align: top;
    color: #999;
  }
  .track-list li.first .time {
    text-align: left;
    width: 94%;
    color: red;
  }
  .track-list li.first .txt {
    color: red;
    text-align: left;
    width: 94%;
  }
  .track-list li.finall {
    position: relative;
    padding: 0px 0 1.5rem 25px;
    line-height: 18px;
    border-color: white;
    border-left: 1px solid #ffffff;
    color: #999;
  }
  .track-list li.finall .div-spilander {
    width: 1px;
    position: absolute;
    position: absolute;
    left: -1.5px;
    height: 0.5rem;
    background-color: #d9d9d9;
  }
</style>
