<template>
    <HcCardItem scrollbar>
        <div class="hac-logs-user-info">
            <img class="user-avatar" :src="logData?.headPicture || avatarPng" alt=""/>
            <div class="user-info">
                <div class="name">{{logData?.logTitle}}</div>
                <div class="time">{{logData?.createTime}}{{isEditState?'':' 添加'}}</div>
            </div>
        </div>
        <div class="hc-logs-content-item">
            <div class="title">风险预警</div>
            <div class="content">
                <el-input v-model="logData.riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" :readonly="!isEditState" :placeholder="isEditState?'请输入文字说明':'无'" type="textarea"/>
            </div>
        </div>

        <div class="hc-logs-content-item" v-if="!isEditState">
            <div class="title">今日工作内容</div>
            <div class="warning-tip">警告：有三条任务已超期逾期未完成，请及时完成！</div>
            <div class="content">
                <HcTable :isIndex="false" :column="taskColumn" :datas="logData?.taskList ?? []" :row-style="tableRowStyle"/>
            </div>
        </div>

        <div class="hc-logs-content-item" v-if="isEditState">
            <div class="title">今日工作范围勾选</div>
            <div class="extra-tip">提示：仅勾当日的工作内容，如果勾选项任务已完成，则点击【变更已完成】进行提交部门领导审批</div>
            <div class="content">
                <HcTable :isIndex="false" isCheck :column="tableColumn" :datas="tableData" @selection-change="tableSelectionChange">
                    <template #action="{row, index}">
                        <el-button size="small" type="primary" @click="statusClick(row)">{{row.statusName === '未完成' ? '变更已完成': '已完成' }}</el-button>
                    </template>
                </HcTable>
            </div>
        </div>

        <div class="hc-logs-content-item">
            <div class="title">工作内容描述</div>
            <div class="content">
                <el-input v-model="logData.workDesc" :autosize="{ minRows: 5, maxRows: 8 }" :readonly="!isEditState" :placeholder="isEditState?'请输入工作内容描述':'无'" type="textarea"/>
            </div>
        </div>

        <HcListItem title="差旅报销:" isCenter class="mt-8" v-if="logData?.expenseReimbursementAmount > 0">
            <el-input class="w-72" v-model="logData.expenseReimbursementAmount" :readonly="!isEditState" placeholder="报销金额(元)"/>
        </HcListItem>
    </HcCardItem>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import logsApi from "~api/task/logs";
import {deepClone, getArrValue} from "js-fast-way"
import avatarPng from '~src/assets/images/avatar.png';

//参数
const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    },
    edit: {
        type: Boolean,
        default: true
    }
})

//变量
const isEditState = ref(props.edit);
const logData = ref(props.data);

//渲染完成
onMounted(() => {
    if (isEditState.value) {
        getTableData()
    }
})

//监听
watch(() => [
    props.edit,
], ([edit]) => {
    isEditState.value = edit
    if (edit) {
        getTableData()
    }
})

//深度监听
watch(() => [
    props.data,
], ([data]) => {
    logData.value = data
}, {deep: true})

//表格
const taskColumn = [
    {key: 'taskDesc', name: '任务内容'},
    {key: 'startAndEndDate', name: '起止日期', width: '280', align: 'center'},
    {key: 'statusName', name: '状态', width: '160', align: 'center'},
]

//表格行样式
const tableRowStyle = ({row}) => {
    if (row.statusName === '未完成') {
        return {
            '--el-fill-color-lighter': 'rgba(189, 49, 36, 0.79)',
            '--el-table-row-hover-bg-color': 'var(--el-fill-color-lighter)',
            'background-color': 'var(--el-fill-color-lighter)',
            'color': 'white'
        }
    }
}

//表格
const tableColumn = [
    {key: 'taskDesc', name: '任务内容'},
    {key: 'action', name: '操作', width: 130, align: 'center'}
]
const tableData = ref([])
const getTableData = async () => {
    const {error, code, data, msg} = await logsApi.getLogTaskList()
    //判断状态
    if (!error && code === 200) {
        tableData.value = getArrValue(data)
    } else {
        tableData.value = []
        window.$message?.error(msg)
    }
}

//多选事件
const tableSelectionChange = (rows) => {
    window.$message?.error('因为开发时，没有测试数据，所以暂时没做相关功能')
}

//变更状态
const statusClick = async (row) => {
    const {error, code, msg} = await logsApi.setLogTaskComplete({
        taskId: row.id,
        logId: ''
    })
    //判断状态
    if (!error && code === 200) {
        window.$message?.success(msg)
        getTableData()
    } else {
        window.$message?.error(msg)
    }
}

//获取表单数据
const getLogForm = () => {
    return deepClone(logData.value)
}

// 暴露出去
defineExpose({
    getLogForm
})
</script>

<style lang="scss" scoped>
@import "~src/styles/task/logs.scoped.scss";
</style>
