<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
      <div slot="header" class="card-title">{{ $t('weightDeal.view') }}</div>
      <el-descriptions :column="4">
        <el-descriptions-item :label="$t('weightDeal.marks')">
          {{ orderData.marks?orderData.marks:$t($t('weightDeal.none')) }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('weightDeal.costVO')">
          {{ orderData.sumNum||0 }}/{{ orderData.costVO?orderData.costVO.totalNum:0 }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('weightDeal.status')">
          <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" />
        </el-descriptions-item>
        <el-descriptions-item :label="$t('weightDeal.inTime')">
          <span v-if="orderData">{{ orderData.deliveryDate||$t('weightDeal.none') }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('weightDeal.transport')">
          <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
        </el-descriptions-item>
        <el-descriptions-item :label="$t('weightDeal.start')">
          {{ orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTitleZh:$t('weightDeal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('weightDeal.dest')">
          {{ orderData.logisticsInfoDto?orderData.logisticsInfoDto.destTitleZh:$t('weightDeal.none') }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4">
        <el-descriptions-item :label="$t('weightDeal.consignorName')">
          {{ orderData.consignorVO?orderData.consignorVO.name||$t('weightDeal.none'):$t('weightDeal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('weightDeal.consignorCompany')">
          {{ orderData.consignorVO?orderData.consignorVO.company||$t('weightDeal.none'):$t('weightDeal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('weightDeal.consignorPhone')">
          {{ orderData.consignorVO?orderData.consignorVO.phone||$t('weightDeal.none'):$t('weightDeal.none') }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4">
        <el-descriptions-item :label="$t('weightDeal.consigneeName')">
          {{ orderData.consigneeVO?orderData.consigneeVO.name||$t('weightDeal.none'):$t('weightDeal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('weightDeal.consigneeCompany')">
          {{ orderData.consigneeVO?orderData.consigneeVO.company||$t('weightDeal.none'):$t('weightDeal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('weightDeal.consigneePhone')">
          {{ orderData.consigneeVO?orderData.consigneeVO.phone||$t('weightDeal.none'):$t('weightDeal.none') }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">{{ $t('weightDeal.goods') }}</div>
      <el-table v-loading="loading" border :data="orderData.orderItemVOList" :summary-method="getSummaries" show-summary>
        <el-table-column :label="$t('weightDeal.index')" align="center" prop="id" type="index">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('weightDeal.proName')" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.prodTitleEn||'' }}</p>
            <p>{{ scope.row.prodTitleZh||'' }}</p>
          </template>
        </el-table-column>
        <el-table-column :label="$t('weightDeal.orderGoods')">
          <template slot-scope="scope">
            <p>{{ $t('weightDeal.brand') }}：<dict-tag :value="scope.row.brandType" :type="DICT_TYPE.ECW_IS_BRAND" /></p>
            <p>{{ $t('weightDeal.num') }}：{{ scope.row.num||0 }}</p>
            <p>{{ $t('weightDeal.volume') }}：{{ scope.row.volume||0 }}CBM</p>
            <p>{{ $t('weightDeal.weight') }}：{{ scope.row.weight||0 }}KG</p>
          </template>
        </el-table-column>
        <el-table-column :label="$t('weightDeal.putGoods')" align="center">
          <template slot-scope="scope">
            <p>{{ $t('weightDeal.unit') }}：{{ scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.boxGauge:0 }}</p>
            <p>{{ $t('weightDeal.brand') }}：<dict-tag :value="scope.row.brandType" :type="DICT_TYPE.ECW_IS_BRAND" /></p>
            <p>{{ $t('weightDeal.num') }}：{{ scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.cartonsNum:0 }}</p>
            <p>{{ $t('weightDeal.volume') }}：{{ scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.volume:0 }}CBM</p>
            <p>{{ $t('weightDeal.weight') }}：{{ scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.weight:0 }}KG</p>
          </template>
        </el-table-column>
        <el-table-column v-if="list.orderExceptionType=='order_heavy_cargo_exception'" :label="$t('weightDeal.ss')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.weVolume||0 }}CBM</span>
          </template>
        </el-table-column>
        <el-table-column v-else :label="$t('weightDeal.vweight')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.weVolume||0 }}KG</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('weightDeal.handlerTime')" scope="handlerTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.handlerTime) }}</span>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <div slot="footer" class="dialog-footer">
      <div>
        <el-button v-if="false" type="primary" @click="submit('general_cargo')">{{ $t('weightDeal.general') }}</el-button>
        <el-button v-if="list.orderExceptionType=='order_heavy_cargo_exception'" plain type="primary" @click="submit('process')">{{ $t('weightDeal.process') }}</el-button>
        <el-button v-else plain type="primary" @click="submit('process')">{{ $t('weightDeal.pao') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrder, getExceptionById, handlerExceptionByExceptionId } from '@/api/order'
import { DICT_TYPE } from '@/utils/dict'
import { parseTime } from '@/utils'
import DictTag from '@/components/DictTag'
export default {
  name: 'WeightDeal',
  components: {
    DictTag
  },
  props: {
    id: Number
  },
  data() {
    return {
      parseTime,
      DICT_TYPE: DICT_TYPE,
      // 遮罩层
      loading: false,
      orderData: {},
      list: {},
      orderId: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      // 执行查询
      getExceptionById(this.id).then(response => {
        this.list = response.data
        this.loading = false
        this.getOrders()
      })
    },
    getOrders() {
      getOrder(this.list.orderId).then(response => {
        this.orderData = response.data
      })
    },
    getSummaries() {
      const sums = []
      if (!this.orderData || !this.orderData.list || this.orderData.length == 0) {
        return sums
      }
      sums[0] = this.$t('weightDeal.subtotal')
      var orderSum = 0
      var orderV = 0
      var orderW = 0
      var leviteSum = 0
      var leviteV = 0
      var leviteW = 0
      this.orderData.list.forEach((column, index) => {
        orderSum += column.orderSum
        orderV += column.volume
        orderW += column.weight
        leviteSum += column.orderSum
        leviteV += column.volume
        leviteW += column.weight
      })
      sums[1] = ''
      sums[2] = this.$t('weightDeal.sums2') + orderSum + this.$t('weightDeal.box') + orderV + ' m³ ' + orderW + ' kg'
      sums[3] = this.$t('weightDeal.sums3') + leviteSum + this.$t('weightDeal.box') + leviteV + ' m³ ' + leviteW + ' kg'
      sums[4] = ''
      sums[5] = ''
      return sums
    },
    submit(result) {
      handlerExceptionByExceptionId({ orderExceptionId: this.list.id, orderExceptionHandlerResult: result }).then(res => {
        this.$message({
          message: this.$t('common.success'),
          type: 'success'
        })
        this.$emit('reload')
      })
    }
  }
}
</script>
<style scoped>
  .filelist{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .filelist span{
    width: 48%;
    margin-right: 2%;
    color: #1E98D7;
  }
  .card-title{
      font-size: 18px;
      font-weight: bold;
      margin-top: 10px;
  }
  .card{
    margin-top: 20px;
  }
</style>
