<template>
    <hc-new-dialog v-model="isShow" ui="hc-task-notes-dialog" is-table widths="42rem" title="批注信息" @close="cancelClick">
        <div class="hc-task-notes-body">
            <div v-if="tableNotes.length > 0" class="notes-content">
                <el-scrollbar>
                    <div v-for="item in tableNotes" :key="item.id" class="task-notes-item">
                        <div class="header">
                            <div class="col">批注人：{{ item.userName }}</div>
                            <div class="col">批注时间：{{ item.createTime }}</div>
                        </div>
                        <div class="content">
                            <div class="col">批注内容：</div>
                            <div class="text">{{ item.comment }}</div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
            <div v-else class="notes-content">
                <hc-no-data />
            </div>
            <div class="notes-action">
                <el-input v-model="formNotes" type="textarea" :disabled="!isEdits" resize="none" placeholder="批注信息" />
            </div>
        </div>
        <template #footer>
            <div class="hc-task-notes-footer">
                <el-button @click="cancelClick">取消批注</el-button>
                <el-button type="primary" :loading="confirmLoading" :disabled="!isEdits" @click="confirmClick">确定批注</el-button>
            </div>
        </template>
    </hc-new-dialog>
</template>

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

const props = defineProps({
    info: {
        type: Object,
        default: () => ({}),
    },
    table: {
        type: Object,
        default: () => ({}),
    },
    isEdit: {
        type: Boolean,
        default: true,
    },
})

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

const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId || '')
const contractId = ref(useAppState.getContractId || '')

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
const taskInfo = ref(props.info)
const tableInfo = ref(props.table)

//监听可否编辑
const isEdits = ref(props.isEdit)
watch(() => props.isEdit, (val) => {
    isEdits.value = val
}, { immediate: true, deep: true })

//监听数据
watch(() => [
    props.table,
    props.info,
], ([table, row]) => {
    taskInfo.value = row
    tableInfo.value = table
}, { deep: true })

//监听显示
watch(isShow, (val) => {
    if (val) {
        setTaskInfo()
    }
})

//设置任务信息
const tableNotes = ref([])
const setTaskInfo = async () => {
    const { data } = await mainApi.taskCommentList({
        projectId: projectId.value,
        contractId: contractId.value,
        taskId: taskInfo.value.id,
        dataId: tableInfo.value.id,
    })
    tableNotes.value = getArrValue(data)
}

//确认批准
const formNotes = ref('')
const confirmLoading = ref(false)
const confirmClick = async () => {
    if (!formNotes.value) {
        window.$message.error('请先填写批注信息')
        return
    }
    confirmLoading.value = true
    const { error, msg, code } = await mainApi.taskCommentSubmit({
        projectId: projectId.value,
        contractId: contractId.value,
        taskId: taskInfo.value.id,
        dataId: tableInfo.value.id,
        comment: formNotes.value,
    })
    confirmLoading.value = false
    if (!error && code === 200) {
        window.$message.success('批注完成')
        emit('finish')
        cancelClick()
    } else {
        window.$message.error(msg ?? '批注失败')
    }
}

//取消审批
const cancelClick = () => {
    isShow.value = false
    formNotes.value = ''
    emit('close')
}
</script>

<style lang="scss" scoped>
.hc-task-notes-body {
    position: relative;
    height: 100%;
    .notes-content {
        position: relative;
        height: calc(100% - 65px);
        .task-notes-item {
            position: relative;
            border-radius: 4px;
            margin-bottom: 12px;
            padding: 10px;
            border: 1px solid #dad8d8;
            .header {
                position: relative;
                display: flex;
                align-items: center;
                margin-bottom: 12px;
                .col + .col {
                    margin-left: 50px;
                }
            }
            .content {
                position: relative;
                display: flex;
                align-items: start;
                .text {
                    position: relative;
                    flex: 1;
                }
            }
        }
    }
    .notes-action {
        position: relative;
        padding-top: 12px;
        border-top: 1px solid #e5e5e5;
    }
}
.hc-task-notes-footer {
    position: relative;
    text-align: center;
}
</style>

<style lang="scss">
.el-overlay-dialog .el-dialog.hc-task-notes-dialog {
    --el-dialog-margin-top: 10vh;
    height: 80vh;
}
.hc-task-notes-body .notes-content .el-scrollbar__bar.is-vertical {
    right: -10px;
}
</style>
