<template>
    <div style="margin: 20px">
        <el-form ref="selectForm" :model="formData" class="form-header" label-position="right" label-width="auto"
            size="small">
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-form-item label="航班号">
                        <el-input type="text" v-model="formData.fltNo" placeholder="请输入航班号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="地区">
                        <el-input type="text" v-model="formData.area" placeholder="请输入地区"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" size="small" icon="el-icon-search" :loading="tableLoading"
                        @click="selection(1)">
                        查询</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="20">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="生效日期" prop="beginDate" :rules="rules">
                                <el-date-picker class="formItem" v-model="formData.beginDate" type="date" placeholder="选择日期"
                                    value-format="yyyy-MM-dd" clearable>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-upload action="/flightInfoImport/importFlight" name="file" :http-request="uploadExcel"
                                :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList"
                                accept=".xlsx" class="upload-demo" v-hasPermi="['base:flightImport:importFlight']"
                                :disabled="formData.beginDate == null">
                                <el-button type="primary" icon="el-icon-upload2" size="small" @click="upload">导入Excel
                                </el-button>
                            </el-upload>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-form>
        <div style="width:100%;display: flex;margin-bottom:10px">
            <!-- <el-button type="primary" size="small" icon="el-icon-search" :loading="tableLoading" @click="selection(1)">
                查询</el-button> -->
            <el-button type="primary" icon="el-icon-download" size="small" @click="downloadTempleate"
                v-hasPermi="['base:flightImport:exportExcel']">
                下载模板
            </el-button>
        </div>
        <Tables ref="flightToArea" ductName="flightToArea" :selection="false" :selectFixed="false" :order='true'
            :height="tableHeight" :data="tableData" :headerData="tableHeaders" :page="formData.page" :pageSizes="[20]"
            :totalCount="total" :loading="tableLoading" @currentChange="currentChange">">
        </Tables>
    </div>
</template>

<script>
import {
    downLoadTemplate,
    importFlightDestination,
    searchFlightDestination
} from "@/api/preMdeConfig";
import settings from "@/settings"

export default {
    name: "FlightToArea",
    data() {
        return {
            formData: {
                fltNo: null,
                area: null,
                beginDate: null,
                page: 1,
            },
            tableData: [],
            errorData: [],
            tableHeaders: this.tableHeaders['flightToArea'],
            tableHeight: 300,
            total: 0,
            flightType: [],
            form: {
                type: "",
                region: "",
            },
            rules: {
                validator: (rule, value, callback) => {
                    if (this.formData.beginDate == null) {
                        callback(new Error('上传前请选择生效时间'))
                    }
                },
                trigger: 'change'
            },
            fileList: [],
            tableLoading: false,
        };
    },
    created() {
      this.$nextTick(()=>{
          let height = window.innerHeight - this.$refs.selectForm.$el.offsetHeight - 170;
          if(height < 300){
            this.tableHeight = 300;
          }else{
            this.tableHeight = height;
          }
      })
    },
    mounted() {
        this.selection(1)
    },
    activated() {
    },
    methods: {
        selection(val) {
            this.tableData = []
            this.tableLoading = true
            if (val === 1) {
                this.formData.page = 1
            }
            let obj = {
                fltNo: this.formData.fltNo,
                area: this.formData.area,
                page: this.formData.page,
                size: 20
            }
            if (obj.area == '') {
                obj.area = null
            }
            searchFlightDestination(obj).then(res => {
                this.tableLoading = false
                if (res.code === 200) {
                    this.tableData = res.data.list
                    this.total = res.data.total
                }
            }).catch(err => {
                this.tableLoading = false
                console.log(err)
            })
        },
        downloadTempleate() {
            let downloadType = "flightDestination";
            let fileName = "航班目的地模板.xlsx";
            downLoadTemplate(downloadType).then((res) => {
                if (res) {
                    const blob = new Blob([res]);
                    const link = document.createElement("a"); //创建a标签
                    link.download = fileName; //a标签添加属性
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob);
                    document.body.appendChild(link);
                    link.click(); //执行下载
                    URL.revokeObjectURL(link.href); //释放url
                    document.body.removeChild(link); //释放标签
                } else {
                    this.$message.error("下载失败");
                }
            });
        },
        uploadExcel(option) {
            //上传excel
            const file = option.file;
            importFlightDestination(file, this.formData.beginDate).then((res) => {
                if (res.code != 200) {
                    if (res.code == 603) {
                        this.$alert(res.msg, "提示", {
                            confirmButtonText: "确定",
                            type: "warning",
                        });
                    } else if (res.code === 201) {
                        this.msgWarning(res.msg);
                        this.errorData = res.data.data;
                        this.$router.push({ name: 'UpDateResult', query: { data: this.errorData, from: 'FlightToArea' } })
                    } else {
                        this.msgWarning(res.msg);
                    }
                } else {
                    this.msgSuccess("导入成功");
                    this.selection(1)
                }
            });
        },
        handleRemove(file, fileList) {
            //清掉上传的文件
            this.fileList = [];
            this.selection()
        },
        handleExceed(files) {
            //重复上传文件
            let file = {};
            file.file = files[0];
            file.name = files[0].name;
            this.fileList = [];
            this.fileList.push(file);
            this.uploadExcel(file);
        },
        currentChange(val) {
            this.formData.page = val.page
            this.selection()
        },
        upload() {
            this.$refs.selectForm.validateField('beginDate')
        }
    },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.upload-demo {
    display: flex;
    margin-left: 10px;
    float: none !important;
}

.el-upload-list {
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
}
</style>