<template>
    <div style="padding:20px 0">
        <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 type="textarea" v-model="selectionData.shipperAccount" placeholder="请输入发件人账号，多个以“;”分割"
                            maxlength="50" rows="4" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="margin-left:20px;margin-bottom:10px">
            <el-button icon="el-icon-search" type="primary" size="small" @click="selection(1)">查 询
            </el-button>
            <el-button icon="el-icon-plus" type="primary" size="small" @click="add">添 加
            </el-button>
        </div>
        <Tables ref="supserAllocation" ductName="supserAllocation" :data="tableData" :headerData="tableHeader"
            :selection="false" :order="true" :selectFixed="false" :pagination="true" :totalCount="totalCount"
            :loading="loading" :limitSize="selectionData.size" :page="selectionData.page"
            layout="total,prev, pager, next, jumper, ->" :pageSizes="[100]" :height="tableHeight"
            @currentChange="currentChange">
            <template slot="optionColumn">
                <el-table-column label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" v-if="scope.row.status != 0" icon="el-icon-edit"
                            @click="update(scope.row,'update')">修改
                        </el-button>
                        <el-button type="text" v-if="scope.row.status === 1" size="mini" icon="el-icon-video-pause"
                            @click="changeStatus(scope.row)">
                            停 用</el-button>
                        <el-button type="text" v-if="scope.row.status === 0" size="mini" icon="el-icon-video-pause"
                            @click="changeStatus(scope.row)">
                            启 用</el-button>
                        <el-button type="text" icon="el-icon-document-copy" size="mini"
                            @click="update(scope.row,'copy')">复 制
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" style="color:#ff4949"
                            @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
        </Tables>
        <Dialog :dialogVisible="dialogVisible" :ruleData="ruleData" :status="dialogStatus" @close="close" />
    </div>
</template>

<script>
import { queryShipperAccountRule, changeStatusById, queryShipperAccountRuleById } from "@/api/supserAllocation"
import Dialog from './dialog.vue';

export default {
    name: 'SuperAllocation',
    components: {
        Dialog
    },
    data() {
        return {
            selectionData: {
                shipperAccount: null,
                page: 1,
                size: 20,
            },
            tableData: [],
            tableHeader: this.tableHeaders['superAllocation'],
            ruleData: {
                classificationList: [],
                serviceCodeList: []
            },
            dialogStatus: 'add',
            tableHeight: null,
            totalCount: 0,
            dialogVisible: false,
            loading: false,
        }
    },
    created() {
    },
    mounted() {
        this.tableHeight = window.innerHeight - this.$refs.supserAllocation.$el.offsetHeight - 250
        this.selection(1)
    },
    methods: {
        //查询
        selection(val) {
            this.tableData = []
            this.loading = true
            if (val === 1) {
                this.selectionData.page = 1
            }
            queryShipperAccountRule(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.dialogStatus = 'add'
            this.dialogVisible = true
        },
        //修改
        update(val, status) {
            this.dialogStatus = status
            queryShipperAccountRuleById({ id: val.id }).then(res => {
                if (res.code === 200) {
                    this.ruleData = res.data
                    if (this.ruleData.classificationList == null || this.ruleData.classificationList.length < 1) {
                        this.ruleData.classificationList = []
                    }
                    if (this.ruleData.serviceCodeList == null || this.ruleData.serviceCodeList.length < 1) {
                        this.ruleData.serviceCodeList = []
                    }
                    if (status == 'copy') {
                        this.ruleData.id = undefined
                    }
                    this.dialogVisible = true
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //删除
        del(val) {
            this.$confirm("是否要删除记录！", "注意！", {
                confirmButtonText: "确定",
                cancelButtonText: '取消',
                type: "warning",
            }).then(() => {
                changeStatusById({ id: val.id, status: 2 }).then(res => {
                    if (res.code === 200) {
                        this.msgSuccess('删除成功！')
                        this.selection(1)
                    } else {
                        this.msgWarning(res.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => { })
        },
        //停用启用
        changeStatus(val) {
            let status = 0
            let tip = ''
            if (val.status == 0) {
                status = 1
                tip = '启用'
            } else if (val.status == 1) {
                status = 0
                tip = '停用'
            }
            this.$confirm(`是否要${tip}记录！`, "注意！", {
                confirmButtonText: "确定",
                cancelButtonText: '取消',
                type: "warning",
            }).then(() => {
                changeStatusById({ id: val.id, status: status }).then(res => {
                    if (res.code === 200) {
                        this.msgSuccess(tip + '成功！')
                        this.selection(1)
                    } else {
                        this.msgWarning(res.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => { })
        },
        //复制
        copy(val) {
            this.dialogStatus = 'copy'
            this.ruleData = JSON.parse(JSON.stringify(val))
            this.ruleData.id = undefined
            this.dialogVisible = true
        },
        //关闭
        close() {
            this.dialogVisible = false
            this.ruleData = {}
            this.selection(1)
        },
        //翻页
        currentChange(val) {
            this.selectionData.page = val.page
            this.selection()
        },
    }
}

</script>

<style lang="scss" scoped>

</style>