<template>
    <!-- 基础管理-层级 -->
    <div class="app-container">
        <el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
            <el-form-item label="层级配置名称" prop="configName">
                <el-input
                    clearable
                    placeholder="请输入层级配置名称"
                    v-model="queryParams.configName"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</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 plain size="mini" type="primary" icon="el-icon-plus" @click="handleAddLevel">
                    新增层级
                </el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="deviceList" border>
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column
                align="center"
                :key="item.prop"
                :label="item.label"
                :prop="item.prop"
                v-for="item in columnList"
            />

            <el-table-column label="层级数量" align="center">
                <template slot-scope="{ row }">
                    {{ row.nodes.length || 0 }}
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="240">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.row)"
                        v-hasPermi="['basic:device:edit']"
                    >
                        编辑
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        style="color: #f56c6c"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['basic:device:remove']"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getDeviceList"
        />

        <!-- 添加或修改层级对话框 -->
        <el-dialog width="40%" append-to-body :title="addOrEditFormTitle" :visible.sync="addOrEditFormVisible">
            <AddOrEditForm ref="addOrEditComponentRef" @closeAddOrEditFormDialog="closeAddOrEditFormDialog" />
        </el-dialog>
    </div>
</template>

<script>
import AddOrEditForm from './addOrEditForm.vue'
import { getLevelListApi, delLevelApi } from '@/api/basic/level-manage'
export default {
    name: 'DeviceManage',
    components: {
        AddOrEditForm,
    },
    data() {
        return {
            total: 0, // 总条数
            loading: false, // 加载中
            addOrEditFormTitle: '新增', // 新增或编辑对话框标题
            addOrEditFormVisible: false, // 新增或编辑对话框是否显示
            useOrReturnFormTitle: '领用', // 领用或归还对话框标题
            useOrReturnFormVisible: false, // 领用或归还对话框是否显示
            useRecordFormVisible: false, // 使用记录对话框是否显示
            // 设备列表
            deviceList: [],

            // 列配置
            columnList: [
                {
                    label: '层级名称',
                    prop: 'configName',
                },
            ],

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                configName: undefined,
            },
        }
    },
    created() {
        this.getDeviceList()
    },
    methods: {
        // 查询按钮
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getDeviceList()
        },

        // 重置按钮
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },

        // 新增按钮操作
        handleAddLevel() {
            this.addOrEditFormTitle = '新增'
            this.editForm = null
            this.addOrEditFormVisible = true
        },

        //  获取设备列表
        async getDeviceList() {
            this.loading = true
            const res = await getLevelListApi(this.queryParams)
            console.log(res, '获取层级列表')
            this.deviceList = res.rows
            this.total = res.total
            this.loading = false
        },

        // 领用或归还按钮
        handleUseOrReturn(row) {
            console.log(row)
            this.useOrReturnFormTitle = row.status == '正常' ? '领用' : '归还'
            this.useOrReturnFormVisible = true
        },

        // 查看记录按钮
        handleViewRecord(row) {
            console.log(row)
            this.useRecordFormVisible = true
        },

        // 编辑按钮
        handleEdit(row) {
            this.addOrEditFormTitle = '编辑'
            this.addOrEditFormVisible = true
            const { configName, nodes, configId } = row
            const editForm = { configName, nodes, configId }
            this.$nextTick(() => {
                this.$refs.addOrEditComponentRef.setFormData(editForm)
            })
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.addOrEditFormTitle = '编辑'
            this.addOrEditFormVisible = true
        },

        // 删除按钮
        handleDelete(row) {
            this.$modal.confirm('是否确认删除层级编号为"' + row.configId + '"的数据项？').then(async () => {
                const res = await delLevelApi([row.configId])
                if (res.code === 200) {
                    this.$modal.msgSuccess('删除成功')
                    this.getDeviceList()
                }
            })
        },

        // 关闭新增或编辑对话框
        closeAddOrEditFormDialog(isRefresh) {
            this.$refs.addOrEditComponentRef.resetForm()
            this.addOrEditFormVisible = false
            if (isRefresh) {
                this.getDeviceList()
            }
        },

        // 关闭领用或归还对话框
        closeUseOrReturnFormDialog() {
            this.$refs.useOrReturnFormComponentRef.resetForm()
            this.useOrReturnFormVisible = false
        },
    },
}
</script>
