<template>
    <div class="hac-logs-main-body">
        <HcCardItem ui="hac-card-item" style="height: 68px;">
            <div class="hac-card-item-logs-header">
                <div class="left-box">
                    <div class="w-36">
                        <el-select v-model="searchForm.department" block clearable placeholder="选择部门" size="large">
                            <el-option label="研发部门" value="1"/>
                            <el-option label="业务部门" value="2"/>
                            <el-option label="人事部门" value="3"/>
                        </el-select>
                    </div>
                    <div class="w-36 ml-2">
                        <el-select v-model="searchForm.state" block clearable placeholder="选择人员" size="large">
                            <el-option label="张三" value="1"/>
                            <el-option label="李四" value="2"/>
                            <el-option label="王五" 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>
                </div>
                <div class="right-box">
                    <el-button size="large" type="warning" v-if="isEditState" @click="isEditState = false">
                        <HcIcon name="check-double"/>
                        <span>提交日志</span>
                    </el-button>
                    <el-button size="large" type="primary" v-else @click="isEditState = true">
                        <HcIcon name="add"/>
                        <span>写日志</span>
                    </el-button>
                </div>
            </div>
        </HcCardItem>
        <div class="mt-4 hac-logs-row-body">
            <div class="hac-logs-user-list-body">
                <HcCardItem scrollbar ui="hac-card-item">
                    <div class="hac-user-list-item">
                        <div class="label">昨天</div>
                        <div class="user-item">
                            <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
                            <div class="name">张三的日志</div>
                            <div class="state">已读</div>
                        </div>
                        <div class="user-item cur">
                            <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
                            <div class="name">张三的日志</div>
                            <div class="state">已读</div>
                        </div>
                        <div class="user-item">
                            <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
                            <div class="name">张三的日志</div>
                            <div class="state">已读</div>
                        </div>
                    </div>
                    <div class="hac-user-list-item">
                        <div class="label">2023-04-23 星期一</div>
                        <div class="user-item">
                            <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
                            <div class="name">张三的日志</div>
                            <div class="state">已读</div>
                        </div>
                        <div class="user-item">
                            <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
                            <div class="name">张三的日志</div>
                            <div class="state">已读</div>
                        </div>
                        <div class="user-item">
                            <img class="avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
                            <div class="name">张三的日志</div>
                            <div class="state">已读</div>
                        </div>
                    </div>
                </HcCardItem>
            </div>
            <div class="hac-logs-content-body">
                <HcCardItem scrollbar ui="hac-card-item">
                    <div class="hac-logs-user-info">
                        <img class="user-avatar" src="https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20220616/8ed37a156f2b177d69181c876892739f.jpg" alt=""/>
                        <div class="user-info">
                            <div class="name">张三的日志</div>
                            <div class="time">2023-02-12 21:08 添加</div>
                        </div>
                    </div>
                    <HcCardItem title="风险预警" ui="hac-bg-grey mt-12">
                        <el-input v-model="riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" :readonly="!isEditState" :placeholder="isEditState?'请输入文字说明':'无'" type="textarea"/>
                    </HcCardItem>

                    <div class="hac-card-title mt-4">
                        <span class="mr-5">今日工作内容</span>
                        <el-button _icon hc-btn size="small" type="primary" v-if="isEditState">
                            <HcIcon name="add"/>
                        </el-button>
                    </div>

                    <template v-if="isEditState">
                        <div class="mt-6 hac-log-card-item">
                            <HcCardItem ui="hac-bg-grey">
                                <template #header>
                                    <div class="ml-4">关联的任务</div>
                                </template>
                                <template #extra>
                                    <el-button size="default" type="primary" hc-btn @click="associatedTask">
                                        <HcIcon name="add"/>
                                        <span>关联任务</span>
                                    </el-button>
                                </template>
                                <HcTable :isIndex="false" :column="tableTaskColumn" :datas="tableTaskData">
                                    <template #key2="{row}">
                                        <el-input v-model="row.key2" placeholder="进度(%)"/>
                                    </template>
                                    <template #action="{row,index}">
                                        <el-button plain size="small" type="danger">
                                            <HcIcon name="close"/>
                                            <span>移除</span>
                                        </el-button>
                                    </template>
                                </HcTable>

                                <div class="title-label mt-6 mb-3">工作内容描述</div>
                                <el-input v-model="riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>

                                <el-divider class="title-label-divider" content-position="left" border-style="dashed">费用报销</el-divider>

                                <div class="hac-log-form-box">
                                    <el-form ref="formRef" inline :model="formModel" :rules="formRules">
                                        <el-form-item label="费用报销：" prop="key1" class="w-72">
                                            <el-select v-model="formModel.key1" block clearable placeholder="费用报销">
                                                <el-option label="审计费" value="1"/>
                                                <el-option label="招聘费" value="2"/>
                                                <el-option label="水电费" value="3"/>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="费用金额：" prop="key2" class="w-72">
                                            <el-input v-model="formModel.key2" placeholder="请输入费用金额（元）" />
                                        </el-form-item>
                                    </el-form>
                                </div>

                            </HcCardItem>
                            <div class="hac-log-angle-mark">1</div>
                        </div>
                        <div class="mt-6 hac-log-card-item">
                            <HcCardItem ui="hac-bg-grey">
                                <template #header>
                                    <div class="ml-4">关联的任务</div>
                                </template>
                                <template #extra>
                                    <el-button size="default" type="primary" hc-btn>
                                        <HcIcon name="add"/>
                                        <span>关联任务</span>
                                    </el-button>
                                </template>
                                <HcTable :isIndex="false" :column="tableTaskColumn" :datas="tableTaskData">
                                    <template #key2="{row}">
                                        <el-input v-model="row.key2" placeholder="进度(%)"/>
                                    </template>
                                    <template #action="{row,index}">
                                        <el-button plain size="small" type="danger">
                                            <HcIcon name="close"/>
                                            <span>移除</span>
                                        </el-button>
                                    </template>
                                </HcTable>

                                <div class="title-label mt-6 mb-3">工作内容描述</div>
                                <el-input v-model="riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>

                                <el-divider class="title-label-divider" content-position="left" border-style="dashed">费用报销</el-divider>

                                <div class="hac-log-form-box">
                                    <el-form ref="formRef" inline :model="formModel" :rules="formRules">
                                        <el-form-item label="费用报销：" prop="key1" class="w-72">
                                            <el-select v-model="formModel.key1" block clearable placeholder="费用报销">
                                                <el-option label="审计费" value="1"/>
                                                <el-option label="招聘费" value="2"/>
                                                <el-option label="水电费" value="3"/>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="费用金额：" prop="key2" class="w-72">
                                            <el-input v-model="formModel.key2" placeholder="请输入费用金额（元）" />
                                        </el-form-item>
                                    </el-form>
                                </div>

                            </HcCardItem>
                            <div class="hac-log-angle-mark">2</div>
                        </div>
                    </template>

                    <template v-else>
                        <div class="mt-6 hac-log-card-item">
                            <HcCardItem ui="hac-bg-grey">
                                <template #extra>
                                    <div class="hac-log-extra">
                                        <span class="text">所关联任务目前完成率：</span>
                                        <span class="rate">80%</span>
                                    </div>
                                </template>
                                <div class="hac-log-details-body">
                                    <div class="log-details-item">
                                        <div class="label">所属任务：</div>
                                        <div class="description">【任务内容描述xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            xxxxxxxxxxxxxxxxxxxxxxxxx】</div>
                                    </div>
                                    <div class="log-details-item">
                                        <div class="label">工作内容描述：</div>
                                        <div class="description">今日完成水泥混凝土试验记录表xxxxxxxxxxxxxxxxx</div>
                                    </div>
                                </div>
                            </HcCardItem>
                            <div class="hac-log-angle-mark">1</div>
                        </div>
                        <div class="mt-6 hac-log-card-item">
                            <HcCardItem ui="hac-bg-grey">
                                <template #extra>
                                    <div class="hac-log-extra">
                                        <span class="text">所关联任务目前完成率：</span>
                                        <span class="rate">80%</span>
                                    </div>
                                </template>
                                <div class="hac-log-details-body">
                                    <div class="log-details-item">
                                        <div class="label">所属任务：</div>
                                        <div class="description">【任务内容描述xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                            xxxxxxxxxxxxxxxxxxxxxxxxx】</div>
                                    </div>
                                    <div class="log-details-item">
                                        <div class="label">工作内容描述：</div>
                                        <div class="description">今日完成水泥混凝土试验记录表xxxxxxxxxxxxxxxxx</div>
                                    </div>
                                </div>
                            </HcCardItem>
                            <div class="hac-log-angle-mark">2</div>
                        </div>
                    </template>
                </HcCardItem>
            </div>
        </div>

        <!--关联任务-->
        <HcDialog bgColor="#ffffff" isToBody isTable isRowFooter :loading="taskModalLoading" :show="taskModal" title="关联任务" widths="62rem" @close="closeTaskClick">
            <template #header>
                <div class="header-box">
                    <span class="mr-5">关联的任务</span>
                    <span class="text-orange text-sm">选择当天日志所描述的任务</span>
                </div>
            </template>

            <HcTable :column="tableTaskColumn1" :datas="tableTaskData1" :loading="tableTaskLoading">
                <template #action="{row,index}">
                    <el-button plain size="small" type="primary" @click="row.isRelated = true" v-if="!row.isRelated">
                        <HcIcon name="link" :line="false"/>
                        <span>关联</span>
                    </el-button>
                    <el-button plain size="small" type="danger" @click="row.isRelated = false" v-else>
                        <HcIcon name="link-unlink-m" :line="false"/>
                        <span>取消</span>
                    </el-button>
                </template>
            </HcTable>
            <template #leftRowFooter>
                <el-button size="large" @click="closeTaskClick">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
                <el-button size="large" type="primary" @click="saveTaskClick">
                    <HcIcon name="check"/>
                    <span>确认关联</span>
                </el-button>
            </template>
            <template #rightRowFooter>
                <HcPages :pages="searchTaskForm" @change="pageTaskChange"/>
            </template>
        </HcDialog>

    </div>
