<template>
  <layout-app>
    <div class="logistics-wrapper">
      <div class="header">
        <!-- <p class="title">{{ logisticInfo.expressSender }}</p> -->
        <img class="step" alt="" :src="stageImgUrl" />
      </div>
      <div class="content">
        <!-- 物流信息 -->
        <div v-if="logisticInfo.wayBillCode" class="platform-delivery-info">
          <div class="icon-wrapper">
            <i class="icon"></i>
          </div>
          <div>
            <p>
              <span>快递公司:</span>
              <span>
                {{ logisticInfo.expressCompanyName }}
              </span>
              <span class="platform-info">{{ platformName }}</span>
            </p>
            <p>
              <span>快递单号:</span>
              <span>
                {{ logisticInfo.wayBillCode }}
              </span>
            </p>
          </div>
        </div>

        <div
          class="delivery-detail"
          v-for="(detailInfo, i) in detailList"
          :key="i"
        >
          <span class="title">{{ detailInfo.title }}</span>
          <time-line
            :isGoingOn="i === 0"
            :deliveryList="detailInfo.detailList"
          />
        </div>
      </div>
    </div>
  </layout-app>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import TimeLine from "./components/time-line";
import { expressTypeEnum } from "../../../constants/logistics-constants";

const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
  "order/logisticsInfo"
);

export default {
  components: {
    TimeLine
  },
  computed: {
    ...mapState(["logisticInfo"]),
    ...mapGetters(["stageImgUrl"]),
    platformName() {
      const { expressType: type } = this.logisticInfo;
      return expressTypeEnum[type];
    },
    detailList() {
      const {
        // 物流信息
        expressInfoDetailTitle = "",
        expressInfoDetailList = [],
        // 鉴定信息
        judgeExpressInfoDetailTitle = "",
        judgeExpressInfoDetailList = [],
        // 卖家物流信息
        supplementExpressInfoDetailTitle = "",
        supplementExpressInfoDetailList = []
      } = this.logisticInfo;

      return [
        { title: expressInfoDetailTitle, detailList: expressInfoDetailList },
        {
          title: judgeExpressInfoDetailTitle,
          detailList: judgeExpressInfoDetailList
        },
        {
          title: supplementExpressInfoDetailTitle,
          detailList: supplementExpressInfoDetailList
        }
      ].filter(item => !!item.title);
    }
  },
  mounted() {
    this.fetchLogisticInfo(this.$route.params);
  },
  methods: {
    ...mapActions(["fetchLogisticInfo"])
  }
};
</script>

<style lang="scss" scoped>
.logistics-wrapper {
  height: 100vh;
  -webkit-box-orient: vertical;

  .content {
    padding: 0 40px;

    .delivery-detail {
      .title {
        font-size: 24px;
        padding: 8px 18px 6px 18px;
        background: #f0f0f0;
        display: inline-block;
      }
    }

    .platform-delivery-info {
      display: flex;

      .icon-wrapper {
        width: 48px;
        background-color: red;

        .icon {
          display: block;
          padding-bottom: 100%;
        }
      }
    }
  }

  .header {
    padding-bottom: 60px;
    border-bottom: 1px solid #eee;
    margin-bottom: 38px;

    .step {
      display: block;
      margin: 0 auto;
      height: 100px;
    }
  }
}
</style>