<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">合单申请-{{orderData.orderSn||''}}</div>
        <el-descriptions :column="4">
            <el-descriptions-item label="唛头">
                {{orderData.marks?orderData.marks:'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="已到箱数/总箱数">
                {{orderData.sumNum?orderData.sumNum:0+'/'+orderData.totalNum?orderData.totalNum:0}}
            </el-descriptions-item>
            <el-descriptions-item label="订单状态">
              <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" />
            </el-descriptions-item>
            <el-descriptions-item label="送货日期">
              {{orderData.date?orderData.date:'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="运输方式">
                <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
            </el-descriptions-item>
            <el-descriptions-item label="出货渠道">
                  {{orderData.channelName||'/'}}
            </el-descriptions-item>
            <el-descriptions-item label="始发地">
                  {{importCityName(orderData.startWarehouseId)}}
            </el-descriptions-item>
            <el-descriptions-item label="目的地">
              {{importCityName(orderData.startWarehouseId)}}
            </el-descriptions-item>
            <el-descriptions-item label="发货人姓名">
                {{orderData.consignorVO?orderData.consignorVO.name||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="发货公司">
                {{orderData.consignorVO?orderData.consignorVO.company||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="发货电话">
                {{orderData.consignorVO?orderData.consignorVO.phone||'无':'无'}}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="4">
            <el-descriptions-item label="收货人姓名">
                {{orderData.consigneeVO?orderData.consigneeVO.name||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="收货公司">
                {{orderData.consigneeVO?orderData.consigneeVO.company||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="收货电话">
                {{orderData.consigneeVO?orderData.consigneeVO.phone||'无':'无'}}
            </el-descriptions-item>
        </el-descriptions>

    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">已合单订单</div>
      <el-table v-loading="loading" border :data="list">
        <el-table-column label="序号" align="center" prop="id" type="index">
          <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" scope="orderSn" />
         <el-table-column label="唛头" align="center" scope="marks" />
        <el-table-column label="始发地" align="center">
            <template slot-scope="scope">
              <span>{{importCityName(scope.row.startWarehouseId)}}</span>
            </template>
        </el-table-column>
        <el-table-column label="入仓货物属性" align="center">
            <template slot-scope="scope">
              <span>合计：</span>
              <span>{{scope.row.totalNum+'箱 '+scope.row.volume+'m³ '+scope.row.weight+'kg'}}</span>
            </template>
        </el-table-column>
        <el-table-column label="入仓时间" align="center" prop='createTime' />
        <el-table-column label="状态" align="center">
           <template slot-scope="scope">
               <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">待合单订单</div>
      <el-table  border :data="singleData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
               </el-table-column>
        <el-table-column label="序号" align="center" prop="id" type="index">
          <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" scope="orderSn" />
         <el-table-column label="唛头" align="center" scope="marks" />
        <el-table-column label="始发地" align="center">
            <template slot-scope="scope">
              <span>{{importCityName(scope.row.startWarehouseId)}}</span>
            </template>
        </el-table-column>
        <el-table-column label="入仓货物属性" align="center">
            <template slot-scope="scope">
              <span>合计：</span>
              <span>{{scope.row.totalNum+'箱 '+scope.row.volume+'m³ '+scope.row.weight+'kg'}}</span>
            </template>
        </el-table-column>
        <el-table-column label="入仓时间" align="center" prop='createTime' />
        <el-table-column label="状态" align="center">
           <template slot-scope="scope">
               <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>
      <el-row v-if="singleData.length>0">
           <el-checkbox v-model="checked">需要仓库打包</el-checkbox>
      </el-row>
    </el-card>
    <div slot="footer" class="card">
        <el-button  type="primary" @click="submitForm">提交</el-button>
        <el-button plain type="primary" @click="submitForm">取消</el-button>
    </div>
  </div>
</template>

<script>
import {getOrderExceptionPage} from "@/api/ecw/orderException"
import {getTradeCityList} from '@/api/ecw/region'
import {DICT_TYPE} from  '@/utils/dict'
import {getChannel} from '@/api/ecw/channel'

export default {
  name: "SingleApply",
  components: {

  },
  data() {
    return {
      checked:false,
      orderData:{},
      // 订单异常列表
      list: [],
      singleData:[],
      tradeCityList:[],
      multipleSelection:[],
      loading:false
    };
  },
  created() {
    // this.getList();
    getTradeCityList().then(res => this.tradeCityList = res.data)
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getOrderExceptionPage(this.queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.orderData = response.data
        this.loading = false;
      });
    },
    handleSelectionChange(val) {
       this.multipleSelection = val;
     },
    importCityName(id){
        var arr = this.tradeCityList.filter(item => item.id == id)
        return arr.length>0?arr[0].titleZh:'无'
    },
    getChannelName(){
      getChannel(this.orderData.channelId).then(res=>{
        this.orderData.channelName = res.data.nameZh
      })
    },
    submitForm(){

    }
  }
}
</script>
<style>
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .card{
    margin-top: 20px;
  }
</style>