<template>
  <el-dialog
    v-if="detail"
    visible
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="1000px"
  >
    <el-form
      ref="form"
      :model="formData"
      size="small"
      label-width="100px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('release.orderNo')">
            {{ detail.orderNo }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('release.sumNum')">
            {{ detail.sumNum }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('release.sumVolume')"> {{ detail.sumVolume }}m³ </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('release.sumWeight')"> {{ detail.sumWeight }}kg </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('release.sumConNum')">
            {{ detail.sumNum }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('release.remainNum')">
            {{ detail.sumNum - detail.releaseNum }}
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title">{{ $t('release.release') }}</div>
      <div class="flex">
        <el-form-item :label="$t('release.consigneeName')" prop="consigneeName">
          {{ detail.cargoControlPickBackVOList.length>0?detail.cargoControlPickBackVOList[0].consigneeName:'' }}
        </el-form-item>
        <el-form-item :label="$t('release.consigneePhone')" prop="consigneePhone">
          <span>
            +{{ detail.cargoControlPickBackVOList.length>0?detail.cargoControlPickBackVOList[0].consigneeCountryCode:'' }} {{ detail.cargoControlPickBackVOList.length>0?detail.cargoControlPickBackVOList[0].consigneePhone:'' }}
          </span>
        </el-form-item>
        <el-form-item :label="$t('release.consigneeEmail')" prop="consigneeEmail">
          {{ detail.cargoControlPickBackVOList.length>0?detail.cargoControlPickBackVOList[0].consigneeEmail:'' }}
        </el-form-item>
      </div>
      <el-table :data="detail.cargoControlPickBackVOList || []" border>
        <el-table-column :label="$t('release.conNum')" prop="controlNum" />
        <el-table-column :label="$t('release.pickNum')" prop="pickNum" />
        <el-table-column :label="$t('release.pickVolume')" prop="pickVolume" />
        <el-table-column :label="$t('release.pickWeight')" prop="pickWeight" />
        <el-table-column :label="$t('release.remarks')" prop="remarks" />
      </el-table>
    </el-form>
  </el-dialog>
</template>
<script>
import { getPickRleaseInfo } from '@/api/order'
export default {
  props: {
    orderId: [String, Number]
  },
  data() {
    return {
      detail: null,
      formData: {
        pickNum: 0,
        pickQuantity: 0,
        pickVolume: 0,
        pickWeight: 0,
        remarks: ''
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      getPickRleaseInfo(this.orderId).then((res) => (this.detail = res.data))
    },
    closeDialog() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  &:before {
    content: '';
    width: 5px;
    height: 15px;
    background: #666;
    margin-right: 10px;
  }
}
</style>
