<template>
    <div>
        <basic-container v-show="!detailsOpen">
            <avue-crud :option="option"
                       :table-loading="loading"
                       :data="data"
                       :page.sync="page"
                       :permission="permissionList"
                       :before-open="beforeOpen"
                       v-model="form"
                       ref="crud"
                       @row-update="rowUpdate"
                       @row-save="rowSave"
                       @row-del="rowDel"
                       @search-change="searchChange"
                       @search-reset="searchReset"
                       @selection-change="selectionChange"
                       @current-change="currentChange"
                       @size-change="sizeChange"
                       @refresh-change="refreshChange"
                       @on-load="onLoad">
                <template slot-scope="{ row, index }" slot="code">
                    <span style="color: #409EFF;cursor: pointer" @click.stop="editOpen(row)">{{ row.code }}
                    </span>
                </template>
                <template slot-scope="{type,size,row,index,disabled}" slot="menu">
                    <el-button type="text"
                               size="small"
                               icon="el-icon-delete"
                               v-if="row.status !== 1"
                               @click="rowDel(row)">删 除
                    </el-button>
                </template>
                <template slot="status" slot-scope="{row,size}">
                    <span v-if="row.status === 1">启用</span>
                    <span v-if="row.status === 0">保存</span>
                </template>
                <template slot-scope="{type,size,row,$index}" slot="menuLeft">
                    <el-button icon="el-icon-plus" type="primary" :size="size" @click="addStorage">新增</el-button>
<!--                    <el-button type="warning" icon="el-icon-download" size="small" @click="">导出</el-button>-->
                </template>


            </avue-crud>
        </basic-container>
        <detail v-if="detailsOpen" ref="detailRef" :onLoad="form" @backToList="backToList"></detail>
    </div>
</template>

<script>
import {getList, getDetail, add, update, remove} from "@/api/storehouse/storage.js";
import {mapGetters} from "vuex";
import detail from './detailsPage.vue'

export default {
    components: {detail},
    data() {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            selectionList: [],
            option: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                selection: true,
                dialogClickModal: false,
                column: [
                    {
                        label: "仓库编码",
                        prop: "code",
                        rules: [{
                            required: true,
                            message: "请输入仓库编码",
                            trigger: "blur"
                        }],
                        search: true,
                        searchSpan: 4,
                        align: 'center'
                    },
                    {
                        label: "仓库名称",
                        prop: "cname",
                        rules: [{
                            required: true,
                            message: "请输入仓库名称",
                            trigger: "blur"
                        }],
                        search: true,
                        searchSpan: 6,
                        align: 'center'
                    },
                    {
                        label: "联系人",
                        prop: "contacts",
                        rules: [{
                            required: true,
                            message: "请输入联系人",
                            trigger: "blur"
                        }],
                        search: false,
                        searchSpan: 4,
                        align: 'center'
                    },
                    {
                        label: "联系电话",
                        prop: "tel",
                        align: 'center'
                    },
                    {
                        label: "库容",
                        prop: "storageCapacity",
                        align: 'center'
                    },
                    {
                        label: "状态",
                        prop: "status",
                        search: false,
                        searchSpan: 4,
                        align: 'center'
                    }
                ]
            },
            data: [],
            detailsOpen: false
        };
    },
    computed: {
        ...mapGetters(["permission"]),
        permissionList() {
            return {
                addBtn: this.vaildData(this.permission.centerstorage_add, false),
                viewBtn: this.vaildData(this.permission.centerstorage_view, false),
                delBtn: this.vaildData(this.permission.centerstorage_delete, false),
                editBtn: this.vaildData(this.permission.centerstorage_edit, false)
            };
        },
        ids() {
            let ids = [];
            this.selectionList.forEach(ele => {
                ids.push(ele.id);
            });
            return ids.join(",");
        }
    },
    methods: {
        editOpen(row){
            this.form.id = row.id
            // this.$refs.detailRef.getItem(row.id)
            this.detailsOpen = true
        },
        backToList() {
            this.detailsOpen = false
            this.onLoad(this.page);
        },
        rowSave(row, done, loading) {
            add(row).then(() => {
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                done();
            }, error => {
                loading();
                window.console.log(error);
            });
        },
        addStorage() {
            this.form = {}
            this.detailsOpen = true
        },
        rowUpdate(row, index, done, loading) {
            update(row).then(() => {
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                done();
            }, error => {
                loading();
                console.log(error);
            });
        },
        rowDel(row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                });
        },
        handleDelete() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(this.ids);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    this.$refs.crud.toggleSelection();
                });
        },
        beforeOpen(done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then(res => {
                    this.form = res.data.data;
                });
            }
            done();
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            this.loading = true;
            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records;
                this.loading = false;
                this.selectionClear();
            });
        }
    }
};
</script>

<style>
</style>
