<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" :loading="loading">确 定</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: "ACCS原航班号", value: "fltNoAccs" },
        { name: "ACCS原航班日期", value: "fltDateAccs" },
        { name: "品名描述", value: "nameDescription" },
        { name: "是否自动", value: "cargoRulesStatus" },
        { name: "创建人", value: "createUserName" },
        { name: "创建时间", value: "createTime" },
      ],
      rules: {
        fltNo: [
          {
            required: true,
            message: "航班号不能为空",
            trigger: "blur",
          },
        ],
        fltDate: [
          {
            required: true,
            message: "航班日期不能为空",
            trigger: "change",
          },
        ],
      },
      loading:false,
    };
  },
  methods: {
    cleaerForm() {
      this.formData = {
        ids: [],
        fltNo: undefined,
        fltDate: undefined,
        overweight: false,
      };
    },
    //确定配舱
    submit() {
      this.loading= true;
      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 配舱成功 202 重量已满需要确认 其余code直接输出msg
          if (res.code === 200) {
            this.$message({
              message: "货物配舱成功",
              type: "success",
            });
            this.cleaerForm();
            this.loading = false;
            this.$emit("dialogBeforeClose", { close: false, reload: true });
          } else if (res.code === 202) {
            MessageBox.confirm(res.msg, "提示", {
              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.loading = false;
                this.$emit("dialogBeforeClose", { close: false, reload: true });
              })
              .catch(() => {
                //取消 取消当前配舱
                this.$message({
                  message: "配舱已取消",
                  type: "success",
                });
                this.cleaerForm();
                this.loading = false;
                this.$emit("dialogBeforeClose", {
                  close: false,
                  reload: true,
                });
              });
          } else {
            this.loading = false;
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        }).catch(()=>{
          this.loading = false;
        });
      } else {
        this.loading = false;
        this.$message({
          message: "航班号或航班日期不能为空",
          type: "warning",
        });
      }
    },
    dialogBeforeClose() {
      this.cleaerForm();
      this.$emit("dialogBeforeClose", { close: false, reload: true });
    },
  },
  computed: {
    fltNo: {
      get: function () {
        return this.formData.fltNo;
      },
      set: function (val) {
        this.formData.fltNo = val.toUpperCase();
      },
    },
  },
};
</script>

<style>
</style>