<template>
  <div>
    <el-dialog
      title="货物配舱"
      width="80%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-divider content-position="left">已选货物信息</el-divider>
      <el-table
        :data="tableData"
        size="mini"
        height="200"
        max-height="200"
        border
        stripe
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in cargoHeader"
          header-align="center"
          align="center"
          :prop="item.value"
          :label="item.name"
          :key="index"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </el-table>
      <el-form
        ref="form"
        label-position="right"
        label-width="auto"
        style="width: 400px; margin: 30px auto"
      >
        <el-form-item label="航班号" prop="fltNo">
          <el-input
            v-model="fltNo"
            size="medium"
            placeholder="请输入航班号"
            style="width: 350px"
          ></el-input>
        </el-form-item>
        <el-form-item label="航班日期:" prop="fltDate">
          <el-date-picker
            v-model="formData.fltDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            size="medium"
            style="width: 350px"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogBeforeClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { allocationFlight } from "@/api/cargoSelect";
import { MessageBox } from 'element-ui'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      formData: {
        ids:[], 
        fltNo: undefined,
        fltDate:undefined,
        overweight:false
      },
      cargoHeader: [
        { name: "口岸代码", value: "portName" },
        { name: "运单号", value: "waybillNo" },
        { name: "货物状态", value: "statusName" },
        { name: "站点", value: "siteName" },
        { name: "申报类型", value: "typeName" },
        { name: "URSA", value: "ursa" },
        { name: "实际重量", value: "actualWeight" },
        { name: "件数", value: "qty" },
        { name: "品名描述", value: "nameDescription" },
        { name: "是否自动", value: "cargoRulesStatus" },
        { name: "创建人", value: "createUserName" },
        { name: "创建时间", value: "createTime" },
      ],
      fltHeader: [
        { name: "航班日期", value: "fltDate" },
        { name: "航班号", value: "fltNo" },
        { name: "航班路线", value: "route" },
        { name: "航班类型", value: "typeName" },
        { name: "总重量", value: "totalWeight" },
        { name: "额外增重百分比", value: "extraWeightPercent" },
        { name: "已配重量", value: "alloctedWeight" },
        { name: "配舱优先级", value: "priorityRuleName" },
        { name: "是否开启高地价", value: "highLowPriceFlg" },
        { name: "航班起飞时间", value: "takeOffTime" },
        { name: "创建人", value: "createUserName" },
        { name: "创建时间", value: "createTime" },
      ],
      rules:{
          fltNo: [{
            required: true,
            message: "航班号不能为空",
            trigger: "blur"
          }],
          fltDate: [{
            required: true,
            message: "航班日期不能为空",
            trigger: "change"
          }],
      }
    };
  },
  methods: {
    cleaerForm(){
      this.formData={
        ids:[], 
        fltNo: undefined,
        fltDate:undefined,
        overweight:false
      }
    },
    //确定配舱
    submit() {
      let arr = [];
      this.tableData.forEach(item => {
        arr.push(item.id)
      });
      this.formData.ids = arr;
      if(this.formData.fltNo && this.formData.fltDate){
        allocationFlight(this.formData).then(res=>{//code 200 配舱成功 601 重量已满需要确认 其余code直接输出msg
          if(res.code === 200){
            this.$message({
              message: "货物配舱成功",
              type: "success",
            });
          }else if(res.code === 202){
            MessageBox.confirm('航班配重已满，是否继续配舱？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }
            ).then(() => {
              this.formData.overweight = true;//确定继续overweight变为true再次请求接口
              allocationFlight(this.formData).then(res=>{
                if(res.code === 200){
                  this.$message({
                    message: "货物配舱成功",
                    type: "success",
                  });
                }else{
                  this.$message({
                    message: res.msg,
                    type: "warning",
                  });
                }
              })
              this.cleaerForm()
              this.$emit("dialogBeforeClose", {close:false,reload:true});
            }).catch(() => {//取消 取消当前配舱
               this.$message({
                  message: "配舱已取消",
                  type: "success",
                });
                this.cleaerForm()  
                this.$emit("dialogBeforeClose", {close:false,reload:false});       
            });
          }else{
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
      }else{
        this.$message({
          message: "航班号或航班日期不能为空",
          type: "warning",
        });
      }
    },
    dialogBeforeClose() {
      this.cleaerForm()
      this.$emit("dialogBeforeClose", {close:false,reload:false});
    },
  },
  computed: {
    fltNo: {
      get: function () {
        return this.formData.fltNo;
      },
      set: function (val) {
        this.formData.fltNo = val.toUpperCase();
      },
    },
  },
};
</script>

<style>
</style>