<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 class="notes-content">
                <el-scrollbar>
                    <div v-for="item in 10" class="task-notes-item">
                        <div class="header">
                            <div class="col">批注人：系统管理员</div>
                            <div class="col">批准时间：2023-12-18</div>
                        </div>
                        <div class="content">
                            <div class="col">批注内容：</div>
                            <div class="text">内容</div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
            <div class="notes-action">
                <el-input v-model="formNotes" type="textarea" resize="none" placeholder="批注信息" />
            </div>
        </div>
        <template #footer>
            <div class="hc-task-notes-footer">
                <el-button @click="cancelClick">取消批注</el-button>
                <el-button type="primary" @click="confirmClick">确定批注</el-button>
            </div>
        </template>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    option: {
        type: Object,
        default: () => ({}),
    },
})

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

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

//监听
const options = ref(props.row)
const taskInfo = ref({})

watch(() => props.option, (val) => {
    options.value = val
}, { immediate: true, deep: true })

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

//设置任务信息
const setTaskInfo = async () => {

}

const formNotes = ref('')


const confirmClick = () => {

}

//取消审批
const cancelClick = () => {
    isShow.value = false
    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>
