<template>
    <div>
        <el-table :data="list" border v-loadding="loadding" style="width: 100%">
            <el-table-column prop="userInfo.phone" min-width="300" label="特殊认证登记">
                <template #default="{ row }">
                    <div>
                        <div class="d-flex a-c">
                            <div v-if="row.specialType === '7' && row.specialCertMaterials">
                                <HAvatar :src="row.specialCertMaterials.logo || ''" fit="contain" shape="square" :size="30"></HAvatar>
                            </div>
                            <div v-else>
                                <HAvatar :src="row.grayLogo" :size="36" fit="contain" shape="square"></HAvatar>
                            </div>
                            <div v-if="row.specialType === '7' && row.specialCertMaterials" class="c-666 f-14" style="padding-left: 5px;">
                                {{ row.specialCertMaterials.certName }}
                            </div>
                            <div v-else class="c-666 f-14" style="padding-left: 5px;">{{ row.label }}</div>
                        </div>
                        <div class="f-12 c-ccc">{{ row.remark }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="res" label="状态" width="90" align="center">
                <template #default="{ row }">
                    <template v-if="!row.res">
                        <div>未登记</div>
                    </template>
                    <template v-if="row.res === '0'">
                        <div>待审核</div>
                    </template>
                    <template v-if="row.res === '1'">
                        <div>已登记</div>
                    </template>
                    <template v-if="row.res === '2'">
                        <el-tooltip class="box-item" effect="dark" :content="row.msg" placement="top-start">
                            <div class="d-flex a-c j-c c-s-p">
                                <el-icon color="#E33F36">
                                    <warning-filled />
                                </el-icon>
                                未通过
                            </div>
                        </el-tooltip>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="postName" min-width="140" label="操作">
                <template #default="{ row }">
                    <el-button @click="lookDetail(row)" type="primary" style="color: #3E7B65;" text>详情</el-button>
                    <template v-if="['0'].includes(row.res)">
                        <el-button @click="handleApproval(row, '1')" type="success" text>审核通过</el-button>
                        <el-button @click="handleApproval(row, '2')" type="warning" text>审核不通过</el-button>
                    </template>
                    <!-- <el-button v-if="['2'].includes(row.res)" @click="deleteAuth(row)" type="danger" text>删除</el-button> -->
                    <!-- <el-button v-if="['1'].includes(row.res)" @click="eidtAuth(row)" type="primary" text>编辑</el-button> -->
                    <el-button v-if="['1'].includes(row.res)" @click="cancelAuth(row)" type="danger" text>取消登记</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <CpyCheckDetail v-if="show4" v-model:show="show4" :info="formItem" :cert_level="cert_level" :cert_level1="cert_level1"></CpyCheckDetail>
</template>
<script lang="ts" setup name="baseAuthInfo">
import { approvalCert, cancelCert, companyCertificatelist } from '@/api/settled';
import { propTypes } from '@/utils/propTypes';
import { CpyCheckDetail } from '@/views/settled'
import { CircleCheck, CircleClose } from '@element-plus/icons-vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const {  cert_level, cert_level1 } = toRefs<any>(
    proxy?.useDict('cert_level', 'cert_level1')
);
const formItem = ref<any>(null)
const show4 = ref(false)
const props = defineProps({
    cpyid: propTypes.string.def('')
});
const list = ref<any[]>([])
const loadding = ref(false)
const lookDetail = async (row: any) => {
    formItem.value = row
    show4.value = true
}
const eidtAuth = async (row:any) => {

}
// 审批办理
const handleApproval = async (row: any, res: string) => {
    if (res === '1') {
        ElMessageBox.confirm('该认证审核通过?', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'success',
            icon: markRaw(CircleCheck)
        })
            .then(() => {
                const params = {
                    targetType: 'cert',
                    targetId: row.id,
                    res
                };
                approvalAjax(params);
            })
            .catch(() => {
                proxy?.$modal.msgWarning('取消审核');
            });
    } else {
        ElMessageBox.prompt('该认证审核不通过', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            inputPlaceholder: '不通过理由',
            inputErrorMessage: '请填写不通过理由',
            type: 'error',
            icon: markRaw(CircleClose),
            inputValidator: (value) => {
                return value ? true : false
            }
        })
            .then(({ value }) => {
                const params = {
                    targetType: 'cert',
                    targetId: row.id,
                    res,
                    msg: value
                };
                approvalAjax(params);
            })
            .catch(() => {
                proxy?.$modal.msgWarning('取消审核');
            });
    }
};
const approvalAjax = async (params: any) => {
    proxy?.$modal.loading('审核中...')
    const res = await approvalCert(params).catch(() => {});
    proxy?.$modal.closeLoading()
    if (!res) return;
    proxy?.$modal.msgSuccess('操作完成')
    getList()
};
const cancelAuth = async (row: any) => {
    ElMessageBox.confirm('您确定取消当前登记么?', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'success',
            icon: markRaw(CircleCheck)
        })
            .then(() => {
                submitCancelCert(row.id);
            })
            .catch(() => {
                proxy?.$modal.msgWarning('取消审核');
            });
}
const submitCancelCert = async (id: string) => {
    proxy?.$modal.loading('取消中...')
    const res = await cancelCert(id)
    proxy?.$modal.closeLoading()
    if (!res) return
    getList()
}
const getList = async () => {
    loadding.value = true;
    const params = {
        certType: '2',
        cpyid: props.cpyid
    }
    const res = await companyCertificatelist(params);
    if (!res) return;
    loadding.value = false;
    list.value = [...res.rows];
};
onMounted(() => {
    getList()
})
</script>
