<template>
  <div class="express-detail-con">
    <div class="header flex-default">
      <img class="thumb" :src="expressInfo.logo" />
      <div class="info">
        <div class="status">{{ ExpressStatusLabel[expressInfo.status] }}</div>
        <div class="label flex-default">
          <span>承运公司：</span>
          <span>{{ expressInfo.expTextName || "--" }}</span>
        </div>
        <div class="label flex-default">
          <span>运单号：</span>
          <span>{{ expressInfo.mailNo || "--" }}</span>
          <m-icon
            icon="icon-copy"
            :size="12"
            style="margin-left: 10px"
            v-if="expressInfo.mailNo"
            @click="handleCopy(expressInfo.mailNo)"
          />
        </div>
      </div>
    </div>
    <div class="express-info">
      <div class="no-data" v-if="noData" />
      <m-steps :list="list" :active="1" v-else />
    </div>
    <div class="empty" />
  </div>
</template>

<script>
import { DeliveryStatus, ExpressStatus, ExpressStatusLabel } from "@/enums";
export default {
  data() {
    return {
      ExpressStatus,
      ExpressStatusLabel,

      status: DeliveryStatus.UN_SHIP,
      addr: "",
      expressInfo: {
        status: ExpressStatus.NO_RECORD,
      },
      createTime: 0,
      deliveryTime: 0,
    };
  },
  computed: {
    noData() {
      const arr = [ExpressStatus.NO_RECORD, ExpressStatus.INVALID]
      return arr.find(item => item == this.expressInfo.status)
    },
    list() {
      let arr = [
        {
          time: "",
          icon: "icon-express-receive",
          title: "",
          label: `[收货地址]${this.addr}`,
        },
      ];
      if (this.expressInfo.ret_code == 0 && this.expressInfo.data) {
        let i = 0,
          transportFlag = true,
          deliverFlag = true;
        let expressArr = this.expressInfo.data.map((item) => {
          let time = +new Date(item.time),
            icon = "",
            title = "",
            label = item.context;
          if (
            i == 0 &&
            /签收/.test(label) &&
            this.expressInfo.status == ExpressStatus.SIGN
          ) {
            icon = "icon-express-sign";
            title = "已签收";
          } else if (/暂存|代收/.test(label)) {
            icon = "icon-express-pending";
            title = "待取件";
          } else if (/派送|派件/.test(label)) {
            if (deliverFlag) {
              icon = "icon-express-deliver";
              title = "派送中";
              deliverFlag = false;
            }
          } else if (/收取|揽收/.test(label)) {
            icon = "icon-express-package";
            title = "已揽件";
          } else {
            if (transportFlag) {
              icon = "icon-express-transport";
              title = "运输中";
              transportFlag = false;
            }
          }
          i++;
          return {
            time,
            icon,
            title,
            label,
          };
        });
        arr = arr.concat(expressArr);
      }
      if (this.status != DeliveryStatus.UN_SHIP) {
        arr.push({
          time: this.deliveryTime,
          icon: "icon-express-ship",
          title: "已发货",
          label: "包裹正在等待揽收",
        });
      }
      arr.push({
        time: this.createTime,
        icon: "icon-express-order",
        title: "已下单",
        label: "商品已经下单",
      });
      return arr;
    },
  },
  methods: {
    requestData(oid) {
      this.$showLoading();
      this.$api({
        apiName: "queryExpress",
        postData: oid,
        success: (res) => {
          this.addr = res.addr;
          res.wuliu && (this.expressInfo = JSON.parse(res.wuliu));
          this.createTime = res.createTime;
          this.deliveryTime = res.deliveryTime;
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
  },
  mounted() {
    this.status = this.$route.query.status;
    this.requestData(this.$route.query.oid);
  },
};
</script>

<style lang="less">
.express-detail-con {
  height: 100%;
  background: #f5f7fb;
  overflow: auto;
}
.express-detail-con {
  > .header {
    background: #ffffff;
    height: 100px;
    padding: 0 16px;
    align-items: center;
    margin-bottom: 10px;
    .thumb {
      height: 55px;
      width: 55px;
      border-radius: 5px;
      background-color: lightgray;
      margin-right: 10px;
      object-fit: contain;
    }
    .info {
      flex: 1;
    }
    .info .status {
      font-size: 12px;
      color: #dd2e41;
      line-height: 14px;
      font-weight: bold;
      margin-bottom: 6px;
    }
    .info .label {
      align-items: center;
      color: #140603;
      font-size: 11px;
      line-height: 13px;
      margin-bottom: 3px;
      &:nth-last-of-type(1) {
        margin-bottom: 0%;
      }
    }
  }
  > .express-info {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    > .no-data {
      height: 400px;
      background: url("~@/assets/img/no-data-bg.png") no-repeat;
      background-size: 80%;
      background-position: center;
    }
  }
  > .empty {
    height: 20px;
  }
}
</style>