<template>
    <div>
        <el-form class="form-header" ref="dictForm" label-width="auto" label-position="left" style="margin-bottom:10px"
            @submit.native.prevent size="small">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="货站名称">
                        <el-input v-model="selectionData.goodsStation" placeholder="请输入货站名称" maxlength="50" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="航班">
                        <el-input v-model="selectionData.fltNo" placeholder="请输入货站名称" maxlength="20" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="display:flex;padding:10px 20px">
            <el-button icon="el-icon-search" :loading="loading" type="primary" size="small" @click="selection(1)">查 询
            </el-button>
            <el-button icon="el-icon-plus" type="primary" size="small" v-hasPermi="['base:goodsStationFlight:add']"
                @click="add">新 增
            </el-button>
            <el-button icon="el-icon-delete" type="danger" size="small" style="margin:0 10px"
                :disabled="checkData.length == 0" v-hasPermi="['base:goodsStationFlight:delete']" @click="batchDel">
                删 除
            </el-button>
        </div>
        <Tables ref="goodsStationFlight" ductName="goodsStationFlight" :data="tableData" :headerData="tableHeader"
            :selection="true" :order="true" :selectFixed="false" :totalCount="totalCount" :loading="loading"
            :limitSize="selectionData.size" :page="selectionData.page" layout="total,prev, pager, next, jumper, ->"
            :pageSizes="[100]" :height="tableHeight" @tableSelect="tableSelect" @tableSelectAll="tableSelectAll"
            @currentChange="currentChange">
            <template slot="optionColumn">
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-delete" style="color:#ff4949"
                            v-hasPermi="['base:goodsStationFlight:delete']" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
        </Tables>
        <Dialog :open="open" @close="close" />
    </div>
</template>

<script>
import { searchStationFlight, batchDeleteGoods } from '@/api/goodsStationFlight'
import Dialog from './dialog.vue'

export default {
    name: 'GoodsStationFlight',
    components: {
        Dialog
    },
    data() {
        return {
            selectionData: {
                size: 20,
                page: 1
            },
            tableData: [],
            tableHeader: this.tableHeaders['goodsStationFlight'],
            checkData: [],
            tableHeight: null,
            totalCount: 0,
            loading: false,
            open: false,
        }
    },
    created() {
    },
    mounted() {
        this.tableHeight = window.innerHeight - this.$refs.goodsStationFlight.$el.offsetHeight - 200
        this.selection(1)
    },
    watch: {
        $route(to, from) {
            if (to.name == 'GoodsStationFlight') {
                this.selection()
            }
        }
    },
    methods: {
        //查询
        selection(val) {
            this.tableData = []
            this.checkData = []
            this.loading = true
            if (val == 1) {
                this.selectionData.page = 1
            }
            searchStationFlight(this.selectionData).then(res => {
                this.loading = false
                if (res.code === 200) {
                    this.tableData = res.data.list
                    this.totalCount = res.data.total
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                his.loading = false
                console.log(err)
            })
        },
        add() {
            this.open = true
        },
        //删除
        del(val) {
            this.$confirm("是否要删除这条记录！", "注意！", {
                confirmButtonText: "确定",
                cancelButtonText: '取消',
                type: "warning",
            }).then(() => {
                this.deleteGoods([val.id])
            }).catch(() => { })
        },
        //批量删除
        batchDel() {
            let arr = []
            this.checkData.forEach(item => {
                arr.push(item.id)
            })
            this.$confirm("是否要删除这些记录！", "注意！", {
                confirmButtonText: "确定",
                cancelButtonText: '取消',
                type: "warning",
            }).then(() => {
                this.deleteGoods(arr)
            }).catch(() => {

            })
        },
        //删除请求
        deleteGoods(val) {
            batchDeleteGoods(val).then(res => {
                if (res.code === 200) {
                    this.msgSuccess('操作成功！')
                    this.selection(1)
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //复选
        tableSelect(val) {
            this.checkData = val.selection
        },
        //全选
        tableSelectAll(val) {
            this.checkData = val
        },
        //分页
        currentChange(val) {
            this.selectionData.page = val.page
            this.selection()
        },
        close() {
            this.open = false
            this.selection(1)
        }
    }
}

</script>

<style lang="scss" scoped>

</style>