<template>
  <div class="form-header container">
    <el-row>
      <el-col>
        <yl-form
          ref="ruleForm"
          :formConfig="formConfig"
          :queryForm="queryForm"
          @input="inputEvent"
          @keyup="keyUpEvent"
        />
      </el-col>
    </el-row>
    <yl-table
      :attrs="tableAttr"
      :loadingTable="tableAttr.loadingTable"
      :columns="columns"
      :tableData="tableData"
      :pageConfig="pageConfig"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @search="searchBtn"
      @restForm="restForm"
      @add="addBtn"
      @upload="uploadBtn"
      @download="downloadBtn"
    >
    </yl-table>
  </div>
</template>
<script>
import YlForm from "@/components/YlForm";
import YlTable from "@/components/YlTable";
import { formConfig } from "./formConfig";
import { debounce } from "@/utils";
import { tableAttr, columnHeader, tableData } from "./tableConfig";
import {
  allDictData, // 获取全部字典
  queryRouteByFltNo, // 航线查询
} from "@/api/destinationFlight";
export default {
  components: {
    YlForm,
    YlTable,
  },
  data() {
    return {
      formConfig: formConfig, // 表单配置项
      queryForm: {}, // 表单参数
      pageConfig: {
        // 分页配置项
        isPagination: true,
        total: 13,
        pageData: {
          page: 1,
          size: 10,
        },
      },
      tableAttr: tableAttr, // table配置项
      columns: columnHeader(this.editRow, this.deleteRow, this.viewRow), // 表头
      tableData: tableData, // 表格数据
      selectionList: [], // table复选框筛选集合
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 航线查询
    queryRoute(item) {
      queryRouteByFltNo(item).then((res) => {
        if (res.code == 200) {
          const list = res.data.list;
          let routeList = "";
          if (list.length) {
            list.map((item) => {
              routeList += item.route + ",";
            });
            this.queryForm.fltRoute = routeList.substring(
              0,
              routeList.length - 1
            );
          } else {
            this.queryForm = {
              fltNo: item.fltNo, // 航班号
            };
          }
        }
      });
    },
    // input事件
    inputEvent: debounce(function () {
      this.queryRoute({
        fltNo: this.queryForm.fltNo, // 航班号
      });
    }, 800),
    // 回车事件
    keyUpEvent(item) {
      this.queryRoute(item);
    },
    // table复选框事件
    selectionTable(e) {
      console.log("selectionTable：", e);
      this.selectionList = e;
    },
    //条数变化
    handleSizeChange(e) {
      this.pageConfig.pageData.size = e;
      this.pageConfig.pageData.page = 1;
      console.log("sizeChange：", e);
    },
    //页码变化
    handleCurrentChange(e) {
      this.pageConfig.pageData.page = e;
      console.log("currentChange：", e);
    },
    // 搜索
    searchBtn(row) {
      this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
        console.log(val);
      });
      console.log(this.queryForm);
    },
    // 重置表单
    restForm() {
      this.$refs.ruleForm.resetFields("ruleForm");
    },
    // 添加
    addBtn(item) {
      console.log("add：", item);
      this.$router.push({
        name: "edit",
        params: {
          edit: 12,
        },
      });
    },
    // 上传
    uploadBtn(item) {
      console.log("upload：", item);
    },
    // 导出
    downloadBtn(item) {
      console.log("download：", item);
    },
    // 编辑
    editRow(item) {
      this.$router.push({
        name: "edit",
        params: {
          edit: 12,
        },
      });
      console.log("修改：", item);
    },
    // 删除
    deleteRow(item) {
      this.$confirm("是否允许删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          console.log("删除：", item);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查看
    viewRow({ row }) {
      this.$router.push({
        name: "edit",
        params: {
          edit: 12,
        },
      });
      console.log("查看：", row);
    },
  },
};
</script>
<style lang="scss" scoped></style>