<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="title">订单信息</div>
        <div class="base-info">
          <div class="left-order-no">
            <span class="left-label">订单编号</span>
            <span class="left-info">{{ orderDetail.oid }}</span>
          </div>
          <!-- <div class="right-order-status"> -->
            <!--            <div class="time" v-if="orderDetail.orderState == OrderState.PAYING">-->
            <!--              倒计时：{{rocallTime}}-->
            <!--            </div>-->
          <div class="right-order-status">
            <span class="left-label">订单状态</span>
            <span class="left-info">
              {{
              OrderStateObj[orderDetail.orderState] &&
              OrderStateObj[orderDetail.orderState].label
            }}</span>

          </div>
          <!-- </div> -->
        </div>
      </div>
      <div class="info-item">
        <div class="title">商品信息</div>
        <div class="goods-info">
          <tables :columns="goodsColumns" v-model="orderDetail.goodsList">
          </tables>
          <div class="sum-up">
            <div class="sum-up-item">
              <span class="sum-up-item-label">商品总额</span>
              <span>{{ orderDetail.total }}</span>
            </div>
            <div class="sum-up-item">
              <span class="sum-up-item-label">优惠金额</span>
              <span>{{ orderDetail.discountAmount }}</span>
            </div>
            <div class="sum-up-item">
              <span class="sum-up-item-label">客户协商优惠</span>
              <span>{{ orderDetail.consultDiscountAmount }}</span>
            </div>
            <div class="sum-up-item">
              <span class="sum-up-item-label">快递运费</span>
              <span>{{ orderDetail.postFee }}</span>
            </div>
            <div class="sum-up-item">
              <span class="sum-up-item-label">应付金额</span>
              <span>{{ orderDetail.amount }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="info-item">
        <div class="title">支付信息</div>
        <div class="pay-info">
          <tables :columns="payColumns" v-model="orderDetail.payRecordList">
          </tables>
        </div>
      </div>
      <div class="info-item">
        <div class="title">操作记录</div>
        <div class="operate-info">
          <tables
            :columns="operateColumns"
            v-model="orderDetail.logList"
          ></tables>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { OrderStateObj, PayTypeObj, OrderState } from '@/enums'
import { formatTime } from '@/libs/tools'
export default {
  name: 'order-detail',
  components: {
    Tables
  },
  data () {
    return {
      OrderStateObj,
      OrderState,
      loading: false,
      orderDetail: {},
      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' }
      ],
      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: 'payId', 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: 'amount',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            let obj = OrderStateObj[params.row.orderState]
            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))
          }
        }
      ],
      oid: '',
      orderConfig: {},
      rocallTime: ''
    }
  },
  methods: {
    requestOrderDetail (oid) {
      this.loading = true
      this.api({
        apiName: 'getOrderDetail',
        postdata: oid,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.orderDetail = res.data
          console.log(res.data.orderState == OrderState.PAYING)
          if (Object.keys(this.orderConfig).length) {
            if (res.data.orderState == OrderState.PAYING) {
              this.ComputetTime(res.data)
            }
          }
        }
      })
    },
    getOrderConfig () {
      this.api({
        apiName: 'orderConfig',
        success: (res) => {
          if (res.data.length) {
            this.orderConfig = res.data[0]
          }
        }
      })
    },
    ComputetTime (data) {
      let st = new Date().getTime(), // 当前服务器时间
        ct = data.createTime// 创建订单时间
      let cm = this.orderConfig.orderCloseLimit * 60 * 1000 - (st - ct)
      this.runBack(cm)
    },
    runBack (cm) {
      if (cm > 0) {
        cm > 60000
          ? (this.rocallTime =
              (new Date(cm).getMinutes() < 10
                ? '0' + new Date(cm).getMinutes()
                : new Date(cm).getMinutes()) +
              ':' +
              (new Date(cm).getSeconds() < 10
                ? '0' + new Date(cm).getSeconds()
                : new Date(cm).getSeconds()))
          : (this.rocallTime =
              '00:' +
              (new Date(cm).getSeconds() < 10
                ? '0' + new Date(cm).getSeconds()
                : new Date(cm).getSeconds()))
        let _msThis = this
        setTimeout(function () {
          cm -= 1000
          _msThis.runBack(cm)
        }, 1000)
      } else {
        // this.requestOrderDetail(this.oid)// 调用改变订单状态接口
      }
    }
  },
  mounted () {
    let { oid } = this.$route.query
    this.oid = oid
    this.getOrderConfig()
    setTimeout(() => {
      this.requestOrderDetail(oid)
    })
  }
}
</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;
      // justify-content: space-between;
      flex: 1;
      .left-order-no{
        border: 1px solid #F8F8F8;
        width: 500px;
        display: flex;
        flex: 1;
        .left-label{
          display: block;
          width: 200px;
          height: 40px;
          padding-right:10px;
          line-height: 40px;
          text-align: right;
          background: #F8F8F8;
        }
        .left-info{
          display: block;
          width: 300px;
           padding-left:10px;
           line-height: 40px;
          // background: #F8F8F8;
        }
      }
      .right-order-status{
        border: 1px solid #F8F8F8;
        // width: 400px;
        display: flex;
        flex: 1;
        .left-label{
          display: block;
          width: 200px;
          padding-right:10px;
          line-height: 40px;
          text-align: right;
          background: #F8F8F8;
        }
        .left-info{
          display: block;
          width: 100px;
          padding-left:10px;
           line-height: 40px;
          // background: #F8F8F8;
        }
      }
}
.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>
