<template>
  <div ref="formHeaderRef" class="form-header container">
    <el-row>
      <el-col>
        <yl-form
          ref="ruleForm"
          :formConfig="formConfig"
          :queryForm="queryForm"
          :inline="false"
          formWidth="auto"
          @blur="blurEvent"
        />
      </el-col>
    </el-row>
    <yl-table
      ref="ylTable"
      :attrs="tableAttr"
      :loadingTable="tableAttr.loadingTable"
      :columns="columns"
      :tableData="tableData"
      :pageConfig="pageConfig"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @search="searchBtn"
      @add="addBtn"
    >
    </yl-table>
  </div>
</template>
<script>
import YlForm from "@/components/YlForm";
import YlTable from "@/components/YlTable";
import { formConfig } from "./formConfig";
import { tableAttr, columnHeader } from "./tableConfig";
import { restTableHeight, sortList } from "@/utils";
import store from '@/store'
import {
  findAllEtesRules, // ET86查询
  deleteEtesRuleById, // 删除
} from "@/api/et86";
export default {
  components: {
    YlForm,
    YlTable,
  },
  data() {
    return {
      formConfig: formConfig, // 表单配置项
      queryForm: {
        // 表单参数
        status: "有效",
      },
      pageConfig: {
        // 分页配置项
        isPagination: true,
        total: 0,
        pageData: {
          page: 1,
          size: 10,
        },
      },
      tableAttr: tableAttr, // table配置项
      columns: columnHeader(this.indexAdd, this.viewRow, this.editRow, this.deleteRow), // 表头
      tableData: [], // 表格数据
    };
  },
  created() {
    // ET86查询
    this.$nextTick(() => {
      this.searchBtn();
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.tableAttr.maxHeight =
        window.innerHeight - restTableHeight(this.$refs);
    });
    console.log(store.getters.appHeaderBlockClientHeight)
  },
  methods: {
    // ET86查询
    queryFindAllEtesRules() {
      const { page, size } = this.pageConfig.pageData;
      let params = {
        originOfFlightNo: this.queryForm.originOfFlightNo,
        updateTimeStart: this.queryForm.startTime
          ? this.queryForm.startTime
          : "",
        updateTimeEnd: this.queryForm.endTime ? this.queryForm.endTime : "",
        limitStart: (page - 1) * size,
        limitSize: size,
        status: this.queryForm.status,
      };
      if (this.queryForm.status == "有效") {
        params.status = "1";
      }
      this.tableAttr.loadingTable = true;
      findAllEtesRules(params)
        .then((res) => {
          this.tableAttr.loadingTable = false;
          const { code, data } = res;
          if (code == 200) {
            const valid = data.list.filter((item) => item.status == "1"); // 有效
            const invalid = data.list.filter((item) => item.status == "0"); // 无效
            this.tableData = valid.concat(invalid);
            this.pageConfig.total = data.total;
          }
        })
        .catch(() => {});
    },
    // 失焦事件
    blurEvent({ originOfFlightNo }) {
      this.queryForm.originOfFlightNo = this.upCase(originOfFlightNo);
    },
    // 搜索
    searchBtn() {
      this.pageConfig.pageData.page = 1;
      this.pageConfig.pageData.size = 10;
      this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
        this.queryFindAllEtesRules();
      });
    },
    // 翻页序号递增
    indexAdd(index){
      const page = this.pageConfig.pageData.page // 当前页码
      const pagesize = this.pageConfig.pageData.size // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    //条数变化
    handleSizeChange(e) {
      this.pageConfig.pageData.size = e;
      this.pageConfig.pageData.page = 1;
      this.queryFindAllEtesRules();
    },
    //页码变化
    handleCurrentChange(e) {
      this.pageConfig.pageData.page = e;
      this.queryFindAllEtesRules();
    },
    // 添加
    addBtn(item) {
      this.$router.push({
        path: "/edit",
        query: {
          name: "add",
        },
      });
    },
    // 重置表单
    restForm() {
      this.$refs.ruleForm.resetFields("ruleForm");
    },
    // 查看
    viewRow({ row }) {
      this.$router.push({
        path: "/edit",
        query: {
          name: "view",
          id: row.id,
          status: row.status,
        },
      });
    },
    // 编辑
    editRow({ row }) {
      this.$router.push({
        path: "/edit",
        query: {
          name: "edit",
          id: row.id,
          status: row.status,
        },
      });
    },
    // 删除
    deleteRow({ row }) {
      this.$confirm("是否确认删除? 删除后该规则设置为无效，不可恢复", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteEtesRuleById({ id: row.id }).then((res) => {
            const { code, msg } = res;
            if (code == 200) {
              this.searchBtn();
              this.msgSuccess("删除成功!");
            } else {
              this.msgError(msg || "删除失败");
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped></style>