<template>
    <div :class="ui" class="tasks-user-box">
        <div class="tag-user-list" @click="userShowModal">
            <template v-for="(item, index) in fixedData" :key="index">
                <el-tag>{{ item.name }}</el-tag>
                <hc-icon v-if="(fixedData.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
            </template>
            <div v-if="fixedData.length <= 0" class="tasks-placeholder">点击这里选择任务</div>
        </div>
        <!-- 选择任务人 -->
        <HcUserModal v-model="isUserModalShow" :data="fixedData" :datas="dataInfo" @finish="fixedUserFinish" />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { deepClone, getArrValue, getObjValue } from 'js-fast-way'
import HcUserModal from './modules/user-modal.vue'

//参数
const props = defineProps({
    ui: {
        type: String,
        default: '',
    },
    data: {
        type: Array,
        default: () => ([]),
    },
    datas: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['change'])

//监听基础数据
const dataInfo = ref(props.datas)
watch(() => props.datas, (data) => {
    dataInfo.value = getObjValue(data)
}, { deep: true, immediate: true })

//监听用户数据
const fixedData = ref(props.data)
watch(() => props.data, (data) => {
    fixedData.value = getArrValue(data)
}, { deep: true, immediate: true })

//展开弹窗
const isUserModalShow = ref(false)
const userShowModal = () => {
    isUserModalShow.value = true
}

//选择完成
const fixedUserFinish = (data) => {
    isUserModalShow.value = false
    const res = getArrValue(data)
    fixedData.value = res
    const arr = deepClone(res)
    for (let i = 0; i < arr.length; i++) {
        const { userList } = arr[i]
        let newUserId = []
        for (let j = 0; j < userList.length; j++) {
            newUserId.push(userList[j].userId)
        }
        arr[i].userIds = newUserId.join(',')
    }
    emit('change', arr)
}
</script>

<style lang="scss">
@import './style.scss';
</style>
