<template>
  <div class="orderDetail-page-wrapper">
    <a-card :bordered="false" class="orderDetail-goods-info">
      <!-- 标题 -->
      <div class="page-header">
        <h3>订单信息</h3>
        <a-badge v-if="orderDetail" :count="orderDetail.orderStateDictValue" :number-style="{ border: '1px solid #ff9900', backgroundColor: 'transparent', color: '#ff9900', padding: '1px 10px', height: '24px' }" />
      </div>
      <a-divider />
      <a-row :gutter="48" v-if="orderDetail">
        <a-col :span="8" class="item-cont">
          <p class="item-label">下单时间：</p>
          <p class="item-main">{{ orderDetail.orderTime }}</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">订单编号：</p>
          <p class="item-main">{{ orderDetail.orderSn }}</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">订单总额：</p>
          <p class="item-main">{{ orderDetail.payGold }}乐豆</p>
        </a-col>
      </a-row>
      <a-row :gutter="48" v-if="orderDetail">
        <a-col :span="8" class="item-cont">
          <p class="item-label">用户手机：</p>
          <p class="item-main">{{ orderDetail.customerMobile }}</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">收货人姓名：</p>
          <p class="item-main">{{ orderDetail.receiverName }}</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">收货人手机：</p>
          <p class="item-main">{{ orderDetail.receiverPhone }}</p>
        </a-col>
      </a-row>
      <a-row :gutter="48" v-if="orderDetail">
        <a-col :span="16" class="item-cont">
          <p class="item-label">收货地址：</p>
          <p class="item-main">{{ orderDetail.receiveAddress }}</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">支付时间：</p>
          <p class="item-main">{{ orderDetail.payTime ? orderDetail.payTime : '--' }}</p>
        </a-col>
      </a-row>
    </a-card>
    <a-card :bordered="false" class="orderDetail-goods-main">
      <!-- 标题 -->
      <div class="page-header">
        <h3>商品信息</h3>
      </div>
      <a-divider />
      <div class="goods-info-cont">
        <!-- 供应商列 -->
        <a-tabs type="card" @change="handleClick" v-if="orderDetail">
          <a-tab-pane v-for="item in orderDetail.officialPartnerOrderList" :key="item.officialPartnerNo" :tab="item.officialPartner.name"></a-tab-pane>
        </a-tabs>
        <!-- 商品订单 -->
        <div v-if="orderData && orderData.orderGoodsList">
          <!-- 待发货 -->
          <GoodsOrder type="orderGoods" :orderData="orderData.orderGoodsList" :orderState="orderDetail.orderState" :isReset="isReset" @sendGoods="sendGoods" />
        </div>
        <div v-if="orderData && orderData.orderExpressList">
          <!-- 已发货 -->
          <GoodsOrder v-for="(item, index) in orderData.orderExpressList" :key="index" type="express" :orderData="item" />
        </div>
      </div>
    </a-card>
    <!-- 物流信息 -->
    <GoodsLogistics :openModal="openModal" @submit="handleSubmit" @close="openModal=false" />
  </div>
</template>

<script>
import GoodsOrder from './GoodsOrder.vue'
import GoodsLogistics from './GoodsLogistics.vue'
import { orderFind, offPartnerOrderFind, orderExpressSend } from '@/api/order'
export default {
  name: 'OrderDetail',
  components: { GoodsOrder, GoodsLogistics },
  data () {
    return {
      orderDetail: null, //  订单详情
      orderData: null,
      officialPartnerNo: '', //  供货商编号
      openModal: false, //  是否填写物流信息
      orderGoodsNoList: [], //  发货订单号
      isReset: false //  是否重置数据
    }
  },
  methods: {
    //  供应商下的订单信息
    handleClick (officialPartnerNo) {
      if (officialPartnerNo) {
        this.officialPartnerNo = officialPartnerNo
      }
      offPartnerOrderFind({ orderNo: this.orderDetail.orderNo, officialPartnerNo: officialPartnerNo || this.officialPartnerNo }).then(res => {
        if (res.status == 200) {
          this.orderData = res.data
        } else {
          this.orderData = null
        }
      })
    },
    //  立即发货
    sendGoods (idArr) {
      this.orderGoodsNoList = idArr
      this.openModal = true
    },
    getOrderDetail () {
      orderFind({ id: this.$route.params.id }).then(res => {
        if (res.status == 200) {
          this.orderDetail = res.data
          if (this.orderDetail.officialPartnerOrderList && this.orderDetail.officialPartnerOrderList.length > 0) {
            this.officialPartnerNo = this.orderDetail.officialPartnerOrderList[0].officialPartnerNo
            this.handleClick()
          }
        } else {
          this.orderDetail = null
        }
      })
    },
    //  提交物流
    handleSubmit (form) {
      this.isReset = false
      form.orderGoodsNoList = this.orderGoodsNoList
      form.orderNo = this.orderDetail.orderNo
      form.officialPartnerNo = this.officialPartnerNo
      orderExpressSend(form).then(res => {
        if (res.status == 200) {
          this.isReset = true
          this.$message.success(res.message)
          this.handleClick()
          this.openModal = false
        }
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getOrderDetail()
    })
  }
}
</script>
<style lang="less" scoped>
	.orderDetail-page-wrapper{
    .orderDetail-goods-info{
      //  标题
      .page-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        h3{
          margin: 0;
        }
      }
      .item-cont{
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 24px;
        .item-label{
          display: inline-block;
          flex-shrink: 0;
          margin: 0;
          width: 90px;
        }
        .item-main{
          display: inline-block;
          flex-grow: 1;
          margin: 0;
          word-break: break-all;
        }
      }
    }
    .orderDetail-goods-main{
      margin-top: 15px;
    }
  }
</style>
