<template>
    <div>
        <el-form class="form-header" ref="selectForm" 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-row>
        </el-form>
        <div style="display:flex;padding:10px 20px">
            <el-button icon="el-icon-search" type="primary" :loading="loading" size="small" @click="selection(1)">查 询
            </el-button>
            <el-button icon="el-icon-plus" type="primary" size="small" v-hasPermi="['system:goodsStation:add']"
                @click="add">新 增
            </el-button>
            <el-button icon="el-icon-delete" type="danger" size="small" v-hasPermi="['system:goodsStation:delete']"
                style="margin-left:10px" :disabled="checkData.length==0" @click="batchDel">
                删 除
            </el-button>
            <el-button type="primary" icon="el-icon-download" size="small" style="margin-right:10px"
                @click="downloadTempleate">下载模板
            </el-button>
            <el-upload action="/caPreReviewImport/importFlight" name="file" :http-request="uploadExcel"
                :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList" accept=".xlsx"
                class="upload-demo">
                <el-button type="primary" icon="el-icon-upload2" size="small">导入Excel</el-button>
            </el-upload>
        </div>
        <Tables ref="goodsStation" ductName="goodsStation" :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="['system:goodsStation:delete']" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
        </Tables>
        <Dialog :open="open" @close="close" />
        <UpDateResult :dialogVisible="resultOpen" :resultData="errorData" @close="resultClose" />
    </div>
</template>

<script>
import { downLoadTemplate } from "@/api/flightInfoImport";
import { importGoods, batchDeleteGoods, searchGoods } from "@/api/goodsStation"
import Dialog from './dialog.vue'
import UpDateResult from './upDateResult.vue'

export default {
    name: 'GoodsStation',
    components: {
        Dialog,
        UpDateResult
    },
    data() {
        return {
            selectionData: {
                goodsStation: '',
                size: 20,
                page: 1
            },
            tableData: [],
            tableHeader: this.tableHeaders['goodsStation'],
            checkData: [],
            fileList: [],
            errorData: [],
            tableHeight: null,
            totalCount: 0,
            loading: false,
            open: false,
            resultOpen: false,
        }
    },
    created() {

    },
    mounted() {
        this.tableHeight = window.innerHeight - this.$refs.goodsStation.$el.offsetHeight - 200
        this.selection(1)
    },
    watch: {
        $route(to, from) {
            if (to.name == 'GoodsStation') {
                this.selection()
            }
        }
    },
    methods: {
        //查询
        selection(val) {
            this.tableData = []
            this.checkData = []
            this.loading = true
            if (val === 1) {
                this.selectionData.page = 1
            }
            searchGoods(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 => {
                this.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()
        },
        //上传excel
        uploadExcel(option) {
            const file = option.file;
            this.loading = true;
            importGoods(file, '').then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    if (res.code == 603) {
                        this.$alert(res.msg, "提示", {
                            confirmButtonText: "确定",
                            type: "warning",
                        });
                    } else {
                        this.$message.warning(res.msg);
                        this.errorData = res.data;
                        if (this.errorData.length > 0) {
                            this.resultOpen = true
                        }
                    }
                } else {
                    this.$message.success(res.msg);
                    this.errorData = res.data;
                    this.selection(1)
                }
            });
        },
        //下载模板
        downloadTempleate() {
            downLoadTemplate('goodsStation').then((res) => {
                if (res) {
                    const blob = new Blob([res]);
                    const link = document.createElement("a"); //创建a标签
                    link.download = '货物品名模板.xlsx'; //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("下载失败");
                }
            })
        },
        handleRemove(file, fileList) {
            //清掉上传的文件
            this.errorData = [];
            this.fileList = [];
        },
        handleExceed(files) {
            //重复上传文件
            let file = {};
            file.file = files[0];
            file.name = files[0].name;
            this.fileList = [];
            this.fileList.push(file);
            this.uploadExcel(file);
        },
        close() {
            this.open = false
            this.selection(1)
        },
        resultClose() {
            this.resultOpen = false
            this.selection(1)
        }
    }
}

</script>

<style lang="scss" scoped>
.upload-demo {
    display: flex;

    .el-upload-list__item:first-child {
        margin-top: 5px !important;
    }

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