<template>
    <hc-new-dialog is-table widths="1200px" :show="isShow" title="审批流程" :padding="false" :footer="false" @close="addModalClose">
        <div class="hc-flex h-full">
            <div class="relative h-full w-240px">
                <hc-body class="hc-task-body-card-dialog" padding="10px" scrollbar>
                    <el-timeline class="hc-time-line">
                        <template v-for="(item, index) in flowListTask" :key="index">
                            <el-timeline-item :class="Number(item.status) === 2 ? 'success' : 'primary'" size="large">
                                <div class="timeline-item-icon">
                                    <hc-icon v-if="Number(item.status) === 2" class="check-icon" name="check" />
                                </div>
                                <template v-if="item.name">
                                    <div class="reply-name">{{ item.name }}</div>
                                    <div class="reply-time">{{ item.date }}</div>
                                    <div class="reply-content" v-html="item.flowValue" />
                                </template>
                                <template v-if="item.taskBranchName">
                                    <div class="reply-name">
                                        <span>{{ item.taskBranchName }}</span>
                                        <hc-icon v-if="Number(item.taskBranchType) === 2" name="links" class="ml-2" />
                                        <hc-icon v-if="Number(item.taskBranchType) === 1" name="exchange-2" class="ml-2" />
                                    </div>
                                    <div v-for="(item1, index1) in item.userList" :key="index1" class="reply-user-list">
                                        <div class="timeline-item-icon">
                                            <hc-icon v-if="Number(item1.status) === 2" class="check-icon" name="check" />
                                        </div>
                                        <div class="reply-name">{{ item1.name }}</div>
                                        <div class="reply-time">{{ item1.date }}</div>
                                        <div class="reply-content" v-html="item1.flowValue" />
                                    </div>
                                </template>
                            </el-timeline-item>
                        </template>
                    </el-timeline>
                </hc-body>
            </div>
            <div class="relative h-full flex-1">
                <hc-body>
                    <hc-pdfs :src="pdfUrl" />
                </hc-body>
            </div>
        </div>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getArrValue } from 'js-fast-way'
import mainApi from '~api/tasks/hc-data'

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

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

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
const taskId = ref(props.ids)
watch(() => props.ids, (id) => {
    taskId.value = id
}, { deep:true })

//监听
watch(isShow, (val) => {
    if (val) {
        getDataApi()
    }
})

const pdfUrl = ref('')
const flowListTask = ref([])
const getDataApi = async () => {
    const { data } = await mainApi.getDetail(taskId.value)
    const tasks = getArrValue(data?.taskProcessInfo)
    tasks.forEach(item => {
        item.status = item.taskBranchStatus || item.status
    })
    flowListTask.value = tasks
    pdfUrl.value = data?.pdfUrl
}

//关闭弹窗
const addModalClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style lang="scss">
.hc-task-body-card-dialog {
    background: #f7f7f7;
    .el-scrollbar__bar.is-vertical {
        right: -8px;
    }
    .hc-task-body-tip {
        color: red;
    }
    .reply-user-list {
        position: relative;
        padding: 10px 10px 10px 20px;
    }
}
</style>
