<template>
    <hc-body split>
        <template #left>
            <hc-card>
                <div class="relative mb-3 w-full">
                    <el-select v-model="currentId" filterable block placeholder="选择合同段" @change="getRoleList">
                        <el-option v-for="item in contractData" :key="item.id" :label="item.contractName" :value="item.id" />
                    </el-select>
                </div>
                <div v-loading="isRoleLoading" class="hc-sign-pfx-file-list">
                    <el-scrollbar>
                        <el-menu unique-opened style="border-right: 0;">
                            <el-sub-menu v-for="(item, index) in roleListData" :key="index" :index="`${item.roleId.toString()}`">
                                <template #title>
                                    <i class="i-iconoir-settings-profiles" />
                                    <span class="ml-2">{{ item.roleName }}</span>
                                </template>
                                <el-menu-item-group v-for="(items, indexs) in item.childRoleList" :key="indexs">
                                    <el-menu-item :index="`${items.roleId.toString()}`" @click="signPfxClick(items)">
                                        {{ items.roleName }}
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                        </el-menu>
                    </el-scrollbar>
                </div>
            </hc-card>
        </template>
        <hc-card>
            <hc-status v-if="tableData.length <= 0" text="暂无相关数据" />
            <hc-table v-else :column="tableColumn" :datas="tableData" :is-index="false">
                <template #signatureFileUrl="{ row }">
                    <el-image class="h-[30px] w-[70px]" :src="row.signatureFileUrl" :preview-src-list="[row.signatureFileUrl]" fit="cover" />
                </template>
                <template #certificateFileName="{ row }">
                    <el-link type="primary" :href="row.certificateFileUrl" target="_blank">{{ row.certificateFileName }}</el-link>
                </template>
                <template #pfxType="{ row }">
                    {{ row.pfxType != -1 ? row.pfxType : '-' }}
                </template>
                <template #action="{ row, index }">
                    <el-link v-del-com:[delRowClick]="{ row, index }" type="danger">删除签名配置</el-link>
                </template>
            </hc-table>
        </hc-card>
    </hc-body>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
import mainApi from '~api/certificate/admin'

const props = defineProps({
    cid: {
        type: [String, Number],
        default: '',
    },
})

//监听内容
const contractId = ref(props.cid)
const currentId = ref(props.cid)

//渲染完成
onMounted(() => {
    getDataApi()
})

//获取数据
const getDataApi = () => {
    if (isNullES(contractId.value)) return
    getProjectData()
    getRoleList()
}

//合同段列表
const contractData = ref([])
const getProjectData = async () => {
    const { data } = await mainApi.queryContractList({
        contractId: contractId.value,
    })
    contractData.value = getArrValue(data)
}

//获取证书列表
const isRoleLoading = ref(false)
const roleListData = ref([])
const getRoleList = async () => {
    isRoleLoading.value = true
    const { data } = await mainApi.queryAllRoleList({
        contractId: currentId.value,
    })
    roleListData.value = getArrValue(data)
    isRoleLoading.value = false
}

//表格数据
const tableColumn = ref([
    { key: 'certificateUserName', name: '姓名' },
    { key: 'signatureFileUrl', name: '签名图片' },
    { key: 'certificateFileName', name: '证书' },
    { key: 'pfxType', name: '签章类型' },
    { key: 'action', name: '操作', width: 110, align: 'center' },
])

//证书点击
const tableData = ref([])
const signPfxClick = ({ signPfxFileList }) => {
    tableData.value = getArrValue(signPfxFileList)
}

//删除签名配置
const delRowClick = async ({ item }, resolve) => {
    const { row, index } = getObjValue(item)
    const { isRes } = await mainApi.del(row.id)
    resolve() //关闭弹窗
    if (!isRes) return
    window.$message.success('删除成功')
    getRoleList().then()
    tableData.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.hc-sign-pfx-file-list {
    position: relative;
    height: calc(100% - 42px);
    border: 1px solid #dbdde5;
    overflow: hidden;
}
</style>
