<template>
    <HcCard>
        <template #header>
            <div class="w-36">
                <el-select v-model="searchForm.orgDept" block clearable placeholder="选择部门" size="large">
                    <el-option label="暂无接口1" value="1"/>
                    <el-option label="暂无接口2" value="2"/>
                    <el-option label="暂无接口3" value="3"/>
                </el-select>
            </div>
            <div class="w-36 ml-2">
                <el-select v-model="searchForm.userId" block clearable placeholder="选择人员" size="large">
                    <el-option label="暂无接口1" value="1"/>
                    <el-option label="暂无接口2" value="2"/>
                    <el-option label="暂无接口3" value="3"/>
                </el-select>
            </div>
            <div class="w-36 ml-4">
                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
            </div>
            <div class="mx-2">~</div>
            <div class="w-36">
                <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
            </div>
            <div class="ml-4">
                <el-button size="large" type="primary" @click="searchClick">
                    <HcIcon name="search-2"/>
                    <span>搜索</span>
                </el-button>
            </div>
            <div class="ml-2">
                <el-button size="large" @click="resetClick">
                    <HcIcon name="close-circle"/>
                    <span>重置</span>
                </el-button>
            </div>
        </template>
        <template #extra>
            <el-button size="large" type="warning" v-if="isEditState" @click="submitLogsClick">
                <HcIcon name="check-double"/>
                <span>提交日志</span>
            </el-button>
            <el-button size="large" type="primary" v-else @click="editLogsClick">
                <HcIcon name="add"/>
                <span>写日志</span>
            </el-button>
        </template>
        <div class="hac-logs-main-body">
            <div class="hac-logs-user-list-body">
                <HcCardItem scrollbar>
                    <div class="hac-user-list-item" v-for="(item, key) in userList">
                        <div class="label">{{key}}</div>
                        <template v-for="items in item">
                            <div class="user-item" :class="userItemId.id === items.id?'cur':''" @click="userItemClick(items)">
                                <img class="avatar" :src="items?.headPicture || avatarPng" alt=""/>
                                <div class="name">{{items?.logTitle}}</div>
                                <div class="state">
                                    <span class="text-xl text-red mr-2">
                                        <HcIcon name="alarm-warning"/>
                                    </span>
                                    <span>{{items?.isRead === 0 ?'未读': '已读'}}</span>
                                </div>
                            </div>
                        </template>
                    </div>
                </HcCardItem>
            </div>
            <div class="hac-logs-content-body" v-loading="logLoading">
                <HcLogsContent :data="logForm" ref="logsRef" v-if="isEditState"/>
                <HcLogsContent :data="logDetail" :edit="false" v-else/>
            </div>
        </div>
    </HcCard>
</template>

<script setup>
import {onActivated, ref} from "vue";
import logsApi from "~api/task/logs";
import {useAppStore} from "~src/store";
import {getObjValue} from "js-fast-way";
import HcLogsContent from "./components/logs-content.vue";
import avatarPng from '~src/assets/images/avatar.png';
import dayjs from 'dayjs';

const useAppState = useAppStore()
const userInfo = ref(useAppState.getUserInfo);

// 调用时机为首次挂载, 以及每次从缓存中被重新插入时
onActivated(() => {
    isEditState.value = false
    getLogList()
})

//搜索表单
const searchForm = ref({orgDept: null, userId: null, startTime: null, endTime: null})

//搜索
const searchClick = () => {
    if (!isEditState.value) {
        getLogList()
    } else {
        window.$message?.warning('请先提交日志或退出填写日志状态')
    }
}

//重置
const resetClick = () => {
    searchForm.value = {}
}

//日志填报列表查询
const userList = ref({})
const getLogList = async () => {
    const {error, code, data, msg} = await logsApi.getLogList(searchForm.value)
    //判断状态
    if (!error && code === 200) {
        const res = getObjValue(data)
        userList.value = res
        //默认选择第一个
        Object.keys(res).forEach((key, index) => {
            if (index === 0) {
                userItemId.value = res[key][0]
            }
        })
        getLogDetail()
    } else {
        userList.value = {}
        userItemId.value = {}
        window.$message?.error(msg)
    }
}

//用户列表点击
const userItemId = ref({})
const userItemClick = (item) => {
    if (!isEditState.value) {
        userItemId.value = item
        getLogDetail()
    } else {
        window.$message?.warning('请先提交日志或退出填写日志状态')
    }
}

//日志填报详情
const logDetail = ref({})
const getLogDetail = async () => {
    const item = userItemId.value
    const {error, code, data, msg} = await logsApi.getLogDetail({
        id: item.id
    })
    //判断状态
    if (!error && code === 200) {
        logDetail.value = getObjValue(data)
    } else {
        logDetail.value = {}
        window.$message?.error(msg)
    }
}

//日志填报表单
const logForm = ref({
    headPicture: '',
    logTitle: '',
    createTime: '',
    riskWarning: '',
    workDesc: '',
    expenseReimbursementAmount: '',
})

//当前状态，false查看模式，true写日志模式
const isEditState = ref(false)
const editLogsClick = () => {
    const {real_name, avatar} = userInfo.value
    isEditState.value = true
    logForm.value.headPicture = avatar || avatarPng
    logForm.value.logTitle = real_name + '的日志'
    logForm.value.createTime = dayjs().format('YYYY-MM-DD')
}

const logsRef = ref(null)
const logLoading = ref(false)

const submitLogsClick = async () => {
    logLoading.value = true
    const form = logsRef.value?.getLogForm()
    //移除不必要的字段
    delete form.createTime
    delete form.headPicture
    delete form.logTitle
    //发起请求
    const {error, code, msg} = await logsApi.setLogSubmit(form)
    //判断状态
    logLoading.value = false
    if (!error && code === 200) {
        isEditState.value = false
        getLogList()
    } else {
        window.$message?.error(msg)
    }
}
</script>

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