<template>
  <div class="orderDetail-page-wrapper">
    <a-card :bordered="false" class="orderDetail-goods-info">
      <!-- 标题 -->
      <div class="page-header">
        <h3>订单信息</h3>
        <a-badge count="部分发货" :number-style="{ border: '1px solid #ff9900', backgroundColor: 'transparent', color: '#ff9900', padding: '1px 10px', height: '24px' }" />
      </div>
      <a-divider />
      <a-row :gutter="48">
        <a-col :span="8" class="item-cont">
          <p class="item-label">下单时间：</p>
          <p class="item-main">2020-10-30 16:45</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">订单编号：</p>
          <p class="item-main">No12387612387</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">订单总额：</p>
          <p class="item-main">1123乐豆</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">用户手机：</p>
          <p class="item-main">15757989887</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">收货人姓名：</p>
          <p class="item-main">豆豆</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">收货人手机：</p>
          <p class="item-main">15712457854</p>
        </a-col>
        <a-col :span="16" class="item-cont">
          <p class="item-label">收货地址：</p>
          <p class="item-main">陕西省西安市未央区阿克苏接电话高科技大厦</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">支付时间：</p>
          <p class="item-main">2020-10-30 16:46</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-menu class="menu-cont" :defaultSelectedKeys="[menuList[0].id]" mode="horizontal" @click="handleClick">
          <a-menu-item v-for="item in menuList" :key="item.id" :title="item.name">
            {{ item.name }}
          </a-menu-item>
        </a-menu>
        <!-- 商品订单 -->
        <GoodsOrder v-for="(item, index) in orderData" :key="index" :orderData="item" @sendGoods="sendGoods" />
      </div>
    </a-card>
    <!-- 物流信息 -->
    <GoodsLogistics :openModal="openModal" @success="sendGoodsSuccess" @close="openModal=false" />
  </div>
</template>

<script>
import GoodsOrder from './GoodsOrder.vue'
import GoodsLogistics from './GoodsLogistics.vue'
export default {
  name: 'OrderDetail',
  components: { GoodsOrder, GoodsLogistics },
  data () {
    return {
      menuList: [
        { id: 1, name: '供应商1' },
        { id: 2, name: '供应商2' },
        { id: 3, name: '供应商3' }
      ],
      orderData: [
        {
          orderStatus: 1,
          listData: [
            { id: 1, name: '蓝精灵阿斯达克洗衣液', price: 52, buyNum: 30 },
            { id: 2, name: '前往东京国际权威的沐浴露', price: 22, buyNum: 7 },
            { id: 3, name: '三只松鼠', price: 143, buyNum: 10 }
          ]
        },
        {
          orderStatus: 2,
          companyName: '韵达快递',
          orderNo: '476136981238',
          listData: [
            { id: 1, name: '蓝精灵阿斯达克洗衣液', price: 52, buyNum: 30 },
            { id: 2, name: '前往东京国际权威的沐浴露', price: 22, buyNum: 7 }
          ]
        },
        {
          orderStatus: 2,
          companyName: '顺丰快递',
          orderNo: '4665476136981238',
          listData: [
            { id: 1, name: '蓝精灵阿斯达克洗衣液', price: 52, buyNum: 30 },
            { id: 2, name: '前往东京国际权威的沐浴露', price: 22, buyNum: 7 }
          ]
        }
      ],
      openModal: false //  是否填写物流信息
    }
  },
  methods: {
    //  切换  供应商
    handleClick (item) {
      console.log(item, '---切换供应商')
    },
    //  立即发货
    sendGoods (idArr) {
      console.log(idArr)
      this.openModal = true
    },
    //  物流信息填写成功
    sendGoodsSuccess () {
      console.log('物流信息填写成功')
    }
  }
}
</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;
        }
      }
    }
    .orderDetail-goods-main{
      margin-top: 15px;
    }
  }
</style>
