<template>
  <div class="logisTimeLine" style="margin: 0 0 0 30px">
    <ul class="clear" style="padding: 10px 0 20px 0">
      <li class="fl">物流单号：</li>
      <li class="fl" v-for="si in orderCodeList" :key="si" style="padding: 0 12px 0 0">
        {{ si }}
      </li>
    </ul>
    <el-steps
      v-if="options && options.length > 0"
      direction="vertical"
      :active="options.length"
      :space="80"
      :finish-status="finishStatus"
      :process-status="processStatus"
    >
      <div v-if="status && status !== '0'" class="show-post clear">
        <img v-if="post_logo" :src="post_logo" alt="" class="fl" />
        <div v-if="post_name" class="fl">{{ post_name }}</div>
        <div class="fl" v-if="post_code">{{ post_code }}</div>
      </div>
      <el-step
        :icon="index === 0 ? 'el-icon-success' : 'el-icon-truck'"
        v-for="(item, index) in options"
        :key="item.time + index"
        :finish-status="finishStatus"
        :process-status="processStatus"
      >
        <div slot="description">
          <p class="name">
            {{ item.time }}
          </p>
          <p class="time">
            {{ item.context }}
          </p>
        </div>
      </el-step>
    </el-steps>
    <div class="nodate">{{ orderCodeList[0] }} 暂无快递进程。</div>
  </div>
</template>

<script>
import asyncRequest from "./http";
import resToken from "@/mixins/resToken";
export default {
  name: "logisTimeLine",
  props: ["type", "orderCode", "newTime"],
  mixins: [resToken],
  data() {
    return {
      options: [],
      orderCodeList: [],
      finishStatus: "",
      processStatus: "process",
      loading: false,
      post_logo: "",
      post_name: "",
      post_code: "",
      status: "",
    };
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.getList();
      }
    },
  },
  mounted() {
    this.getList();
  },

  methods: {
    async getList() {
      if (!this.loading) {
        this.loading = true;

        this.orderCodeList = this.orderCode.split(",");
        this.options = [];
        const res = await asyncRequest.list({
          post_code: this.orderCodeList[0],
        });
        const { code, data } = await this.useResHandle(res);
        if (code === 0) {
          const { status, post_logo, post_name, post_code, post_data } = data;
          this.status = status + "";
          this.post_logo = post_logo + "";
          this.post_name = post_name + "";
          this.post_code = post_code + "";
          this.options = post_data;
        } else {
          this.options = [];
        }
        this.loading = false;
      }
    },
  },
};
</script>
<style lang="scss">
.logisTimeLine {
  .show-post {
    height: 36px;
    margin: 5px 0 15px 0;
    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin: 3px 10px 0 0;
    }
    div {
      height: 36px;
      display: block;
      line-height: 36px;
      padding: 0 10px 0 0;
    }
  }
}
</style>
