<template>
  <div class="table-expand-con">

    <template v-for="(item, index) of row.drawGoods">
      <Divider orientation="left" :key="'good-name' + item.goodsNo" size="small"
        >商品名称：{{ item.goodsName }}</Divider
      >
      <div class="expand-item width100" :key="'good-id' + item.goodsNo">
        <label class="label">商品ID：</label>
        <label class="href-label" @click="toGoodDetail(item.goodsNo)">{{
          item.goodsNo
        }}</label>
      </div>
      <!-- <div class="expand-item" :key="'good-name'+ item.goodsNo">
        <label class="label">商品名称：</label>
        <label>{{ item.goodsName }}</label>
      </div> -->

      <template v-for="(sItem, sIndex) of item.drawSku">
        <div class="expand-item width100" :key="`goods-sku-${sItem.skuId}`">
          <label class="label">商品规格：</label>
          <div>
            <Tag
              v-for="(pItem, pIndex) of sItem.property"
              :key="`property-tag-${sItem.skuId}-${pIndex}`"
              color="primary"
              >{{ pItem.propertyName + " : " + pItem.propertyValue }}</Tag
            >
          </div>
        </div>
        <div class="expand-item width100" :key="`goods-num-${sItem.skuId}`">
          <label class="label">数量：</label>
          <label>{{ sItem.drawNum }}</label>
        </div>
      </template>
    </template>

    <template v-if="type == DeliveryType.SELF">
      <Divider orientation="left" size="small">提货信息：</Divider>
      <div class="expand-item width100">
        <label class="label">创建时间：</label>
        <label>{{ formatTime(row.createTime) }}</label>
      </div>
      <div class="expand-item width100">
        <label class="label">提货时间：</label>
        <label>{{ formatTime(row.drawTime) }}</label>
      </div>
      <div class="expand-item width100">
        <label class="label">自提点名称：</label>
        <label>{{ row.selfDrawName }}</label>
      </div>
      <div class="expand-item width100">
        <label class="label">自提点地址：</label>
        <label>{{ row.selfDrawAddress }}</label>
      </div>
    </template>

    <template v-else>
      <Divider orientation="left" size="small">收货信息：</Divider>
      <div class="expand-item">
        <label class="label">收货人：</label>
        <label>{{ row.man }}</label>
      </div>
      <div class="expand-item">
        <label class="label">手机号：</label>
        <label>{{ row.phoneNumber }}</label>
      </div>
      <div class="expand-item width100">
        <label class="label">收货地址：</label>
        <label>{{ row.userAddress }}</label>
      </div>
      <div class="expand-item width100">
        <label class="label">快递号：</label>
        <label
          class="href-label"
          v-if="row.expressNo"
          @click="handleExpress(row.expressNo)"
          >{{ row.expressNo }}</label
        >
        <label v-else>--</label>
      </div>
      <div class="expand-item width100">
        <label class="label">证书编号：</label>
        <label v-if="row.certsArray && row.certsArray.length != 0">{{
          row.certsArray.join(", ")
        }}</label>
        <label v-else>--</label>
      </div>
    </template>

    <Modal
      title="物流信息："
      v-model="expressModal"
      footer-hide
      :width="600"
      class="express-modal"
    >
      <Spin fix v-if="expressLoading" />
      <template v-else>
        <Table :columns="expressColumn" :data="expressData.desc"></Table>
        <Timeline>
          <TimelineItem
            v-for="(item, index) of expressData.list"
            :key="'express-timeline-' + index"
          >
            <p class="time">{{ item.time }}</p>
            <p class="content">{{ item.status }}</p>
          </TimelineItem>
        </Timeline>
      </template>
    </Modal>
  </div>
</template>

<script>
import { DeliveryType, DeliveryTypeName } from '@/enums'
import { formatTime } from '@/libs/tools'
export default {
  props: {
    row: {
      type: Object,
      default: {}
    },
    type: {
      type: Number,
      default: DeliveryType.SELF
    }
  },
  data () {
    return {
      DeliveryType,
      DeliveryTypeName,
      expressLoading: true,
      expressModal: false,
      expressData: {
        desc: [],
        list: []
      },
      expressColumn: [
        { title: '快递公司', key: 'expName', align: 'center' },
        { title: '快递编号', key: 'number', align: 'center' },
        {
          title: '状态',
          key: 'deliverystatus',
          align: 'center',
          render: (h, params) => {
            let status = +params.row.deliverystatus
            let label = '--'
            switch (status) {
              case 1:
                label = '在途中'
                break
              case 2:
                label = '正在派件'
                break
              case 3:
                label = '已签收'
                break
              case 4:
                label = '派送失败'
                break
              default:
                break
            }
            return h('span', label)
          }
        }
      ]
    }
  },
  methods: {
    formatTime,
    toGoodDetail (goodsNo) {
      let query = { goodsNo }
      this.$router.push({ name: 'good_detail', query })
    },
    handleExpress (expressNo) {
      this.expressModal = true
      this.expressLoading = true
      this.api({
        apiName: 'queryExpress',
        postdata: { expressNo },
        success: (res) => {
          let data = res.data
          if (data.msg !== 'ok') {
            this.$Notice.error({ title: data.msg })
            return
          }
          this.expressLoading = false
          let { list, number, expName, courier, deliverystatus } = data.result
          let desc = [{ number, expName, courier, deliverystatus }]
          this.expressData = { list, desc }
        }
      })
    }
  }
}
</script>

<style lang="less">
.table-expand-con {
  display: flex;
  flex-wrap: wrap;
  padding: 0 45px;

  .expand-item {
    width: 25%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .width25 {
    width: 25%;
  }

  .width100 {
    width: 100%;
  }

  .width-flex {
    flex: 1;
  }

  .label {
    width: 100px;
  }

  .href-label {
    cursor: pointer;
    color: #2d8cf0;
    text-decoration: underline;
  }
}
.express-modal .ivu-modal-body {
  height: 600px;
  overflow: auto;
  position: relative;
  .ivu-timeline {
    margin-top: 25px;
  }
}
</style>
