<template>
  <div class="order-detail-page">
    <Card v-if="loading" class="loading-card">
      <Spin fix size="large" />
    </Card>
    <Card v-else>
      <div class="info-item">
        <div class="base-info">
          <div class="left-order-no">
            包裹编号：{{parcelDetailObj.expressNo}}
          </div>
          <div class="left-order-no">
            提货单号：{{parcelDetailObj.orderDeliveryId}}
          </div>
          <div class="right-order-status">
            <div class="order-status">
              {{DeliveryStatusObj[parcelDetailObj.deliveryState] && DeliveryStatusObj[parcelDetailObj.deliveryState].label}}
            </div>
          </div>
        </div>
        <div class="base-info">
          <div class="left-order-no">
            快递渠道：{{parcelDetailObj.expressName}}
          </div>
        </div>
      </div>
      <div class="info-item">
        <div class="title">物流信息</div>
        <div class="express-info">
          <div class="top-info">
<!--            <div class="express-no">-->
<!--              快递单号：{{parcelDetailObj.expressNo}}<Button style="margin-left: 10px" @click="handleDoCopy">复制</Button>-->
<!--            </div>-->
<!--            <div class="express-channel">-->
<!--              快递渠道：{{parcelDetailObj.expressType}}-->
<!--            </div>-->
          </div>
          <Timeline>
            <TimelineItem :key="index" :color="index == 0 ? 'blue' : 'gray'" v-for="(item,index) in parcelDetailObj.expressDetailList">
              <p class="time" style="font-size: 14px;font-weight: bold">{{item.time}}</p>
              <p class="content">{{item.context}}</p>
            </TimelineItem>
          </Timeline>
        </div>
      </div>
      <div class="info-item">
        <div class="title">商品信息</div>
        <div class="goods-info">
          <tables :columns="goodsColumns" v-model="parcelDetailObj.goodsList">
          </tables>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import {
  DeliveryStatusObj
} from '@/enums'
import { formatTime } from '@/libs/tools'
export default {
  name: 'order-detail',
  components: {
    Tables
  },
  data () {
    return {
      DeliveryStatusObj,
      loading: false,
      parcelDetailObj: {},
      goodsColumns: [
        { title: '商品',
          key: 'goods',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            let { name, propValList, thumb } = params.row
            let renderData = []
            renderData.push(
              h('div', {
                style: {
                  display: 'flex',
                  // justifyContent: 'center',
                  alignItems: 'center',
                  height: '70px'
                }
              },
              [
                h('img', {
                  attrs: {
                    src: thumb,
                    alt: name
                  },
                  style: {
                    width: '70px',
                    height: '50px',
                    display: thumb ? 'inline-block' : 'none'
                  }
                }),
                h('div',
                  {
                    style: {
                      textAlign: 'left',
                      marginLeft: '8px'
                    }
                  },
                  [
                    h('span', {
                      style: {
                        display: 'block',
                        fontSize: '16px',
                        fontWeight: 'bold'
                      }
                    }, '商品名称：' + name),
                    h('span', {
                      style: {
                        display: 'block'
                      }
                    }, '属性集合：' + propValList.join(','))
                  ])
              ])
            )
            return renderData
          }
        },
        // { title: '单价', key: 'amount', minWidth: 120, align: 'center' },
        { title: '数量', key: 'number', minWidth: 120, align: 'center' }
      ],
      orderDeliveryId: ''
    }
  },
  methods: {
    requestParcelDetail (orderDeliveryId) {
      this.loading = true
      this.api({
        apiName: 'parcelDetail',
        postdata: orderDeliveryId,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.parcelDetailObj = res.data
        }
      })
    },
    handleDoCopy () {
      console.log('e')
      this.$copyText(this.parcelDetailObj.expressNo).then((e) => {
        this.$Message.success('复制成功')
      })
    }
  },
  mounted () {
    let { orderDeliveryId } = this.$route.query
    this.orderDeliveryId = orderDeliveryId
    this.requestParcelDetail(orderDeliveryId)
  }
}
</script>

<style scoped lang="less">
.info-item {
  padding: 20px 36px;
  border: 1px solid #dcdee2;
  border-radius: 5px;
  margin-bottom: 15px;

  > .title {
    color: #17233d;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
}
.base-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .right-order-status {
    display: flex;
    align-items: center;
    .order-status {
      font-size: 18px;
      margin: 0 4px;
      font-weight: bold;
    }
  }
}
.express-info{
  .top-info {
    display: flex;
    justify-content: space-between;
  }
}
.goods-info {
  .sum-up {
    /*text-align: right;*/
    margin-top: 10px;
    &-item {
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-label {
        /*width: 100px;*/
        flex-basis: 90%;
        text-align: right;
      }
    }
  }
}
</style>
