<template>
    <div class="app-container">
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" @submit.native.prevent label-width="78px">

            <el-form-item label="设备分类" prop="id">
                <el-select v-model="queryForm.id" placeholder="请选择设备分类" clearable>
                    <el-option v-for="item in sbflOptions" :key="item.id" :label="item.equipmentType" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="型号" prop="model">
                <el-input v-model="queryForm.model" placeholder="请输入型号" clearable />
            </el-form-item>

            <el-form-item label="分类编码" prop="classificationCode">
                <el-input v-model="queryForm.classificationCode" placeholder="请输入分类编码" clearable />
            </el-form-item>


            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row class="mb8" :gutter="8">
            <el-col :span="1.5">
                <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAdd">新增
                </el-button>
            </el-col>
        </el-row>
        <!-- 表单数据 -->
        <el-table :data="assetsList" v-loading="loading" row-key="id" :default-expand-all="isExpandAll"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column label="分类编码" header-align="center" prop="classificationCode"></el-table-column>
            <el-table-column label="设备分类" align="center" prop="equipmentType"></el-table-column>
            <el-table-column label="型号" align="center" prop="model"></el-table-column>
            <el-table-column label="管理员" align="center" prop="admin"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleAdd(scope.row)">新增
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" v-if="scope.row.parentId != 0"
                        @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增/修改弹出框 -->
        <el-dialog width="50%" :visible.sync="open" :title="title" append-to-body>
            <el-form ref="postForm" :model="postForm" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="16" v-if="postForm.parentId !== 0">
                        <el-form-item label="父分类编码" prop="parentId">
                            <treeselect v-model="postForm.parentId" :options="assetsList" :normalizer="normalizer"
                                placeholder="选择分类编码" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="分类编码" prop="classificationCode">
                            <el-input v-model="postForm.classificationCode"
                                :rules="[{ required: true, message: '会议名称不能为空' },]"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="设备分类" prop="equipmentType">
                            <el-input v-model="postForm.equipmentType"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="排序" prop="orderNum">
                            <el-input-number v-model="postForm.orderNum" controls-position="right" :min="0"
                                style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="型号" prop="model">
                            <el-input v-model="postForm.model"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="管理员" prop="adminId">
                            <el-select v-model="postForm.adminId" filterable placeholder="请选择管理员" clearable
                                style="width: 100%;">
                                <el-option v-for="(item, index) in adminUser" :key="index" :label="item.admin"
                                    :value="item.adminId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel"> 取 消 </el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>

import {
    getProduct,
    queryProduct,
    addProduct,
    editProduct,
    deleteProduct,
    getProductCategory,//获取设备分类下拉框
    getAdmin
} from '@/api/smartSchool/schoolProperty/classiFication.js'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    components: { Treeselect },
    name: "classiFication",
    dicts: ["vehicle_type", "vehicle_state"],
    data() {
        return {
            // 是否禁用输入框
            isDisabled: false,
            queryForm: {
                id: '',
                model: '',
                classificationCode: "",

            },
            //设备分类下拉框
            sbflOptions: [],
            // 遮罩层
            loading: false,
            // 列表
            assetsList: [],
            // 新增/修改表单
            postForm: {
                classificationCode: '',
                parentId: undefined,
                equipmentType: '',
                model: '',
                admin: '',
                adminId: '',
                orderNum: '',
            },

            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 多个禁用
            multi: false,
            // 展开
            isExpandAll: true,
            // 重新渲染表格状态
            refreshTable: true,
            // 校验规则
            rules: {
                classificationCode: [{ required: true, message: "分类编码不能为空", trigger: 'blur' }],
                equipmentType: [{ required: true, message: "设备分类不能为空", trigger: 'blur' }],
                orderNum: [{ required: true, message: "显示排序不能为空", trigger: 'blur' }],
                adminId: [{ required: true, message: "管理员不能为空", trigger: 'blur' }],
            },
            //管理员
            adminUser: [],


        }
    },

    created() {
        this.getList();
        this.enuqLeader();
        this.getAdminUserList();


    },
    methods: {
        //查询表单数据
        getList() {
            this.loading = true;
            getProduct(this.queryForm).then(response => {
                this.assetsList = this.handleTree(response.rows, "id", 'parentId', 'children');
                console.log('this.assetsList', this.assetsList);
                this.loading = false;
            })
        },


        // 展开/折叠
        toggleExpandAll() {
            this.refreshTable = false;
            this.isExpandAll = !this.isExpandAll;
            this.$nextTick(() => {
                this.refreshTable = true;
            });
        },
        //获取管理员人列表
        getAdminUserList() {
            getAdmin().then(res => {
                if (res.code == 200) {
                    this.adminUser = res.data
                    console.log(this.adminUser);
                }
            })
        },

        // 新增
        handleAdd(row) {
            this.reset();
            this.open = true;
            if (row != null && row.id) {
                console.log('row', row);
                this.postForm.parentId = row.id;
            } else {
                this.postForm.parentId = undefined;
            }
            this.title = "新增";
        },
        /** 转换数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.equipmentType,
                children: node.children
            };
        },
        //设备分类下拉框
        enuqLeader() {
            getProductCategory().then(((res) => {
                if (res.code == 200) {
                    this.sbflOptions = res.data;
                    // console.log(this.sbflOptions);
                    console.log('this.sbflOptions', this.sbflOptions);
                }

            }))
        },
        // 修改
        handleUpdate(row) {
            this.reset();
            queryProduct(row.id).then(response => {
                this.postForm = response.data;
                this.getAdminUserList();
                console.log('this.postForm修改', this.postForm);
                this.open = true;
                this.title = "修改资产分类";
            });

        },

        // 删除
        handleDelete(row) {
            this.$modal.confirm(`是否确认删除此数据？`).then(() => {
                this.loading = true;
                return deleteProduct(row.id);
            }).then(() => {
                this.getList();
                this.enuqLeader();
                this.loading = false;
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {
                this.loading = false
            });
        },
        // 确定
        submitForm: function () {
               const adminId = this.postForm.adminId;
            if (adminId === '') {
                this.postForm.admin = '';
            } else {
                const adminUser = this.adminUser.find(item => item.adminId == adminId);
                if (adminUser) {
                    this.postForm.admin = adminUser.admin;
                } else {
                    // 处理找不到匹配的管理员情况，你可以根据实际需要进行处理，例如设置默认值或显示错误提示等
                }
            }
            this.$refs["postForm"].validate(valid => {
                if (valid) {
                    if (this.postForm.id != null) {
                        editProduct(this.postForm).then(response => {
                            console.log('this.postForm', this.postForm);
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                            this.enuqLeader();

                        });
                    } else {
                        addProduct(this.postForm).then(response => {
                            if (this.postForm.parentId == undefined) {
                                this.enuqLeader();
                            }
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();

                        });
                    }
                }
            });
        },
        // 取消
        cancel() {
            this.reset();
            this.open = false;
            // this.openLook = false;

        },
        // 重置提交表单
        reset() {
            this.postForm = {
                classificationCode: '',
                parentId: undefined,
                equipmentType: '',
                model: '',
                admin: undefined,
                adminId: undefined,
                orderNum: '',
            };

            this.resetForm('postForm')
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.getList();
        }
    }
}
</script>

<style lang="scss" scoped></style>
