<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" :width="item.width" :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 { batchMoveCargoToOtherFlight, 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: null,
        overweight: false,
      },
      cargoHeader: [
        { name: "口岸代码", value: "portName", width: "" },
        { name: "运单号", value: "waybillNo", width: "" },
        { name: "货物状态", value: "statusName", width: "" },
        { name: "站点", value: "siteName", width: "" },
        { name: "申报类型", value: "typeName", width: "" },
        { name: "URSA", value: "ursa", width: "" },
        { name: "实际重量", value: "actualWeight", width: "" },
        { name: "件数", value: "qty", width: "" },
        { name: "ACCS原航班号", value: "fltNoAccs", width: "120" },
        { name: "ACCS原航班日期", value: "fltDateAccs", width: "130" },
        { name: "品名描述", value: "nameDescription", width: "" },
        { name: "是否自动", value: "cargoRulesStatus", width: "" },
        { name: "创建人", value: "createUserName", width: "" },
        { name: "创建时间", value: "createTime", width: "" },
      ],
      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.$refs.form.validate(val => {
        if (val) {
          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) {
            batchMoveCargoToOtherFlight(this.formData).then((res) => {
              this.loading = false;
              //code 200 迁转成功 202 重量已满需要确认 其余code直接输出msg
              if (res.code === 200) {
                this.msgSuccess(res.msg)
                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再次请求接口
                    batchMoveCargoToOtherFlight(this.formData).then((res) => {
                      if (res.code === 200) {
                        this.msgSuccess(res.msg)
                      } else {
                        this.msgWarning(res.msg)
                        if (res.data != null && res.data.length > 0) {
                          let arr = []
                          res.data.forEach(item => {
                            let obj = {
                              waybillNo: item.split(':')[0],
                              errorMessage: item.split(':')[1]
                            }
                            arr.push(obj)
                          })
                          this.$router.push({ name: 'UpDateResult', params: { data: arr, from: 'queryCargo' } })
                          this.dialogBeforeClose()
                        }
                      }
                    });
                    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)
                if (res.data != null && res.data.length > 0) {
                  let arr = []
                  res.data.forEach(item => {
                    let obj = {
                      waybillNo: item.split(':')[0],
                      errorMessage: item.split(':')[1]
                    }
                    arr.push(obj)
                  })
                  this.$router.push({ name: 'UpDateResult', params: { data: arr, from: 'queryCargo' } })
                  this.dialogBeforeClose()
                }
              }
            }).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 = []
      this.formData.route = null
      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>