<template>
    <div class="app-container">
        <!-- 搜索条件 -->
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true">
            <el-form-item label="仪器名称">
                <el-input v-model="queryForm.instrumentTypeName" style="width: 100%" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="仪器分类">
                <treeselect v-model="queryForm.id" :options="tableData" :normalizer="normalizer" placeholder="选择分类编码"
                    clearable style="width:192px" />
            </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 :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleOption(0)">新增</el-button>
            </el-col>

        </el-row>
        <!-- 表格 -->
        <el-table :data="tableData" v-loading="loading" row-key="id" :default-expand-all="isExpandAll"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="instrumentTypeName" label="仪器名称" />
            <el-table-column prop="orderNum" label="排序" />
            <el-table-column prop="isConsumables" label="是否为消耗品">
                <template slot-scope="{ row }">
                    {{ row.isConsumables === '1' ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
            <el-table-column align="center" fixed="right" label="操作">
                <template slot-scope="{ row }">
                    <div>
                        <el-button type="text" size="small" @click="handleOption(1, row)">编辑</el-button>
                        <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹窗 -->
        <el-dialog :title="title" :visible.sync="dialogTableVisible" width="30%" show-close>
            <el-form :model="form" ref="form" size="small" :rules="rules" label-width="108px">
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="上级分类" prop="parentId">
                            <treeselect v-model="form.parentId" :options="tableData" :normalizer="normalizer"
                                placeholder="选择" clearable style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="仪器名称" prop="instrumentTypeName">
                            <el-input v-model="form.instrumentTypeName" placeholder="请输入" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="排序" prop="orderNum">
                            <el-input v-model="form.orderNum" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="是否为消耗品" prop="isConsumables">
                            <el-radio-group v-model="form.isConsumables">
                                <el-radio label='1'>是</el-radio>
                                <el-radio label='0'>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入" type="textarea" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="submitparentForm">确定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
            @pagination="getList" />
    </div>
</template>

<script>
import {
    addInst,//新增仪器
    editInst,//修改仪器
    getList,//查看列表
    getInstxq,
    deleteInst,
} from '@/api/smartSchool/InstrumentDrugAdministration/instrumentClassification'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: 'instrumentClassification',
    components: { Treeselect },
    data() {
        return {
            queryForm: {
                pageNum: 1,
                pageSize: 10,
                instrumentTypeName: null,
                id: null,
            },
            selectedRows: [], // 用于存储选择的行数据
            //表格数据
            tableData: [],
            nowType: 0, // 0新增、1编辑、2查看
            title: '',
            // 弹窗
            form: {
                instrumentTypeName: null,
                parentId: null,
                orderNum: "",
                isConsumables: "",
                remark: "",
            },
            // 总计
            total: 0,
            single: false, // 添加 single 属性并设置初始值
            multiple: false,
            dialogTableVisible: false,
            // 展开
            isExpandAll: true,
            // 重新渲染表格状态
            refreshTable: true,
            rules: {
                // parentId: [
                //     { required: true, message: "上级分类不能为空", trigger: "blur" }
                // ],
                instrumentTypeName: [
                    { required: true, message: "仪器名称不能为空", trigger: "blur" }
                ],
                orderNum: [
                    { required: true, message: "排序不能为空", trigger: "blur" }
                ],
                isConsumables: [
                    { required: true, message: "是否为消耗品不能为空", trigger: "blur" }
                ],


            },
        }
    },
    created() {
        this.getList();
    },
    methods: {
        // 搜索
        getList() {
            this.loading = true;
            getList(this.queryForm).then(response => {
                this.tableData = this.handleTree(response.rows, "id", 'parentId', 'children');
                console.log('this.tableData', this.tableData);
                this.loading = false;
            })
        },

        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.instrumentTypeName,
                children: node.children
            };
        },
        // 重置
        resetQuery() {
            this.queryForm = {
                pageNum: 1,
                pageSize: 10,
                instrumentTypeName: null,
                id: null,
            },
                this.getList();
        },

        // 0新增、1编辑、2查看
        handleOption(type, item) {
            this.form = {
                id: '',
                instrumentTypeName: null,
                parentId: null,
                orderNum: "",
                isConsumables: "",
                remark: "",
            }
            this.nowType = type;
            if (type != 0) {
                const id = item.id;
                getInstxq(id).then(res => {
                    if (res.code == 200) {
                        Object.keys(this.form).forEach(key => {
                            if (res.data[key]) {
                                this.$set(this.form, key, res.data[key]);

                            }
                        });
                    }
                })
            }
            this.dialogTableVisible = true
        },

        //删除按钮操作
        handleDelete(row) {
            this.$modal.confirm('是否确认删除选中数据？').then(() => {
                this.$modal.loading('正在处理数据，请稍等...');
                return deleteInst(row.id);
            }).then(response => {
                this.$modal.closeLoading();
                this.$modal.msgSuccess("删除班级成功");
                this.getList();
            }).catch(error => {
                this.$modal.closeLoading();
            })
        },

        // 确定按钮
        submitparentForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != "") {
                        editInst(this.form).then(response => {
                            console.log('this.form', this.form);
                            this.$modal.msgSuccess("修改成功");
                            this.dialogTableVisible = false;
                            this.getList();

                        });
                    } else {
                        addInst(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.dialogTableVisible = false;
                            this.getList();

                        });
                    }
                }
            });
        },
        reset() {
            // 这里需要重置对话框表单
            this.form = {
                instrumentTypeName: "",
                parentId: null,
                orderNum: "",
                isConsumables: "",
                remark: "",
            };
        },
        //取消按钮
        cancel() {
            this.dialogTableVisible = false;
            this.dialogTableInventory = false;
            this.reset();
        },
    }
}
</script>

<style scoped></style>
