<template>
    <div>
        <el-dialog
                v-if="data.showRoleUsers"
                v-model="data.showRoleUsers"
                top="20px" width="70%"
                title="参与者候选人员"
                append-to-body>
            <el-table :data="data.dataList"
                    border
                    style="width: 100%">
                <el-table-column :label="$t('sysuser.index')" type="index" width="40" />
                <el-table-column :label="$t('sysuser.username')" prop="username" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('sysuser.name')" prop="name" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('sysuser.phone')" prop="phone" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-dialog>

        <template v-for="(item, index) in values">
            <template v-if="!validateNull(props.options) && validateOptionsNotNull()">
                <span v-if="!props.elTagType && !validateJobRoleType(item)" :key="index" :class="props.elTagClass">
                    {{ showKeyNameByJobType(item, values , index) }}</span>
                <el-tooltip content="点击可查看参与者具体的人员信息" placement="top" v-if="!props.elTagType && validateJobRoleType(item)" :key="index">
                    <el-link type="primary" @click="handleShowJobRoleUsers(item)">
                        {{ showKeyNameByJobType(item, values , index) }}</el-link>
                </el-tooltip>
                <el-tag
                        v-if="props.elTagType"
                        :disable-transitions="true"
                        :key="index * 2"
                        :index="index"
                        :type="props.elTagType === 'primary' ? null : props.elTagType"
                        :class="props.elTagClass"
                >{{ showKeyNameByJobType(item, values, index) }}</el-tag>
            </template>

            <template v-else-if="validateNull(props.options) && item.jobType">
                <span v-if="!props.elTagType && !validateJobRoleType(item)" :key="index" :class="props.elTagClass">
                    {{ showRoleNameByJobType(item, values , index) }}</span>
                <el-tooltip content="点击可查看参与者具体的人员信息" placement="top" v-if="!props.elTagType && validateJobRoleType(item)" :key="index">
                    <el-link type="primary" @click="handleShowJobRoleUsers(item)">
                        {{ showRoleNameByJobType(item, values , index) }}</el-link>
                </el-tooltip>
                <el-tag
                        v-if="props.elTagType"
                        :disable-transitions="true"
                        :key="index * 2"
                        :index="index"
                        :type="props.elTagType === 'primary' ? null : props.elTagType"
                        :class="props.elTagClass"
                >{{ showRoleNameByJobType(item, values, index) }}</el-tag>
            </template>
        </template>
    </div>
</template>

<script setup lang="ts" name="convert-role-name">
    import { computed } from 'vue';
    import {validateNull} from "/@/utils/validate";
    import {DIC_PROP} from "/@/flow/support/dict-prop";
    import {handleShowNameByJobType, handleShowRoleNameByJobType} from "/@/flow";
    import {listUsersByRoleId} from "/@/api/jsonflow/common";
    import {useI18n} from "vue-i18n";

    const {t} = useI18n();
    const props = defineProps({
        // 数据
        options: {
            type: Object as any,
            default: {},
        },
        // 当前的值
        value: [Number, String, Object, Array],
        // type
        elTagType: String,
        // class
        elTagClass: String,
        isJobType: String
    });

    const data = reactive({
        showRoleUsers: false,
        dataList: [],
    });

    const values = computed(() => {
        if (props.value !== null && typeof props.value !== 'undefined') {
            if (Array.isArray(props.value)) return props.value
            else if (typeof props.value === 'object') {
                return [props.value]
            }
            return [String(props.value)];
        } else {
            return [];
        }
    });

    function validateOptionsNotNull(){
        return props.options.users && props.options.roles && props.options.posts && props.options.depts
    }

    function showRoleNameByJobType(role, values, index){
        if (role.roleName) {
            let name = handleShowRoleNameByJobType(role, props.isJobType)
            return name + (index !== (values.length - 1) ? "," : "")
        } else {
            showNameByJobType(role, values, index)
        }
    }

    function showNameByJobType(role, values, index){
        let name = handleShowNameByJobType(role, props.isJobType)
        return name + (index !== (values.length - 1) ? "," : "")
    }

    function validateExist(role){
        let exist;
        if (role.jobType === DIC_PROP.JOB_USER_TYPE[0].value) {
            exist = props.options.users.find(s => s.userId === role.roleId)
        } else if (role.jobType === DIC_PROP.JOB_USER_TYPE[1].value) {
            exist = props.options.roles.find(s => s.roleId === role.roleId)
        } else if (role.jobType === DIC_PROP.JOB_USER_TYPE[2].value) {
            exist = props.options.posts.find(s => s.postId === role.roleId)
        } else if (role.jobType === DIC_PROP.JOB_USER_TYPE[3].value) {
            exist = props.options.depts.find(s => s.deptId === role.roleId)
        }
        if (exist) exist.jobType = role.jobType
        else exist = {}
        return exist
    }

    function handleShowJobRoleUsers(item){
        if (!item.roleId || !item.jobType) return
        listUsersByRoleId(item.roleId, item.jobType).then(resp => {
            data.dataList = resp.data
            data.showRoleUsers = true
        })
    }

    function validateJobRoleType(item){
        let isRoleType = item.jobType !== DIC_PROP.JOB_USER_NONE_TYPE[0].value && item.jobType !== DIC_PROP.JOB_USER_NONE_TYPE[1].value;
        return isRoleType && item.roleId
    }

    function showKeyNameByJobType(role, values, index){
        let exist = validateExist(role);
        return showNameByJobType(exist, values, index)
    }

</script>

<style scoped>
    .el-tag + .el-tag {
        margin-left: 10px;
    }
</style>
