<template>
    <div>
        <el-form class="form-header" ref="goodsStationForm" :model="selectionData" label-position="right"
            label-width="auto" size="small" @submit.native.prevent>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="货站名称">
                        <el-input class="formItem" v-model="selectionData.goodsStation" placeholder="请输入货站名称"
                            maxlength="50" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="品名">
                        <el-input class="formItem" v-model="selectionData.goodsName" 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="['base:goodsBlackStation:add']"
                @click="add">新 增
            </el-button>
            <el-button icon="el-icon-delete" type="danger" size="small" v-hasPermi="['base:goodsBlackStation: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-left:10px"
                @click="downloadTempleate">下载模板
            </el-button>
            <el-button icon="el-icon-download" type="primary" size="small" style="margin-left:10px"
                @click="downloadExcel">
                黑名单导出
            </el-button>
            <el-button type="primary" icon="el-icon-upload2" size="small" @click="uploadExcel"
                v-hasPermi="['base:goodsBlackStation:add']">黑名单导入</el-button>
            <el-button icon="el-icon-document" type="primary" size="small" @click="selectLog()">查询导入日志
            </el-button>
        </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="['base:goodsBlackStation:delete']" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
        </Tables>
        <Dialog :open="open" :openStatus="openStatus" @close="close" />
    </div>
</template>

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

export default {
    name: 'GoodsBlackStation',
    components: {
        Dialog,
    },
    data() {
        return {
            selectionData: {
                goodsStation: '',
                goodsName: '',
                goodsType: 2,
                size: 20,
                page: 1
            },
            tableData: [],
            tableHeader: this.tableHeaders['goodsStation'],
            checkData: [],
            fileList: [],
            errorData: [],
            tableHeight: null,
            totalCount: 0,
            openStatus: '',
            loading: false,
            open: 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
            this.openStatus = 'add'
        },
        //删除
        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)
            })
        },
        //导出
        downloadExcel() {
            this.open = true
            this.openStatus = 'downloadExcel'
        },
        //复选
        tableSelect(val) {
            this.checkData = val.selection
        },
        //全选
        tableSelectAll(val) {
            this.checkData = val
        },
        //分页
        currentChange(val) {
            this.selectionData.page = val.page
            this.selection()
        },
        //上传excel
        uploadExcel() {
            this.openStatus = 'uploadExcel'
            this.open = true
        },
        //下载模板
        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);
        },
        selectLog() {
            this.$router.push({ name: 'GoodsUploadLog', params: { type: 2 } })
        },
        close() {
            this.open = false
            this.openStatus = ''
            this.selection(1)
        },
        resultClose() {
            this.resultOpen = false
            this.selection(1)
        }
    }
}

</script>

<style lang="scss" scoped>

</style>