<template>
    <div class="translation">
        <!-- 文本 -->
        <template v-if="renderType[configuration.renderIndex] === 'text'">
            <span v-if="corporateWeChat && !noRender.includes(translationValue)">
                <ww-open-data :type='configuration.openType' :openid='translationValue'></ww-open-data>
            </span>
            <span v-else-if="dingdingPlatform && !noRender.includes(translationValue)">
                <dt-open-data :open-type='dingdingOpenType[configuration.openType]' :open-id='translationValue'></dt-open-data>
            </span>
            <span v-else>{{ translationValue }}</span>
        </template>
        <!-- 数组 -->
        <template v-if="renderType[configuration.renderIndex] === 'array'">

        </template>
        <!-- 对象 -->
        <template v-if="renderType[configuration.renderIndex] === 'object'">

        </template>
    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    props: {
        configurationItems: {
            type: Object,
            default: () => {
                return {
                    openType: 'userName',
                    openId: '',
                    renderIndex: 0, // 0: 纯文本，1：数组，2：显示工号
                }
            }
        }
    },
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem("user")),
            renderType: ['text', 'array', 'object'],
            corporateWeChat: false, // 企业微信转译
            dingdingPlatform: false, // 钉钉转译

            translationValue: '', // 文本转译值
            translationValArray: [], // 数组转译值
            translationValObject: {}, // 对象转译值

            configuration: {
                openType: 'userName',
                openId: '',
                renderIndex: 0,
            }, // 配置对象

            noRender: ['全部人员', '未分配'],
            dingdingOpenType: {
                userName: 'userName',
                departmentName: 'deptName',
            }
        }
    },
    computed: {},
    watch: {
        configurationItems: {
            handler(newVal, oldVal) {
                this.assignmentValue(newVal)
            },
        }
    },
    created() { },
    mounted() {
        this.dealWith()
    },
    methods: {
        dealWith() {
            // console.log(this.user)
            const { userNameNeedTranslate, dingdingUserid } = this.user
            if (userNameNeedTranslate) {
                this.corporateWeChat = true
                if (dingdingUserid) {
                    // this.dingdingPlatform = true
                    this.dingdingPlatform = false
                    this.corporateWeChat = false
                } else {
                    this.dingdingPlatform = false
                }
            } else {
                this.corporateWeChat = false
                this.dingdingPlatform = false
            }
            // console.log(this.corporateWeChat, this.dingdingPlatform, this.configurationItems)
            // console.log(this.corporateWeChat, '<=== 企业微信转译')
            // console.log(this.dingdingPlatform, '<=== 钉钉转译')
            this.assignmentValue(this.configurationItems)
        },
        assignmentValue(value) {
            const { openType, openId, renderIndex = 0 } = value
            this.configuration = { openType, openId, renderIndex }
            const type = this.renderType[renderIndex]

            switch (type) {
                case 'text':
                    this.translationValue = openId
                    break;
                case 'array':
                    this.translationValArray = openId.split(',')
                    break;
                case 'object':
                    this.translationValObject = openId
                    break;
                default:
                    break;
            }
            // console.log(this.translationValue, '<=== 转译文本')
            // if (this.user.dingdingUserid) {
            //     this.viewConfiguration()
            // }
        },
        viewConfiguration() {
            setTimeout(() => {
                window.DTOpenData.update(document.querySelectorAll('dt-open-data'));
            }, 100);
        }
    },
}
</script>
<style scoped lang='scss'>
.translation {
    width: auto;
    display: inline-block;
}
</style>