<template>
  <div>
    <el-form ref="flightAllocForm" :model="queryParams" class="form-header" size="medium" 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="3">
          <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-form-item label="日期查询">
          <el-switch v-model="queryParams.querySpecifyData" active-value="1" inactive-value="2" active-color="#13ce66"
            inactive-color="#909399" @change="switchChange">
          </el-switch>
        </el-form-item>
        <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="
            $router.push({
              name: 'FlightAllocConfigInfo',
              params: { handle: 'add', fltNo: 'new', fltDate: ' ',status:null },
            })
          ">添加</el-button>
      </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.purposeOfFlightNo, 'detail', scope.row.ruleDate, scope.row.status)">查看
            </el-button>
            <el-button type="text" size="mini" icon="el-icon-edit" v-hasPermi="['allocation:alloc:update']"
              @click="handleClick(scope.row.purposeOfFlightNo, 'update', scope.row.ruleDate, scope.row.status)">修改
            </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();
    }
  },
  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)
      })
    },
    //跳转到查看，修改页面
    handleClick(fltNo, handle, fltDate, status) {
      let obj = {
        handle: handle,
        fltNo: fltNo,
        fltDate: fltDate != null ? fltDate : '',
        route: null,
        routeStatus: 'FlightAllocConfig',
        status: status
      }
      this.$router.push({
        name: "FlightAllocConfigInfo",
        params: obj,
      });
    },
    //航班优先级修改
    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>