<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">
            提货单号：{{deliveryDetail.orderDeliveryId}}
          </div>
          <div class="right-order-status">
            <div class="order-status">
              {{DeliveryStatusObj[deliveryDetail.deliveryState] && DeliveryStatusObj[deliveryDetail.deliveryState].label}}
            </div>
          </div>
        </div>
      </div>
      <div class="info-item">
        <div class="base-info">
          <div class="return-reason">
            <div>退货理由：{{deliveryDetail.returnReason}}</div>
            <div>
              <img class="return-img" v-for="(item, index) in deliveryDetail.returnImgList" :src="item" alt="" :key="index">
            </div>
          </div>
        </div>
      </div>
      <div class="info-item">
        <div class="title">物流信息</div>
        <div class="express-info">
          <div class="top-info">
            <div class="express-no">
              快递单号：{{deliveryDetail.expressNo}}<Button style="margin-left: 10px" @click="handleDoCopy">复制</Button>
            </div>
            <div class="express-channel">
              快递渠道：{{deliveryDetail.expressName}}
            </div>
          </div>
          <Timeline>
            <TimelineItem :key="index" :color="index == 0 ? 'blue' : 'gray'" v-for="(item,index) in deliveryDetail.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="deliveryDetail.goodsList">
          </tables>
        </div>

      </div>
      <div class="info-item">
        <div class="title">操作记录</div>
        <div class="operate-info">
          <tables :columns="operateColumns" v-model="deliveryDetail.logList"></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,
      deliveryDetail: {},
      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',
                  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: 'number', minWidth: 120, align: 'center' }
      ],
      payColumns: [
        { title: '支付金额', key: 'payAmount', minWidth: 120, align: 'center' },
        { title: '支付类型',
          key: 'payType',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', PayTypeObj[params.row.payType])
          }
        },
        { title: '支付单号', key: 'oidsJson', minWidth: 120, align: 'center' },
        { title: '支付时间',
          key: 'payTime',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.payTime ? formatTime(params.row.payTime) : '')
          }
        }
      ],
      operateColumns: [
        { title: '提货状态',
          key: 'deliveryState',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            let obj = DeliveryStatusObj[params.row.deliveryState]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          }
        },
        { title: '操作信息', key: 'operation', minWidth: 120, align: 'center' },
        { title: '操作人', key: 'uname', minWidth: 120, align: 'center' },
        { title: '备注',
          key: 'remark',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.remark || '--')
          }
        },
        { title: '时间',
          key: 'amount',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', formatTime(params.row.updateTime))
          }
        }
      ],
      orderDeliveryId: ''
    }
  },
  computed: {
    expressDetailList () {
      let list = []
      this.deliveryDetail.expressDetailList && this.deliveryDetail.expressDetailList.forEach((item) => {
        list.unshift(item)
      })
      return list
    }
  },
  methods: {
    requestDeliveryDetail (orderDeliveryId) {
      this.loading = true
      this.api({
        apiName: 'deliveryDetail',
        postdata: orderDeliveryId,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.deliveryDetail = res.data
        }
      })
    },
    handleDoCopy () {
      this.$copyText(this.deliveryDetail.expressNo).then((e) => {
        this.$Message.success('复制成功')
      })
    }
  },
  mounted () {
    let { orderDeliveryId } = this.$route.query
    this.orderDeliveryId = orderDeliveryId
    this.requestDeliveryDetail(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;

    .return-img {
      width: 100px;
      // height: 100px;
      border-radius: 10px;
      margin-right: 10px;
    }
    .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>
