<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="130px">
            <el-form-item label="节点名称" prop="roleName">
                <el-col :span="4">
                    <el-select
                            v-model="queryParams.roleName"
                            placeholder="请选择节点名称"
                            style="width: 220px"
                            clearable>
                        <el-option
                                v-for="dict in sys_normal_disable"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"/>
                    </el-select>
                </el-col>
            </el-form-item>
            <el-form-item label="硬件SN" prop="nameKey">
                <el-col :span="4">
                    <el-input
                            v-model="queryParams.nameKey"
                            placeholder="请输入硬件SN"
                            clearable
                            style="width: 220px"
                            @keyup.enter="handleQuery"
                    />
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="warning"
                        plain
                        icon="Download"
                        @click="handleExport"
                        v-hasPermi="['system:role:export']"
                >导出</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>

        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <template v-for="(item,index) of columns">
                <el-table-column :label="item.label" :prop="item.prop" :width="item.width" v-if="item && item.visible" :show-overflow-tooltip="true"></el-table-column>
            </template>
        </el-table>

        <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"/>
    </div>
</template>

<script setup name="RevenueMethod">
    import {listRole} from "@/api/system/role"

    const router = useRouter()
    const { proxy } = getCurrentInstance()
    const { sys_normal_disable } = proxy.useDict("sys_normal_disable")

    const roleList = ref([])
    const loading = ref(true)
    const showSearch = ref(true)
    const ids = ref([])
    const single = ref(true)
    const multiple = ref(true)
    const total = ref(0)
    const dateRange = ref([])

    // 列显隐信息
    const columns = ref([
        { label: `修改时间`, prop: 'lastModifyDttm', visible: true },
        { label: `节点ID`, prop: 'roleId', visible: false },
        { label: `节点名称`, prop: 'roleName', visible: true },
        { label: `硬件SN`, prop: 'roleKey'},
        { label: `修改内容`, prop: 'jkName', visible: true },
        { label: `修改人`, prop: 'equipment', visible: true },
    ])

    const data = reactive({
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            roleName: undefined,
            roleKey: undefined,
            status: undefined
        },
    })

    const { queryParams } = toRefs(data)

    /** 查询角色列表 */
    function getList() {
        loading.value = true
        listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
            roleList.value = response.rows
            total.value = response.total
            loading.value = false
        })
    }

    /** 搜索按钮操作 */
    function handleQuery() {
        queryParams.value.pageNum = 1
        getList()
    }

    /** 重置按钮操作 */
    function resetQuery() {
        dateRange.value = []
        proxy.resetForm("queryRef")
        handleQuery()
    }

    /** 导出按钮操作 */
    function handleExport() {
        proxy.download("system/role/export", {
            ...queryParams.value,
        }, `role_${new Date().getTime()}.xlsx`)
    }

    /** 多选框选中数据 */
    function handleSelectionChange(selection) {
        ids.value = selection.map(item => item.roleId)
        single.value = selection.length != 1
        multiple.value = !selection.length
    }

    /** 修改角色 */
    function handleUpdate(row) {
    }

    getList()
</script>

<style scoped>
</style>