</template>

<script setup>
import {ref} from "vue";

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

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
}

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

//风险预警
const riskWarning = ref('')

//当前状态，false查看模式，true写日志模式
const isEditState = ref(false)

//已关联的任务
const tableTaskColumn = [
    {key: 'key', name: '任务内容'},
    {key: 'key1', name: '状态', width: '120', align: 'center'},
    {key: 'key2', name: '进度(%)', width: '160'},
    {key: 'key3', name: '起止日期', width: '220', align: 'center'},
    {key: 'action', name: '操作', width: '90', align: 'center'},
]
const tableTaskData = ref([
    {id: 1, key: 'xxxxxxxxx', key1: '未完成', key2: '', key3: '2022-07-01~2027-04-12'},
    {id: 2, key: 'xxxxxxxxx', key1: '未完成', key2: '', key3: '2022-07-01~2027-04-12'},
])

//顶部表单数据
const formRef = ref(null)
const formModel = ref({key1: '', key2: ''})
const formRules = {
    key1: {
        required: true,
        trigger: 'blur',
        message: "请选择费用报销"
    },
    key2: {
        required: true,
        trigger: 'blur',
        message: "请输入费用金融"
    },
}

//关联任务弹窗
const taskModalLoading = ref(false)
const taskModal = ref(false)

