<template>
    <div class="bigBox">
        <!-- 查询 -->
        <el-divider />
        <div class='tabox'>
            <section class="query-flex" ref="queryHeight">
                <section class="query-section">
                    <section class="flex">
                        <el-input placeholder="请输入安全标识名称进行查询" v-model="pageData.listQuery.signName" clearable
                            style='width:250px'></el-input>
                        <MOSTY.DictTree class="ml12" v-model="pageData.listQuery.signType" :zdlist="aqbslist"
                            :placeholder='"安全标识类型"' :type='"array"' style="width: 250px;" />
                        <MOSTY.DictRidioAndSelect class="ml12" style="width: 250px;" :dictData="D_SAFETY_SIGN_BUSINESS"
                            v-model="pageData.listQuery.businessType" selectType="select" :placeholder='"业务分类"'
                            :disabled="false" />
                    </section>
                </section>
                <div class="query-btn">
                    <el-button @click="seachchange" class="ml6">
                        <el-icon>
                            <Search />
                        </el-icon>
                        <span>查询</span></el-button>
                    <el-button @click="handleRest">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                        <span>重置</span></el-button>
                </div>
            </section>
            <el-divider />
            <section :style="{ 'height': 'calc(100vh - 343px)' }">
                <MOSTY.Table :table-columns="pageData.tableColumns" :isSelect="true" :isSort="true"
                    :tableData="pageData.tableData" :tableloading="tableloading" @handleSelecTable="handleSelecTable"
                    element-loading-text="数据加载中...">
                    <template #signType="{ row }">
                        <span>{{ resultAqbs[row.signType] || row.signType }}</span>
                    </template>
                    <template #signImg="{ row }">
                        <img style="width: 46px; height: 46px" :src="getImgUrl(`${row.signImg}.png`)" />
                    </template>
                    <template #actions="{ row }">
                        <!-- <span class="operedit" @click="handlexg(row)">
                            <el-icon>
                                <EditPen />
                            </el-icon>编辑</span>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要注销?"
                            @confirm="handledelete(row)">
                            <template #reference>
                                <span class="operdel" size="small">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                    删除</span>
                            </template>
</el-popconfirm> -->
                        <!-- <span class="operesee" @click="handleDownload(row)">
                            <el-icon>
                                <Download />
                            </el-icon>下载</span> -->
                        <span class="operesee" @click="handleSee(row)">
                            <el-icon>
                                <View />
                            </el-icon>查看</span>
                    </template>
                </MOSTY.Table>
            </section>
            <div class="fenye">
                <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
                    @changeSize="handleSizeChange" />
            </div>
        </div>
    </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { reactive, ref, onMounted, getCurrentInstance, watch, nextTick } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { ElMessage } from "element-plus"
import { getImgUrl } from "@/utils/tools.js"
const { proxy } = getCurrentInstance()
const {
    D_SAFETY_SIGN_BUSINESS,
} = proxy.$dict("D_SAFETY_SIGN_BUSINESS")
const tableloading = ref(false)
const aqbslist = ref([])
const pageData = reactive({
    listQuery: {
        signName: "",
        signType: "",
        businessType: "",
        pageCurrent: 1,
        pageSize: 10,
    },
    tableColumns: [
        {
            title: "安全标识名称",
            prop: "signName"
        },
        {
            title: "安全标识类型",
            prop: "signType",
            slot: true
        },
        {
            title: "安全标识图片",
            prop: "signImg",
            slot: true
        },
        {
            title: "安全标识使用范围",
            prop: "useScope",
            // slot: true
        },
        // {
        //     title: "操作",
        //     prop: "actions",
        //     slot: true
        // }
    ],
    tableData: [],
    pageConfiger: {
        pageSize: 10,
        pageCurrent: 1,
        total: 0
    }
})
// 查询
const seachchange = () => {
    gettablist()
}
//页码发生变化
const handleCurrentChange = (val) => {
    pageData.listQuery.pageCurrent = val
    pageData.pageConfiger.pageCurrent = val
    gettablist()
}
//查询条数发生变化
const handleSizeChange = (val) => {
    pageData.listQuery.pageSize = val
    pageData.pageConfiger.pageSize = val
    gettablist()
}
// 重置
const handleRest = () => {
    pageData.listQuery.signName = ""
    pageData.listQuery.signType = ""
    pageData.listQuery.businessType = ""
    pageData.listQuery.pageCurrent = 1
    pageData.pageConfiger.pageCurrent = 1
    gettablist()
}
const handleSelecTable = () => {

}
// 编辑
const handlexg = () => {

}
// 删除
const handledelete = () => {

}
// 下载
const handleDownload = (row) => {
}
// 查看
const handleSee = (row) => {

}
onMounted(() => {
    getaqbslb();
})
//安全标识库分页查询
function gettablist() {
    tableloading.value = true
    postApi(pageData.listQuery, '/mosty-jcgl/safetySign/getSafetySignPage')
        .then((res) => {
            if (res) {
                tableloading.value = false
                pageData.tableData = res.records
                pageData.pageConfiger.total = res.total
            }
        })
        .catch(() => {

        })
}
//安全标识类型字典
const resultAqbs = {};
//获取安全标识类型
function getaqbslb() {
    getApi({
        zdbh: "D_TB_JCYWLX",
        dm: "2003",
        level: 2
    }, "/mosty-base/sysDict/getJcyelxDictTree").then(res => {
        aqbslist.value = res[0].itemList
        aqbslist.value.forEach(obj => {
            if (obj.dm && obj.zdmc) {
                resultAqbs[obj.dm] = obj.zdmc;
            }
        });
        gettablist();
    })
}
</script>
<style lang="scss" scoped>
.headBox {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-bottom: 10px;
}

.button {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-bottom: 12px;
}

.query-flex {
    display: flex;
    justify-content: space-between;

    .query-section {

        width: 68%;
    }

    .query-btn {
        width: 360px;
        display: flex;
        justify-content: end;

        .toggle {
            height: 32px;
            cursor: pointer;
            display: flex;
            align-items: center;
            color: #0f3916;

            .el-icon {
                transform: rotate(90deg);
                transition: all 0.25s ease;
            }

            &.active {
                .el-icon {
                    transform: rotate(-90deg);
                }
            }
        }
    }
}
</style>
