<template>
    <view>
        <uni-popup ref="work_popup" background-color="#fff" type="center" borderRadius="10px">
            <view
                style="height: 30px;line-height: 30px; text-align: center; padding: 10px; font-size: 15px; font-weight: 600;">
                <text>{{ detail.work?.name }}</text>
            </view>
            <view class="popup-content" style="padding: 10px;min-height: 150px;width: 80vw;">
                <view style="padding:15px;font-size: 13px;">
                    <rich-text :nodes="parseHTML(detail.work?.desc)"></rich-text>
                </view>
            </view>
            <view>
                <button size="default"
                    style="color:#ffffff;background-color:#007aff;border-color:#007aff;font-size: 24rpx;width:120rpx; margin:20rpx; float: right;"
                    hover-class="is-hover" @click="closePopup()">确认</button>
            </view>
        </uni-popup>
    </view>
</template>

<script lang="ts" setup>
import {
    getWorkDetail,
    getWorkUndoneCount,
    submitWork
} from '@/api/project-center/work'
import { useEmitt } from '@/logics/mitt/useEmitt';
import { WorkDetailResParams } from '@/types/work';
import { parseHTML } from '@/utils'

const workId = ref()
const work_popup = ref()
const { emitter } = useEmitt()

const detail = reactive<{ work?: WorkDetailResParams }>({
    work: undefined
}) // 详情

/**
 * 显示级别modal
 * @param type modal 类型
 * @param item
 */
const showWorkModal = async (id: string) => {
    const workDetail = await getWorkDetail(id)
    detail.work = workDetail
    if (workDetail.status === 2 && workDetail.process_type === 1) {
        return
    }
    let type = 0 // 弹出确认框
    if (workDetail.process_type === 1 && workDetail.form) {
        type = 1
    }
    if (workDetail.process_type === 2) {
        type = 2
    }
    workId.value = workDetail.id
    if (type === 0) {
        showConfirmModal(workDetail)
    }
    if (type === 1) {
        uni.navigateTo({ url: `/pages/project/components/form-work?id=${workDetail.id}` })
        // modalTitle.value = workDetail.form?.title
        // schema.value = workDetail.form?.schema || {}
        // formData.value = getDefaultFormState(schema.value, {}, schema.value, true)
        // visibleWorkModal.value = true
    }
    if (type === 2) {
        showToBeReadModal(workDetail)
    }
}


/**
 * 当不需要提交表单，且为待办时，生成确认框。
 * @param detail
 */
const showConfirmModal = async (detail: WorkDetailResParams) => {
    uni.showModal({
        title: detail.name,
        content: `确认${detail.name}吗？`,
        success: async (res: { confirm: boolean }) => {
            const { confirm } = res;
            if (confirm) {
                await submitWork({ id: detail.id! })
                emitter.emit('get_project_list')
                emitter.emit('get_project_log')
                emitter.emit('get_task_log')
                uni.showToast({
                    icon: 'success',
                    title: '操作成功'
                })
                setTimeout(() => {
                    emitter.emit('get_task_list')
                    emitter.emit('get_task_detail')
                    emitter.emit('get_project_detail', true)
                    // resetWorkUndoneCount()
                }, 1500)
            }
        }
    })
    //   const title = {
    //     setup() {
    //       return () => h('strong', detail.name)
    //     }
    //   }
    //   const ModalContent = {
    //     setup() {
    //       return () =>
    //         h('span', { style: 'margin: 10px;' }, [
    //           h('span', `确认`),
    //           h('strong', `${detail.name}`),
    //           h('span', ` 吗？`)
    //         ])
    //     }
    //   }
    //   Modal.warning({
    //     title: () => h(title),
    //     content: () => h(ModalContent),
    //     alignCenter: true,
    //     titleAlign: 'start',
    //     mask: true,
    //     maskClosable: false,
    //     draggable: true,
    //     escToClose: true,
    //     width: 380,
    //     simple: true,
    //     hideCancel: false,
    //     onOk: async () => {
    //       try {
    //         await submitWork({ id: detail.id! })
    //         emitter.emit('get_project_list')
    //         emitter.emit('get_project_log')
    //         emitter.emit('get_task_log')
    //         Message.success('操作成功')
    //         setTimeout(() => {
    //           emitter.emit('get_task_list')
    //           emitter.emit('get_task_detail')
    //           emitter.emit('get_project_detail', true)
    //           resetWorkUndoneCount()
    //         }, 1500)
    //       } catch (_e) {
    //         loading.value = false
    //       }
    //     }
    //   })
}

// 显示阅读对话框
const showToBeReadModal = async (detail: WorkDetailResParams) => {
    work_popup.value?.open()
}

const closePopup = async () => {
    work_popup.value?.close()
    if (detail.work?.status === 2) {
        return
    }
    await submitWork({ id: detail.work?.id! })
    uni.showToast({
        icon: 'success',
        title: '操作成功'
    })
    setTimeout(() => {
        emitter.emit('get_project_list')
        emitter.emit('get_project_log')
        emitter.emit('get_task_log')
        emitter.emit('get_work_list')
        emitter.emit('get_project_detail', true)
    }, 1500)
}

defineExpose({ showWorkModal }) // 暴露子组件的方法或者数据


// const finalyDescText = ((htmlString: string) => {
//     let charsArray: any = [];

//     const handler = {
//          start :function (tag: string) {
//         const element = {
//             name: tag,
//             children: [],
//             attrs: {}
//         }
//         charsArray.push(element);
//     }
//         chars: function (text: string) {
//             charsArray.push(text);
//         }
//     };
//     if (detail.work?.desc) {
//         htmlParser(detail.work?.desc, handler);
//     }
//     return charsArray
// })

onMounted(() => {
    // console.log(htmlParser('<div>test</div>', {}))
})
</script>