//显示关联任务
const associatedTask = () => {
    taskModalLoading.value = false
    taskModal.value = true
}

//关联任务分页和搜索
const searchTaskForm = ref({current: 1, size: 20, total: 0})
const pageTaskChange = ({current, size}) => {
    searchTaskForm.value.current = current
    searchTaskForm.value.size = size
}

//关联任务表格
const tableTaskLoading = ref(false)
const tableTaskColumn1 = [
    {key: 'key1', name: '任务描述'},
    {key: 'key2', name: '任务起止日期', width: '220', align: 'center'},
    {key: 'key3', name: '状态', width: '120', align: 'center'},
    {key: 'action', name: '操作', width: '90', align: 'center'},
]
const tableTaskData1 = ref([
    {id: 1, key1: 'xxxxxxxxx', key2: '2022-07-01~2027-04-12', key3: '未完成'},
    {id: 2, key1: 'xxxxxxxxx', key2: '2022-07-01~2027-04-12', key3: '未完成'},
    {id: 3, key1: 'xxxxxxxxx', key2: '2022-07-01~2027-04-12', key3: '未完成'},
    {id: 4, key1: 'xxxxxxxxx', key2: '2022-07-01~2027-04-12', key3: '未完成'},
])

//关闭关联任务弹窗
const closeTaskClick = () => {
    taskModalLoading.value = false
    taskModal.value = false
}

//提交关联任务弹窗
const saveTaskClick = () => {
    taskModalLoading.value = false
    taskModal.value = false
}
</script>

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

<style lang="scss">
.hac-log-form-box .el-form .el-form-item {
    margin-bottom: 0;
    .el-form-item__error {
        display: none;
    }
}
</style>
