<template>
  <div>
    <el-dialog title="货物配舱" width="80%" :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="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" :formatter="formatter">
        </el-table-column>
      </el-table>
      <el-form ref="form" class="form-header" label-position="right" label-width="auto"
        style="width: 400px; margin: 30px auto" :model="formData" :rules="rules">
        <el-form-item label="航班号" prop="fltNo">
          <el-input class="formItem" v-model="fltNo" size="medium" placeholder="请输入航班号" maxlength="20"
            style="width: 350px" @change="dateChange"></el-input>
        </el-form-item>
        <el-form-item label="航班日期:" prop="fltDate">
          <el-date-picker class="formItem" v-model="formData.fltDate" type="date" placeholder="选择日期"
            value-format="yyyy-MM-dd" size="medium" style="width: 350px" @change="dateChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="route">
          <template slot="label">
            <div style="display:inline-block">航线:
              <el-tooltip class="item" effect="dark" content="选择航线需要先输入航班号和航班日期，才能选择对应得航线" placement="top-start">
                <span class="el-icon-warning" style="color:#1890ff;font-size:16px"></span>
              </el-tooltip>
            </div>
          </template>
          <el-select class="formItem" v-model="formData.route" placeholder="不限" :disabled="routeList.length == 0">
            <el-option v-for="(item, index) in routeList" :label="item.route" :value="item.route" :key="index">
              <Tooltips :content="item.route" :refName="item.route"></Tooltips>
            </el-option>
          </el-select>
        </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, findFlightRoute } from "@/api/cargoSelect";

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      formData: {
        ids: [],
        fltNo: undefined,
        fltDate: undefined,
        route: 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" },
      ],
      routeList: [],
      rules: {
        fltNo: [
          {
            required: true,
            message: "航班号不能为空",
            trigger: "blur",
          },
        ],
        fltDate: [
          {
            required: true,
            message: "航班日期不能为空",
            trigger: "blur",
          },
        ],
        route: [
          {
            required: true,
            message: "航线不能为空",
            trigger: "blur",
          },
        ],
      },
      loading: false,
    };
  },
  methods: {
    cleaerForm() {
      this.formData = {
        ids: [],
        fltNo: undefined,
        fltDate: undefined,
        route: undefined,
        flightId: undefined,
        overweight: false,
      };
      this.routeList = []
    },
    //确定配舱
    submit() {
      this.loading = true;
      let arr = [];
      this.tableData.forEach((item) => {
        arr.push(item.id);
      });
      this.formData.ids = arr;
      this.routeList.forEach(item => {
        if (item.route === this.formData.route) {
          this.formData.flightId = item.id
        }
      })
      if (this.formData.fltNo && this.formData.fltDate) {
        allocationFlight(this.formData).then((res) => {
          this.loading = false;
          //code 200 配舱成功 202 重量已满需要确认 其余code直接输出msg
          if (res.code === 200) {
            this.msgSuccess('货物配舱成功')
            this.cleaerForm();
            this.$emit("dialogBeforeClose", { close: false, reload: true });
          } else if (res.code === 202) {
            this.$confirm(res.msg, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.formData.overweight = true; //确定继续overweight变为true再次请求接口
                allocationFlight(this.formData).then((res) => {
                  if (res.code === 200) {
                    this.msgSuccess('货物配舱成功')
                  } else {
                    this.msgWarning(res.msg)
                  }
                });
                this.cleaerForm();
                this.$emit("dialogBeforeClose", { close: false, reload: true });
              })
              .catch(() => {
                //取消 取消当前配舱
                this.msgSuccess('配舱已取消')
                this.cleaerForm();
                this.$emit("dialogBeforeClose", {
                  close: false,
                  reload: true,
                });
              });
          } else {
            this.loading = false;
            this.msgWarning(res.msg)
          }
        }).catch(() => {
          this.loading = false;
        });
      } else {
        this.loading = false;
        this.msgWarning('航班号或航班日期不能为空')
      }
    },
    dialogBeforeClose() {
      this.cleaerForm();
      this.$refs['form'].clearValidate();
      this.$emit("dialogBeforeClose", { close: false, reload: true });
    },
    formatter(row, column, cellValue, index) {
      if (column.property == "cargoRulesStatus") {
        if (cellValue == 1) {
          return "手动"
        } else {
          return "自动"
        }
      }
      return cellValue
    },
    //日期选择变化
    dateChange(val) {
      this.routeList = []
      if (this.formData.fltNo && this.formData.fltNo != null && this.formData.fltNo != '') {
        if (this.formData.fltDate && this.formData.fltDate != null && this.formData.fltDate != '') {
          let obj = {
            fltNo: this.formData.fltNo,
            fltDate: this.formData.fltDate,
          }
          findFlightRoute(obj).then(res => {
            if (res.code === 200) {
              res.data[0].route.indexOf(';') <= 0 ?
                this.routeList = res.data :
                res.data[0].route.split(';').forEach(item => {
                  this.routeList.push({ id: res.data[0].id, route: item })
                })
            } else {
              this.msgWarning(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.msgWarning('航班日期不能为空')
        }
      } else {
        this.msgWarning('航班号不能为空')
      }
    }
  },
  computed: {
    fltNo: {
      get: function () {
        return this.formData.fltNo;
      },
      set: function (val) {
        this.formData.fltNo = this.upCase(val);
      },
    },
  },
};
</script>

<style>

</style>