<template>
  <div class="app-container" v-if="order">
    <el-card class="card">
      <div slot="header" class="card-title">
        订单编号：{{order.orderNo}}
        <template v-if="order.containerNumber">- {{order.containerNumber}}</template>
      </div>
      <el-row :gutter="20">
        <el-col :span="12" v-if="order.consignorVO">
          <el-descriptions class="margin-top" border title="发货人" :column="1" :labelStyle="{width:'150px'}">
            <el-descriptions-item label="发货人">{{order.consignorVO.name}}</el-descriptions-item>
            <el-descriptions-item label="发货人电话">{{order.consignorVO.phone}}</el-descriptions-item>
            <el-descriptions-item label="发货人邮箱">{{order.consignorVO.email}}</el-descriptions-item>
            <el-descriptions-item label="发货人公司名称">
              {{order.consignorVO.company}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12" v-if="order.consigneeVO">
          <el-descriptions class="margin-top" border title="收货人" :column="1" :labelStyle="{width:'150px'}">
            <el-descriptions-item label="收货人">{{order.consigneeVO.name}}</el-descriptions-item>
            <el-descriptions-item label="收货人电话">{{order.consigneeVO.phone}}</el-descriptions-item>
            <el-descriptions-item label="收货人邮箱">{{order.consigneeVO.email}}</el-descriptions-item>
            <el-descriptions-item label="收货人公司名称">
              {{order.consigneeVO.company}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions class="margin-top" border title="物流信息" :column="2">
            <el-descriptions-item label="始发仓">{{order.logisticsInfoDto.startTitleZh}}</el-descriptions-item>
            <el-descriptions-item label="目的仓">{{order.logisticsInfoDto.destTitleZh}}</el-descriptions-item>
            <el-descriptions-item label="地址" :span="2">{{order.logisticsInfoDto.startAddressZh}}</el-descriptions-item>
            <el-descriptions-item label="运输方式" :span="2">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="order.transportId" />
            </el-descriptions-item>
            <el-descriptions-item label="出货渠道" :span="2">{{order.logisticsInfoDto.startTitleZh}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions class="margin-top" border title="基础信息" :column="2">
            <el-descriptions-item label="唛头">{{order.marks}}</el-descriptions-item>
            <el-descriptions-item label="送货时间"></el-descriptions-item>
            <el-descriptions-item label="是否控货">{{order.isCargoControl?'是':'否'}}</el-descriptions-item>
            <el-descriptions-item label="填单信息">
              {{order.costVO.totalNum}}箱 {{order.costVO.totalWeight}}Kg {{order.costVO.totalVolume}}m³
            </el-descriptions-item>
            <el-descriptions-item label="仓库实测">
              {{order.sumNum}}箱 {{order.sumWeight}}Kg {{order.sumVolume}}m³
            </el-descriptions-item>
            <el-descriptions-item label="收款数据">
              {{order.entryNum}}箱 {{order.entryWeight}}Kg {{order.entryVolume}}m³
            </el-descriptions-item>
            <el-descriptions-item label="入仓类型">
              <dict-tag :type="DICT_TYPE.ECW_WAREHOUSING_TYPE" :value="order.warehouseType" />
            </el-descriptions-item>
            <el-descriptions-item label="单证报关">
              <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="order.customsType" />
            </el-descriptions-item>
            <el-descriptions-item label="代收货款">
              <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="order.isCollection" />
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="货物详情" name="first">
          <el-table :data="order.orderItemVOList" border style="width: 100%">
            <el-table-column prop="prodTitleZh" label="序号">
              <template slot-scope="scope">{{scope.$index + 1}}</template>
            </el-table-column>
            <el-table-column prop="prodTitleZh" label="中文品名" />
            <el-table-column prop="prodTitleEn" label="英文品名" />
            <el-table-column prop="brand" label="品牌">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="row.brand" />
              </template>
            </el-table-column>
            <el-table-column prop="num" label="填单件数" />
            <el-table-column prop="num" label="入仓件数" />
            <el-table-column prop="unit" label="单位">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.ECW_PACKAGE_TYPE" :value="row.unit" />
              </template>
            </el-table-column>

            <el-table-column prop="worth" label="货值" />
            <el-table-column prop="" label="材质">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" :value="row.material" />
              </template>
            </el-table-column>
            <el-table-column prop="volume" label="体积(m3)" />
            <el-table-column prop="weight" label="重量(kg)" />
            <el-table-column prop="" label="费用类型">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="row.feeType" />
              </template>
            </el-table-column>
            <el-table-column prop="" label="成交单价">
              <template slot-scope="{row}">
                <template v-if="row.charging ==1">
                  全包价 // TODO 缺少全包价字段
                </template>
                <template v-else>
                  <div>
                      运费：{{row.seaFreight}} {{currentcyMap[row.seaFreightCurrency]}} / {{unitMap[row.seaFreightVolume]}}
                  </div>
                  <div>
                      清关费：{{row.clearanceFreight}} {{currentcyMap[row.clearanceFreightCurrency]}} / {{unitMap[row.clearanceFreightVolume]}}
                  </div>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="订单动态" name="second">
          <el-timeline v-if="order.orderTimeVOList && order.orderTimeVOList.length" :reverse="true">
            <el-timeline-item v-for="(activity, index) in order.orderTimeVOList" :key="index" :timestamp="activity.timestamp">
              {{ activity.titleZh }}
            </el-timeline-item>
          </el-timeline>
          <el-result v-else icon="info " title="暂无数据" subTitle="暂无订单动态数据" />
        </el-tab-pane>
        <el-tab-pane label="运单资料/提货单" name="three">
          
          <el-button type="text" @click="showWarehouseReceipt=true">查看入仓单</el-button>
          <el-button type="text" @click.native="showLadingBill=true" :disabled="!order.tidanNo">查看提货单</el-button>
          <el-button :disabled="true" type="text">装箱单未上传</el-button>
        </el-tab-pane>
        <el-tab-pane label="费用明细" name="four">
          
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <print-warehouse-receipt v-if="showWarehouseReceipt" :order-id="order.orderId" @close="showWarehouseReceipt=false" />
    <print-lading-bill v-if="showLadingBill" :order-id="order.tidanNo" :transport-type="order.transportId" @close="showLadingBill=false" />
  </div>
</template>

<script>
import { getOrder } from '@/api/ecw/order'
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import PrintWarehouseReceipt from './components/PrintWarehouseReceipt'
import PrintLadingBill from './components/PrintLadingBill'
import {getUnitList} from '@/api/ecw/unit'
import {getCurrencyList} from '@/api/ecw/currency'

export default {
  name: "detail",
  components: {
    PrintWarehouseReceipt, PrintLadingBill
  },
  filters: {
    customsTypeFilter(e, customsTypeList) {
      if (e) return customsTypeList.find(item => item.value == e).label
    },
    transportFilter(e, transportList) {
      if (e) return transportList.find(item => item.value == e).label
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      order: null,
      activeName: 'first',
      orderId: 17,
      tableData: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      activities: [],
      customsTypeList: getDictDatas(DICT_TYPE.ECW_CUSTOMS_TYPE), //报关类型
      transportList: getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE), //运输方式
      showWarehouseReceipt: false, // 是否显示打印入仓单
      showLadingBill: false, // 是否显示打印提单
      currencyList: [],
      unitList:[]
    }
  },
  computed:{
    currentcyMap(){
        let map = {}
        this.currencyList.forEach(item => {
            map[item.id] = item.titleZh
        })
        return map
    },
    unitMap(){
        let map = {}
        this.unitList.forEach(item => {
            map[item.id] = item.titleZh
        })
        return map
    },
  },
  watch:{
    activeName(){
      if(!this.feeList.length){
        this.loadFeeList()
      }
    }
  },
  created() {
    if (this.$route.query.orderId) {
      this.orderId = this.$route.query.orderId
      this.getOrder();
    }

    getCurrencyList().then(res => this.currencyList = res.data)
    getUnitList().then(res => this.unitList = res.data)
  },
  methods: {
    /** 查询列表 */
    getOrder() {
      let that = this
      that.loading = true;
      // 执行查询
      getOrder(that.orderId).then(response => {
        that.order = response.data;
      });
    },
    loadFeeList(){
      // TODO 暂无接口
    }
  }
};
</script>

<style scoped>
.card {
  margin-bottom: 20px;
}
.card-title{
  font-size: 18px;
  font-weight: bold;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
