<template>
  <div>
    <el-form
      ref="flightAllocForm"
      :model="queryParams"
      class="form-header"
      size="small"
      label-position="right"
      label-width="auto"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="航班号">
            <el-input
              class="formItem"
              v-model.trim="purposeOfFlightNo"
              placeholder="航班号"
              @keyup.enter.native="getList"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="航班日期">
            <el-date-picker
              class="formItem"
              v-model="queryParams.flightDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              clearable
              :disabled="queryParams.querySpecifyData == '2'"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="状态">
            <el-select
              class="formItem"
              v-model="queryParams.status"
              placeholder="状态"
            >
              <el-option label="有效" value="1"></el-option>
              <el-option label="停用" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-button
          type="primary"
          icon="el-icon-search"
          :loading="loading"
          @click="getList"
          size="mini"
          >查询</el-button
        >
        <el-button
          class="mb20"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['allocation:alloc:add']"
          @click="addFlightRouteConfig"
          >添加</el-button
        >
        <el-switch
          style="margin-left: 10px"
          v-model="queryParams.querySpecifyData"
          inactive-text="日期查询"
          active-value="1"
          inactive-value="2"
          active-color="#13ce66"
          inactive-color="#909399"
          @change="switchChange"
        ></el-switch>
      </div>
    </el-form>
    <Tables
      ref="newTables"
      ductName="FlightAlloc"
      :data="flyList"
      :headerData="tableHeaders['flightAlloc']"
      :order="true"
      :totalCount="total"
      :loading="loading"
      :limitSize="queryParams.limit"
      :limitStart="queryParams.start"
      :page="curPage"
      :pageSizes="[20]"
      :height="tableHeight"
      @currentChange="currentChange"
    >
      <template v-slot:ruleDate="scope">
        <el-link
          v-if="scope.row.ruleDate"
          type="primary"
          @click="toRouteOrder(scope.row)"
        >
          {{ scope.row.ruleDate }}<i class="el-icon-link"></i>
        </el-link>
      </template>
      <template slot="optionColumn">
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-view"
              @click="handleClick(scope.row, 'view')"
              >查看
            </el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-edit"
              v-hasPermi="['allocation:alloc:update']"
              @click="handleClick(scope.row, 'edit')"
              >修改
            </el-button>
            <!-- <el-button type="text" size="mini" icon="el-icon-delete" style="color:#ff4949"
              v-hasPermi="['allocation:alloc:delete']" @click="del(scope.row.id, scope.row.status)">删除</el-button>
            <el-button type="text" size="mini" icon="el-icon-video-pause" v-hasPermi="['allocation:alloc:openClose']"
              @click="changeStatus(scope.row.id, 3)" v-if="scope.row.status == '1'">停用</el-button>
            <el-button type="text" size="mini" icon="el-icon-video-play" v-hasPermi="['allocation:alloc:openClose']"
              @click="changeStatus(scope.row.id, 1)" v-else>启用</el-button> -->
          </template>
        </el-table-column>
      </template>
    </Tables>
    <Dialog :fltData="colData" :open="open" @close="close"></Dialog>
  </div>
</template>

<script>
import { findFlightDimRuleByFlightNo } from "@/api/destinationFlight";
import Dialog from "./dialog.vue";

export default {
  name: "FlightAllocConfig",
  components: {
    Dialog,
  },
  data() {
    return {
      queryParams: {
        purposeOfFlightNo: null,
        flightDate: undefined,
        querySpecifyData: "2",
        status: "1",
        start: 0,
        limit: 20,
      },
      flyList: [],
      colData: {},
      curPage: 1,
      total: 0,
      tableHeight: null,
      open: false,
      loading: false,
    };
  },
  created() {
    if (this.$store.state.tagsView.cachedViews.length == 0) {
      this.getList();
    }
    // this.$nextTick(()=>{
    //   let height = window.innerHeight - this.$refs.flightAllocForm.$el.offsetHeight - 200;
    //   if(height < 300){
    //      this.tableHeight = 300;
    //    }else{
    //      this.tableHeight = height;
    //    }
    // })
  },
  mounted() {
    this.tableHeight =
      window.innerHeight - this.$refs.flightAllocForm.$el.offsetHeight - 200;
  },
  activated() {
    this.getList();
  },
  deactivated() {
    this.flyList = [];
  },
  methods: {
    getList() {
      if (this.curPage > 1) {
        this.queryParams.start = (this.curPage - 1) * this.queryParams.limit;
      } else {
        this.queryParams.start = 0;
      }
      this.loading = true;
      findFlightDimRuleByFlightNo(this.queryParams)
        .then((res) => {
          this.loading = false;
          if (res.code === 200) {
            this.flyList = res.data.list;
            this.total = res.data.totalCount;
          } else {
            this.msgWarning(res.msg);
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    // 添加
    addFlightRouteConfig() {
      this.$router.push({
        path: "/routeInfo",
        query: {
          flightDate: '', // 跳转的时候默认当天日期
          purposeOfFlightNo: '',
          flightRouteListStr: '',
          status: '',
          pageName: "flightAllocConfig",
          dataStatus: "add",
          disable: '',
        },
      });
    },
    //跳转到查看，修改页面
    handleClick({ purposeOfFlightNo, ruleDate, flightRoute, status }, name) {
      this.$router.push({
        path: "/routeInfo",
        query: {
          flightDate: ruleDate,
          purposeOfFlightNo: purposeOfFlightNo,
          flightRouteListStr: flightRoute,
          status: status,
          pageName: "flightAllocConfig",
          dataStatus: name,
          querySpecifyData: this.queryParams.querySpecifyData,
          disable: true,
        },
      });
    },
    //航班优先级修改
    toRouteOrder(val) {
      this.colData = {
        fltNo: val.purposeOfFlightNo,
        fltDate: val.ruleDate,
      };
      this.open = true;
    },
    //开关改变
    switchChange(val) {
      if (val == "2") {
        this.queryParams.flightDate = undefined;
      }
    },
    close() {
      this.open = false;
    },
    //翻页
    currentChange(val) {
      this.curPage = val.page;
      this.queryParams.start = val.start;
      this.getList();
    },
  },
  computed: {
    purposeOfFlightNo: {
      get: function () {
        return this.queryParams.purposeOfFlightNo;
      },
      set: function (val) {
        this.queryParams.purposeOfFlightNo = this.upCase(val);
      },
    },
  },
};
</script>