<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="ACCS原航班">
        <el-input
          type="text"
          v-model="upCase"
          placeholder="请输入ACCS原航班"
          clearable
          class="formItem"
        ></el-input>
        <!-- <el-input v-model="upCase" placeholder="请输入原航班" clearable size="small" /> -->
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择"
          clearable
          size="small"
        >
          <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"
          @click="handleQuery"
          >查询ACCS原航班配置</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="选择日期"
          clearable
        >
        </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"
          >注：ACCS原航班+日期查询该日期的航班实际情况</span
        >
      </el-form-item>
      <br />
      <el-form-item>
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >添加规则</el-button
          >
        </el-col>
        &#12288;
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table 
      v-loading="loading"
      height="550"
      size="small"
      :data="sourceFlightRulesList"
      highlight-current-row
      border
      stripe
    >
      <el-table-column type="index" label="序号" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column
        label="ACCS原航班"
        align="center"
        prop="sourceFlightNo"
      />
      <el-table-column
        label="配载航班排序"
        align="center"
        prop="flightRank"
        width="280"
      />
      <!-- <el-table-column label="优先级" align="center" prop="priority"  /> -->
      <el-table-column
        label="周期"
        align="center"
        prop="dayOfWeek"
        width="180"
      />
      <el-table-column
        label="状态"
        align="center"
        prop="status"
        :formatter="statusFormat"
      />
      <el-table-column
        label="开始时间"
        align="center"
        prop="startDate"
        width="100"
      />
      <el-table-column
        label="结束时间"
        align="center"
        prop="endDate"
        width="100"
      />
      <el-table-column
        label="最后修改人"
        align="center"
        prop="updateUserName"
        width="100"
      />
      <el-table-column
        label="最后修改时间"
        align="center"
        prop="updateTime"
        width="100"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="180"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-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'"
            @click="handleDeleteorPlayorpause(scope.row, 1, '启用')"
            >启用</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-video-pause"
            v-if="scope.row.status != '3'"
            @click="handleDeleteorPlayorpause(scope.row, 3, '停用')"
            >停用</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      layout=" prev, pager, next, jumper, sizes,total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.limit"
      @pagination="findSourceFlightRules"
    />

    <!-- 查看目的航班对话框 -->
    <el-dialog
      title="实际配载航班"
      :visible.sync="openFlightDate"
      width="70%"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <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="ACCS原航班"
          align="center"
          prop="sourceFlightNo"
        />
        <el-table-column
          label="实际配载航班"
          align="center"
          prop="actualFlight"
          width="280"
        />
        <el-table-column label="航班日期" align="center" prop="flightDate" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleClick(scope.row.actualFlight, 'detail')"
              >查看配置维度</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"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="ACCS原航班" prop="sourceFlightNo">
              <el-input
                v-model="form.sourceFlightNo"
                placeholder="请输入ACCS原航班号"
                maxlength="10"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="有效开始时间" prop="startDate">
              <el-date-picker
                clearable
                size="small"
                :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
                size="small"
                :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%"
              >提示:配载航班之间请用分号分隔【符号不区分中英文】,例:CA1053;C7433</span
            ><br />
            <span style="color:#ff4949; margin-left: 10%"
              >提示:如果需要设置配载航班延迟或提前可以直接在目的航斑后加减【+-】天数。如:CA1053+1;CZ433-1</span
            >
          </el-col>
          <el-col :span="24">
            <el-form-item label="配载航班" prop="flightRank">
              <el-input
                type="textarea"
                v-model="form.flightRank"
                :rows="4"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="周期段">
              <el-checkbox-group v-model="dayOfWeek">
                <el-checkbox
                  v-for="item in dayOfWeekList"
                  :key="item"
                  :label="item"
                  :name="item"
                ></el-checkbox>
              </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 {
      // 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,
      // 原航班规则数据
      sourceFlightRulesList: [],
      //目的航班数据
      sourceFlightAndFlightDate: [],
      statusList: [
        {
          id: 1,
          name: "有效",
        },
        {
          id: 3,
          name: "停用",
        },
      ],
      // 新增修改查看规则弹出层
      open: false,
      // 是否显示查看目的航班弹出层
      openFlightDate: false,
      // 查询参数
      queryParams: {
        start: 0, //当前条数【代表第几条数据 +1开始】
        pageNum: 1,
        limit: 20, //一页显示多少条数据
        sourceFlightNo: undefined, //原航班号
        status: undefined, //状态
        flightDate: undefined, //日期
      },
      dayOfWeek: [],
      // 表单参数
      form: {
        dayOfWeek: [],
      },
      // 表单校验
      rules: {
        sourceFlightNo: [
          {
            required: true,
            message: "ACCS原航班号不能为空",
            trigger: "blur",
          },
        ],
        flightRank: [
          {
            required: true,
            message: "配载航班不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.findSourceFlightRules();
  },
  methods: {
    //跳转到查看，修改页面
    handleClick(flightiId, handle) {
      this.openFlightDate = false;
      this.$router.push({
        name: "FlightAllocConfigInfo",
        params: {
          handle: handle,
          id: flightiId,
        },
      });
    },
    /** 查询原航班顺位规则*/
    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) => {
        if (response.code == 200) {
          this.sourceFlightRulesList = response.data.list;
          this.total = response.data.totalCount;
          this.loading = false;
        } else {
          this.msgError(response.msg);
        }
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {};
      this.open = true;
      this.title = "添加ACCS原航班顺位规则";
      this.form.id = -1;
      this.dayOfWeek = [];
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = {};
      this.dayOfWeek = [];
      this.open = true;
      this.title = "修改ACCS原航班顺位规则";
      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.$message({
          message: "请停用后删除",
          type: "warning",
        });
        return;
      }

      this.$confirm("是否确认" + statusText + "此数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let disable = {
          id: row.id,
          status: status,
        };
        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.openFlightDate = true;
      this.loadingFlightDate = true;
      this.sourceFlightAndFlightDate = [];
      findSourceFlightAndFlightDateApi(this.queryParams).then((response) => {
        if (response.code === 200) {
          this.sourceFlightAndFlightDate = response.data;
          this.loadingFlightDate = false;
        } else {
          this.msgError(response.msg);
        }
      });
    },
    // 目的航班弹出框返回
    cancelFlightDate() {
      this.openFlightDate = false;
      this.findSourceFlightRules();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.findSourceFlightRules();
      //this.reset();
    },
    // 状态字典翻译
    statusFormat(row) {
      if (row.status === "1") {
        return "有效";
      } else if (row.status === "0") {
        return "执行中";
      } else if (row.status === "3") {
        return "停用";
      }
      return row.status;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.sourceFlightNo = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.start = 0;
      this.findSourceFlightRules();
    },
  },
  computed: {
    upCase: {
      get: function () {
        return this.queryParams.sourceFlightNo;
      },
      set: function (val) {
        this.queryParams.sourceFlightNo = val.toUpperCase();
      },
    },
  },
};
</script>
<style>
</style>