<template>
    <div>
        <el-form ref="preMdeSelectForm" class="form-header" label-position="right" label-width="auto" size="small"
            :model="formData">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="区域">
                        <el-select class="formItem" v-model="formData.regionArray" filterable multiple clearable
                            placeholder="不限">
                            <el-option v-for="item in selectData.region" :label="item" :value="item" :key="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="地区">
                        <el-select class="formItem" v-model="formData.areaArray" filterable multiple clearable
                            placeholder="不限">
                            <el-option v-for="item in selectData.area" :label="item" :value="item" :key="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="申报类别">
                        <el-select class="formItem" v-model="formData.typeName" filterable clearable placeholder="不限">
                            <el-option v-for="item in selectData.declarationCategory" :label="item.chineseName"
                                :value="item.chineseName" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="服务类型">
                        <el-select class="formItem" v-model="formData.serviceTypeArray" filterable clearable
                            placeholder="不限">
                            <el-option v-for="item in selectData.serviceType" :label="item.chineseName"
                                :value="item.chineseName" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="运单号">
                        <el-input type="textarea" v-model="formData.waybillNo" class="formItem"
                            placeholder="请输入运单号（回车间隔）" :rows="4" :maxlength="12000" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="URSA">
                        <el-input type="textarea" v-model="formData.ursa" class="formItem" placeholder="S_;P_;E2"
                            :rows="4" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="站点">
                        <el-input type="textarea" v-model="formData.siteName" class="formItem" placeholder="PVG;PEK"
                            :rows="4" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="ACCS原航班日期">
                        <el-date-picker class="formItem" type="daterange" v-model="accsDate" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueFormat" clearable>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="ACCS原航班号">
                        <el-input type="text" class="formItem" v-model="formData.flightNo" placeholder="请输入航班号"
                            clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="ACCS航线">
                        <el-input type="text" class="formItem" v-model="formData.flightRoute" placeholder="请输入航线"
                            clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="ml20 mb20">
            <el-button type="primary" icon="el-icon-search" size="small" :loading="tableLoading" @click="select(0)">查询
            </el-button>
            <el-button icon="el-icon-download" type="primary" size="small" style="margin-left:10px"
                :loading="downloading" @click="downloadExcel" v-hasPermi="['base:preMde:export']">
                导出全部查询结果
            </el-button>
            <span class="ml20" style="color: #ffba00">全部导出上限80000条数据</span>
        </div>
        <Tables ref="preMdeSelectTables" ductName="preMdeSelect" :data="tableData" :headerData="tableHeader"
            :selection="false" :order="true" :totalCount="totalCount" :loading="tableLoading" :limitSize="formData.size"
            :page="formData.page" :pageSizes="[100]" :height="tableHeight" @currentChange="currentChange">
        </Tables>
    </div>
</template>

<script>
import {
    findDmPreMdeData,
    findDmPreMdeCondition
} from "@/api/preMdeConfig";
import { downLoadXlsx } from "@/utils/zipdownload";

export default {
    name: 'PreMdeSelect',
    data() {
        return {
            formData: {
                regionArray: [],
                areaArray: [],
                serviceTypeArray: null,
                page: 1,
                size: 100,
            },
            selectData: {
                serviceType: [],
                declarationCategory: [],
                region: [],
                area: []
            },
            tableData: [],
            tableHeader: this.tableHeaders['preMdeSelect'],
            accsDate: [],
            valueFormat: "yyyy-MM-dd",
            tableHeight: null,
            tableLoading: false,
            downloading: false,
            totalCount: 0,
        }
    },
    created() {
        this.selectOptionData()
    },
    mounted() {
        this.tableHeight = window.innerHeight - this.$refs.preMdeSelectForm.$el.offsetHeight - 150
        this.select(0)
    },
    watch: {
        $route(to, from) {
            if (to.name == 'PreMdeSelect') {
                this.selection()
            }
        }
    },
    methods: {
        //查询条件
        selectOptionData() {
            findDmPreMdeCondition().then(res => {
                if (res.code == 200) {
                    this.selectData = res.data
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //查询
        select(val) {
            this.tableLoading = true
            let obj = JSON.parse(JSON.stringify(this.datainfo(this.formData)))
            if (this.accsDate != null && this.accsDate.length > 0) {
                obj.fltDateStart = this.accsDate[0]
                obj.fltDateEnd = this.accsDate[1]
            }
            findDmPreMdeData(obj).then(res => {
                this.tableLoading = false
                if (res.code == 200) {
                    this.tableData = res.data.list
                    this.totalCount = res.data.total
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                this.tableLoading = false
                console.log(err)
            })
        },
        //导出
        downloadExcel() {
            this.downloading = true
            let data = this.datainfo(this.formData)
            if (this.accsDate != null && this.accsDate.length > 0) {
                data.fltDateStart = this.accsDate[0]
                data.fltDateEnd = this.accsDate[1]
            }
            downLoadXlsx("/dmPreMde/excel", data, "Pre-MDE查询表")
                .then(() => {
                    this.downloading = false
                })
                .catch(() => {
                    this.downloading = false
                });
        },
        //数据处理
        datainfo(val) {
            if (val.ursa && val.ursa != null && val.ursa != '') {
                val.ursa = val.ursa.toUpperCase().replace(/；/g, ';')
            }
            if (val.siteName && val.siteName != null && val.siteName != '') {
                val.siteName = val.siteName.toUpperCase().replace(/；/g, ';')
            }
            if (val.flightNo && val.flightNo != null && val.flightNo != '') {
                val.flightNo = val.flightNo.toUpperCase()
            }
            if (val.flightRoute && val.flightRoute != null && val.flightRoute != '') {
                val.flightRoute = val.flightRoute.toUpperCase()
            }
            if (val.regionArray != null && val.regionArray.length == 0) {
                val.regionArray = null
            }
            if (val.areaArray != null && val.areaArray.length == 0) {
                val.areaArray = null
            }
            if (val.serviceTypeArray != null && val.serviceTypeArray.length == 0) {
                val.serviceTypeArray = null
            }
            return val
        },
        //翻页
        currentChange(val) {
            this.formData.page = val.page
            this.select()
        }
    }
}
</script>

<style>

</style>