<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="URSA">
                        <el-input type="textarea" v-model="formData.ursa" placeholder="URSA之间用分号分隔，例：F2;F3;P_" rows="2">
                        </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"
            layout="total,prev, pager, next, jumper, ->">
        </Tables>
    </div>
</template>
  
<script>
import {
    downLoadTemplate,
    importUrsaDestination,
    searchUrsaDestination
} from "@/api/preMdeConfig";
import settings from "@/settings"

export default {
    name: "UrsaToArea",
    data() {
        return {
            formData: {
                ursa: null,
                area: null,
                page: 1,
            },
            tableData: [],
            errorData: [],
            tableHeaders: this.tableHeaders['ursaToArea'],
            tableHeight: null,
            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() {
    },
    mounted() {
        this.tableHeight = window.innerHeight - this.$refs.selectForm.$el.offsetHeight - 170
        this.selection(1)
    },
    activated() {
    },
    methods: {
        selection(val) {
            this.tableData = []
            this.tableLoading = true
            if (val === 1) {
                this.formData.page = 1
            }
            let obj = {
                area: this.formData.area,
                page: this.formData.page,
                size: 20
            }
            if (this.formData.ursa && this.formData.ursa != null && this.formData.ursa != '') {
                obj.ursa = this.formData.ursa.split(';')
            } else {
                obj.ursa = null
            }
            if (obj.area == '') {
                obj.area = null
            }
            searchUrsaDestination(obj).then(res => {
                this.tableLoading = false
                if (res.code === 200) {
                    this.tableData = res.data.list
                    this.total = res.data.total
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                this.tableLoading = false
                console.log(err)
            })
        },
        downloadTempleate() {
            let downloadType = "ursaDestination";
            let fileName = "URSA目的地模板.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;
            importUrsaDestination(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;
                        this.$router.push({ name: 'UpDateResult', params: { data: this.errorData, from: 'FlightInformationImport' } })
                    } else if (res.code === 301) {
                        this.$confirm('登录状态已过期，需重新登录', '系统提示', {
                            closeOnClickModal: false,
                            showCancelButton: false,
                            confirmButtonText: '重新登录',
                            type: 'warning'
                        }).then(
                            this.$store.dispatch('LogOut').then(() => {
                                window.location.href = settings.loginURL;//wsso系统跳转
                            })
                        )
                    } 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>