<template>
    <div>
        <el-card>


            <el-form :inline="true" :model="query" class="query-form" size="mini">

                <el-form-item class="query-form-item">
                    <el-input
                        v-model="query.code"
                        clearable
                        placeholder="仓位货位码"
                        style="width: 400px"
                    ></el-input>
                </el-form-item>

                <el-form-item class="query-form-item">
                    <el-select v-model="query.advanceType" placeholder="是否寄售" clearable>
                        <el-option label="全部" value=""></el-option>
                        <el-option label="是" value=true></el-option>
                        <el-option label="否" value=false></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button-group>

                        <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
                        <el-button type="primary" icon="search" @click="getList">查询</el-button>
                        <el-button type="primary" @click.native="handleForm(null, null)"
                        >添加仓货位
                        </el-button
                        >
                    </el-button-group>
                </el-form-item>
            </el-form>
            <el-table
                :data="mergeList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                    prop="code"
                    label="仓位货位码"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="仓位货位名称"
                >

                </el-table-column>
                <el-table-column
                    prop="advanceType"
                    label="是否寄售">
                    <template slot-scope="scope">
                        <span>{{ enableMap[scope.row.advanceType] }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="isDefault"
                    label="是否默认库存">
                    <template slot-scope="scope">
                        <span>{{ enableMap[scope.row.isDefault] }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">

                        <el-button
                            type="text"
                            size="small"
                            :disabled="scope.row.pid!=0"
                            @click.native.stop="handleForm(node, scope.row, 'add')"
                        >添加
                        </el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="handleForm(node, scope.row, 'edit')"
                        >编辑
                        </el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="handleDel(node,scope.row)"
                        >删除
                        </el-button
                        >
                    </template>

                </el-table-column>
            </el-table>


            <!--            <el-tree-->
            <!--                :data="mergeList"-->
            <!--                :props="defaultProps"-->
            <!--                node-key="id"-->
            <!--                style="width: 50%"-->
            <!--                default-expand-all-->
            <!--                :expand-on-click-node="false"-->
            <!--                :render-content="renderContent"-->
            <!--            >-->
            <!--            </el-tree>-->
        </el-card>
        <!--表单界面-->
        <el-dialog
            :title="formMap[formName]"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="formVisible"
            :before-close="hideForm"
            width="85%"
            top="5vh"
        >
            <el-form :model="formData" :rules="formRules" ref="dataForm">
                <el-form-item label="父ID" prop="pid">
                    <el-select v-model="formData.pid" placeholder="顶级">
                        <el-option
                            v-for="item in treeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                          <span style="float: left"
                          ><span v-html="item.html"></span>{{ item.title }}</span
                          >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="仓库货位名称" prop="name">
                    <el-input
                        type=""
                        v-model="formData.name"
                        auto-complete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="仓库货位代码" prop="title">
                    <el-input
                        type=""
                        v-model="formData.code"
                        auto-complete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio :label="0">禁用</el-radio>
                        <el-radio :label="1">正常</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-row :gutter="20" class="el-row" type="flex">
                        <el-col :span="4" class="el-col">
                            <div class="text item">
                                <el-checkbox v-model="formData.advanceType">是否寄售仓库</el-checkbox>
                            </div>
                        </el-col>
                        <el-col :span="4" class="el-col">
                            <div class="text item">
                                <el-checkbox v-model="formData.isDefault">是否设为默认仓库</el-checkbox>
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="hideForm">取消</el-button>
                <el-button
                    type="primary"
                    @click.native="formSubmit()"
                    :loading="formLoading"
                >提交
                </el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    filterList,
    saveWarehouse,
    deleteWarehouse
} from "../../api/basic/invWarehouse";

const formJson = {
    id: null,
    pid: null,
    name: null,
    code: null,
    status: 1,
    advanceType: false,
    isDefault: false
};
export default {
    data() {
        return {
            query: {
                id: null,
                pid: null,
                name: null,
                code: null,
                status: null,
                advanceType: null,
                isDefault: null
            },
            mergeList: [],
            node: null,
            defaultProps: {
                children: "children",
                label: "name"
            },
            treeList: [],
            loading: true,
            index: null,
            formName: null,
            formMap: {
                add: "新增",
                edit: "编辑"
            },
            enableMap: {
                true: "是",
                false: "否",
            },
            formLoading: false,
            formVisible: false,
            formData: formJson,
            formRules: {
                name: [
                    {required: true, message: "请输入仓库货位名", trigger: "blur"}
                ],
                code: [
                    {required: true, message: "请输入仓库货位代码", trigger: "blur"}
                ]
            },
            pidData: {}
            ,
            deleteLoading: false
        }
            ;
    },
    methods: {
        /*eslint-disable */
        renderContent(h, {node, data, store}) {
            return (
                <span
                    style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
                    <span>
                    <span title={data.name} style="margin-left:8px">{node.label}</span>
                       <span style="margin-left:18px">(编码：{data.code})</span>
                    </span>
                    <span>
                    <el-button
                        style="font-size: 12px;"
                        type="text"
                        on-click={() => this.handleForm(node, data, "add")}
                    >
                添加货位
                </el-button>
                <el-button
                    style="font-size: 12px;"
                    type="text"
                    on-click={() => this.handleForm(node, data, "edit")}
                >
                编辑
                </el-button>
                <el-button
                    style="font-size: 12px;"
                    type="text"
                    on-click={() => this.handleDel(node, data)}
                >
                删除
                </el-button>
                </span>
                </span>
            );
        },
        onReset() {
            this.$router.push({
                path: "",
            });
            this.query = {
                name: "",
                status: "",
            };
            this.getList();
        },
        onSubmit() {
            this.getList();
        },
        getList() {
            this.loading = true;
            filterList(this.query)
                .then((response) => {
                    this.loading = false;
                    this.mergeList = response.data.list || [];
                    this.treeList = response.data.tree_list || [];
                })
                .catch(() => {
                    this.loading = false;
                    this.mergeList = [];
                    this.treeList = [];
                });
        },
        // 刷新表单
        resetForm() {
            if (this.$refs["dataForm"]) {
                // 清空验证信息表单
                this.$refs["dataForm"].clearValidate();
                // 刷新表单
                this.$refs["dataForm"].resetFields();
                this.getList();
            }
        },
        // 隐藏表单
        hideForm() {
            // 更改值
            this.formVisible = !this.formVisible;
            return true;
        },
        // 显示表单
        handleForm(node, data, formName) {
            this.formVisible = true;
            this.pidData = data || null;
            formJson.pid = (data && parseInt(data.id)) || "";
            this.formData = JSON.parse(JSON.stringify(formJson));
            if (formName === "edit") {
                this.formData = Object.assign({}, data);
                this.node = node;
            }
            this.formData.pid = !this.formData.pid ? "" : this.formData.pid;
            this.formName = formName;
            if (data && data.id) {
                this.index = this.mergeList.findIndex((d) => d.id === data.id);
            }
        },
        formSubmit() {
            this.$refs["dataForm"].validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    let data = Object.assign({}, this.formData);
                    saveWarehouse(data, this.formName)
                        .then((response) => {
                            this.formLoading = false;
                            if (response.code !== 20000) {
                                this.$message.error(response.message);
                                return false;
                            }
                            this.$message.success("操作成功");
                            this.formVisible = false;
                            if (this.formName !== "edit") {
                                if (response.data && response.data.id) {
                                    data.id = response.data.id;
                                    if (this.pidData) {
                                        if (!this.pidData.children) {
                                            this.$set(this.pidData, "children", []);
                                        }
                                        this.pidData.children.push(data);
                                    } else {
                                        this.mergeList.push(data);
                                    }
                                }
                            } else {
                                const parent = this.node.parent;
                                const children = parent.data.children || parent.data;
                                const index = children.findIndex((d) => d.id === data.id);
                                children.splice(index, 1, data);
                            }
                            // 刷新表单
                            this.resetForm();
                            this.getList();
                        })
                        .catch(() => {
                            this.formLoading = false;
                        });
                }
            });
        },
        // 删除
        handleDel(node, data) {
            if (data.children && data.children.length > 0) {
                this.$alert("请先删除子节点", "提示", {
                    confirmButtonText: "确定",
                });
                return false;
            }
            if (data.id) {
                this.$confirm("确认删除该记录吗?", "提示", {
                    type: "warning",
                })
                    .then(() => {
                        this.deleteLoading = true;
                        let para = {id: data.id};
                        deleteWarehouse(para)
                            .then((response) => {
                                this.deleteLoading = false;
                                if (response.code !== 20000) {
                                    this.$message.error(response.message);
                                    return false;
                                }
                                this.$message.success("删除成功");
                                const parent = node.parent;
                                const children = parent.data.children || parent.data;
                                const index = children.findIndex((d) => d.id === data.id);
                                children.splice(index, 1);
                            })
                            .catch(() => {
                                this.deleteLoading = false;
                            });
                    })
                    .catch(() => {
                        this.$message.info("取消删除");
                    });
            }
        },
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                0: "gray",
                1: "success",
            };
            return statusMap[status];
        },
        statusFilterName(status) {
            const statusMap = {
                0: "禁用",
                1: "正常",
            };
            return statusMap[status];
        },
    },
    mounted() {
    },
    created() {
        // 加载表格数据
        this.getList();
    },
};
</script>

<style type="text/scss" lang="scss">
</style>
