<template>
  <div>
    <el-form class="form-header" :model="queryParams" ref="queryForm" size="small" :inline="true" label-position="right"
      label-width="auto">
      <el-form-item label="原航班">
        <el-input type="text" v-model="sourceFlightNo" placeholder="请输入原航班" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable>
          <el-option v-for="dict in statusList" :key="dict.id" :label="dict.name" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading" @click="handleQuery">查询原航班配置
        </el-button>
      </el-form-item>
      <br />
      <el-form-item label="日期" prop="flightDate">
        <el-date-picker value-format="yyyy-MM-dd" v-model="queryParams.flightDate" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="findSourceFlightAndFlightDate">查询实际配载航班
        </el-button>&#12288;
        <span style="color:#ff4949; font-size: 12px;">注：原航班+日期查询该日期的航班实际情况</span>
      </el-form-item>
      <br />
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" size="mini" v-hasPermi="['allocation:rand:add']"
          @click="handleAdd">添加规则</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <Tables ref="newTables" ductName="flightRand" :data="sourceFlightRulesList" :headerData="tableHeaders['flightRand']"
      :order="true" :showOverflowTooltip="false" :totalCount="total" :loading="loading" :limitSize="queryParams.limit"
      :limitStart="queryParams.start" :page="queryParams.pageNum" :pageSizes="[20]" :height="tableHeight"
      @currentChange="currentChange">
      <template slot="optionColumn">
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['allocation:rand:update']"
              @click="handleUpdate(scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" style="color:#ff4949"
              v-hasPermi="['allocation:rand:delete']" @click="handleDeleteorPlayorpause(scope.row, 0, '删除')">
              删除</el-button>
            <el-button size="mini" type="text" icon="el-icon-video-play" v-if="scope.row.status == '3'"
              v-hasPermi="['allocation:rand:openClose']" @click="handleDeleteorPlayorpause(scope.row, 1, '启用')">启用
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-video-pause" v-if="scope.row.status != '3'"
              v-hasPermi="['allocation:rand:openClose']" @click="handleDeleteorPlayorpause(scope.row, 3, '停用')">停用
            </el-button>
          </template>
        </el-table-column>
      </template>
    </Tables>
    <!-- 查看目的航班对话框 -->
    <el-dialog title="实际配载航班" :visible.sync="openFlightDate" width="70%" :close-on-click-modal="false" :show-close="false"
      :append-to-body="true" @close="cancelFlightDate">
      <el-table v-loading="loadingFlightDate" :data="sourceFlightAndFlightDate">
        <el-table-column type="index" label="序号" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="原航班" align="center" prop="sourceFlightNo" width="150" />
        <el-table-column label="实际配载航班" align="center" prop="actualFlight" width="250" />
        <el-table-column label="航线" align="center" prop="route" />
        <el-table-column label="航班日期" align="center" prop="flightDate" width="150" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit"
              @click="handleClick(scope.row)">查看配置维度
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFlightDate">返 回</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="55%" :append-to-body="true" :close-on-click-modal="false"
      :show-close="false" @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="auto" size="small">
        <el-row>
          <el-col :span="8">
            <el-form-item label="原航班" prop="sourceFlightNo">
              <el-input v-model="form.sourceFlightNo" placeholder="请输入原航班号" maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="口岸" prop="portName">
              <el-select :disabled="true" v-model="form.portName" placeholder="选择口岸">
                <el-option v-for="item in portNameList" :label="item" :value="item" :key="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="有效开始时间" prop="startDate">
              <el-date-picker clearable :picker-options="pickerOptionsStart" v-model="form.startDate" type="date"
                value-format="yyyy-MM-dd" placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效结束时间" prop="endDate">
              <el-date-picker clearable :picker-options="pickerOptionsEnd" v-model="form.endDate" type="date"
                value-format="yyyy-MM-dd" placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="margin-bottom: 5%">
            <span style="color: #ff4949; margin-left: 10%; font-size: 12px;">提示:配载航班之间请用分号分隔【符号不区分中英文】,例:CA1053;C7433</span><br />
            <span style="color: #ff4949; margin-left: 10%; font-size: 12px;">提示:如果需要设置配载航班延迟或提前可以直接在目的航班后加减【+-】天数。如:CA1053+1;CZ433-1</span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="配载航班" prop="flightRank">
              <el-input type="textarea" v-model="flightRank" rows="4" maxlength="255">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="周期段">
              <el-checkbox-group v-model="dayOfWeek">
                <el-row :gutter="10">
                  <el-col :span="2" v-for="item in dayOfWeekList" :key="item">
                    <el-checkbox :label="item" :name="item"></el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  findSourceFlightRulesApi,
  sourceFlightRulesSaveApi,
  delOrEnableORDisableApi,
  findSourceFlightAndFlightDateApi,
} from "@/api/sourceFlightRules";
export default {
  name: "FlightRandConfig",
  data() {
    return {
      portNameList: [],
      // data 中设定
      pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.form.endDate;
          if (endDateVal) {
            return (
              time.getTime() > new Date(endDateVal).getTime() ||
              time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000
            );
          } else {
            return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.form.startDate;
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime();
          } else {
            return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
          }
        },
      },
      //周期段
      dayOfWeekList: ["D1", "D2", "D3", "D4", "D5", "D6", "D7"],
      // 遮罩层
      loading: false,
      // 遮罩层
      loadingFlightDate: false,
      // 弹出层标题
      title: "",
      // 总条数
      total: 0,
      //table高度
      tableHeight: null,
      // 原航班规则数据
      sourceFlightRulesList: [],
      //目的航班数据
      sourceFlightAndFlightDate: [],
      statusList: [
        {
          id: 1,
          name: "有效",
        },
        {
          id: 3,
          name: "停用",
        },
      ],
      // 新增修改查看规则弹出层
      open: false,
      // 是否显示查看目的航班弹出层
      openFlightDate: false,
      // 查询参数
      queryParams: {
        portName: undefined,
        start: 0, //当前条数【代表第几条数据 +1开始】
        pageNum: 1,
        limit: 20, //一页显示多少条数据
        sourceFlightNo: undefined, //原航班号
        status: undefined, //状态
        flightDate: undefined, //日期
      },
      dayOfWeek: [],
      // 表单参数
      form: {
        flightRank: null,
        dayOfWeek: [],
      },
      // 表单校验
      rules: {
        sourceFlightNo: [
          {
            required: true,
            message: "ACCS原航班号不能为空",
            trigger: "blur",
          },
        ],
        flightRank: [
          {
            required: true,
            message: "配载航班不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.queryParams.portName = this.$store.state.user.activePortName;
    this.portNameList = this.$store.state.user.portNames;
    if (this.$store.state.tagsView.cachedViews.length == 0) {
      this.findSourceFlightRules();
    }
    // this.$nextTick(()=>{
    //   let height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 200;
    //   if(height < 300){
    //      this.tableHeight = 300;
    //    }else{
    //      this.tableHeight = height;
    //    }
    // })
  },
  mounted() {
     this.tableHeight = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 200
  },
  activated() {
    this.findSourceFlightRules();
  },
  deactivated() {
    this.sourceFlightRulesList = []
  },
  watch: {
    open(val, oldVal) {
      if (val) {
        this.queryParams.portName = this.$store.state.user.activePortName;
        this.form.portName = this.$store.state.user.activePortName;
      }
    }
  },
  methods: {
    //跳转到查看，修改页面
    handleClick({ actualFlight, flightDate, route }) {
      this.openFlightDate = false;
      this.$router.push({
        path: "/routeInfo",
        query: {
          flightDate: flightDate,
          purposeOfFlightNo: actualFlight,
          flightRouteListStr: route,
          status: "",
          pageName: "flightRandConfig",
        },
      });
    },
    /** 查询原航班顺位规则*/
    findSourceFlightRules() {
      this.loading = true;
      if (this.queryParams.pageNum > 1) {
        this.queryParams.start =
          (this.queryParams.pageNum - 1) * this.queryParams.limit;
      } else {
        this.queryParams.start = 0;
      }
      findSourceFlightRulesApi(this.queryParams).then((response) => {
        this.loading = false;
        if (response.code == 200) {
          this.sourceFlightRulesList = response.data.list;
          this.total = response.data.totalCount;
        } else {
          this.msgError(response.msg);
        }
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {};
      this.open = true;
      this.title = "添加原航班顺位规则";
      this.form.id = -1;
      this.dayOfWeek = [];
      this.form.portName = this.$store.state.user.activePortName;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = {};
      this.dayOfWeek = [];
      this.open = true;
      this.title = "修改原航班顺位规则";
      this.form = JSON.parse(JSON.stringify(row));
      this.dayOfWeek = this.form.dayOfWeek
        ? this.form.dayOfWeek.split(";")
        : [];
      //this.form.dayOfWeek = this.form.dayOfWeek ? this.form.dayOfWeek.split(";") : [];
    },
    /** 删除 启用 停用按钮操作 */
    handleDeleteorPlayorpause(row, status, statusText) {
      //删除前需要停用
      if (status === 0 && row.status != "3") {
        this.msgWarning('请停用后删除')
        return;
      }

      this.$confirm("是否确认" + statusText + "此数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let disable = {
            id: row.id,
            status: status,
          };

          return delOrEnableORDisableApi(disable);
        })
        .then((response) => {
          if (response.code == 200) {
            this.findSourceFlightRules();
            this.msgSuccess(statusText + "成功");
          } else {
            this.msgError(response.msg);
          }
        })
        .catch(() => { });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.dayOfWeek = this.dayOfWeek.sort();
          let formdata = JSON.parse(JSON.stringify(this.form));
          formdata.sourceFlightNo = formdata.sourceFlightNo.trim().toUpperCase();
          formdata.flightRank = formdata.flightRank.trim().toUpperCase();
          if (formdata.startDate === undefined || formdata.startDate == null) {
            formdata.startDate = "";
          }
          if (formdata.endDate === undefined || formdata.endDate == null) {
            formdata.endDate = "";
          }
          //处理数据
          sourceFlightRulesSaveApi(formdata).then((response) => {
            if (response.code === 200) {
              this.msgSuccess("保存成功");
              this.open = false;
              this.findSourceFlightRules();
            } else {
              this.msgError(response.msg);
            }
          });
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        dayOfWeek: [],
      };
      this.resetForm("form");
    },
    /** 查询目的航班*/
    findSourceFlightAndFlightDate() {
      //校验原航班号非空
      if (
        this.queryParams.sourceFlightNo === null ||
        this.queryParams.sourceFlightNo === undefined ||
        this.queryParams.sourceFlightNo.trim() === ""
      ) {
        this.$message.warning("ACCS原航班号为空");
        return;
      }
      //校验原日期非空
      if (
        this.queryParams.flightDate === null ||
        this.queryParams.flightDate === undefined
      ) {
        this.$message.warning("日期为空");
        return;
      }
      this.loadingFlightDate = true;
      this.sourceFlightAndFlightDate = [];
      findSourceFlightAndFlightDateApi(this.queryParams).then((response) => {
        if (response.code === 200) {
          this.sourceFlightAndFlightDate = response.data;
          this.loadingFlightDate = false;
          this.openFlightDate = true;
        } else {
          this.msgWarning('未查询到相关数据!');
        }
      });
    },
    // 目的航班弹出框返回
    cancelFlightDate() {
      this.openFlightDate = false;
      this.findSourceFlightRules();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.findSourceFlightRules();
      this.$refs.form.clearValidate();
      //this.reset();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.sourceFlightNo = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.start = 0;
      this.findSourceFlightRules();
    },
    //翻页
    currentChange(val) {
      this.queryParams.start = val.start;
      this.queryParams.pageNum = val.page;
      this.findSourceFlightRules();
    },
  },
  computed: {
    sourceFlightNo: {
      get: function () {
        return this.queryParams.sourceFlightNo;
      },
      set: function (val) {
        this.queryParams.sourceFlightNo = this.upCase(val);
      },
    },
    flightRank: {
      get: function () {
        return this.form.flightRank;
      },
      set: function (val) {
        const reg = /^([a-zA-Z0-9\+\-]{0,20}(\;[a-zA-Z0-9\+\-]{0,20})*)$/
        if (reg.test(val)) {
          this.$set(this.form, 'flightRank', val)
        }
      }
    },
  },
};
</script>
<style></style>