<template>
    <lay-container fluid="true" style="padding: 20px">
        <lay-row :space="10">
            <lay-col :md="24">
                <lay-card>
                    <lay-form style="margin-top: 20px">
                        <lay-row>
                            <lay-col :md="5">
                                <lay-form-item label="年度：" label-width="50">
                                    <lay-date-picker type="year" v-model="searchAccount" placeholder="请选择"
                                        allow-clear></lay-date-picker>
                                </lay-form-item>
                            </lay-col>
                            <lay-col :md="4">
                                <lay-form-item label-width="0">
                                    <lay-button type="primary" @click="toSearch">查询</lay-button>
                                    <lay-button @click="toReset">重置</lay-button>
                                </lay-form-item>
                            </lay-col>
                        </lay-row>
                    </lay-form>
                </lay-card>
            </lay-col>
            <lay-col :md="24">
                <lay-card>
                    <div style="padding: 10px">
                        <span style="font-size: 18px;vertical-align: center;margin-right: 20px">月度评价填报</span>
                        <lay-button type="primary" @click="addShow = true" size="sm">新增自我评价</lay-button>
                    </div>
                    <lay-table :columns="columns" :dataSource="dataSource" :even="true" height="500px"
                        size="lg">
                        <template #group_evaluation="scope">
                            <span>{{ scope.row.group_evaluation? scope.row.group_evaluation : '未评价'}}</span>
                        </template>
                        <template #operator="scope">
                            <span style="cursor: pointer;color: #009688" @click="toDetail(scope.row)">详情</span>
                        </template>
                    </lay-table>
                </lay-card>
            </lay-col>
        </lay-row>
        <lay-layer v-model="addShow" title="月度评价填报" :shade="true" :area="['500px', '500px']"
            :btn="addIsInfo == 1 ? addButton : ''">
            <lay-container fluid="true" style="padding: 20px">
                <div style="margin-bottom: 20px">填报月份：{{ month }}月</div>
                <lay-form :pane="true">
                    <lay-form-item label="自评内容" prop="desc">
                        <lay-textarea :rows="10" placeholder="请输入评价内容"
                            v-model="addModel.self_evaluation"></lay-textarea>
                    </lay-form-item>
                </lay-form>
            </lay-container>
        </lay-layer>
        <lay-layer v-model="infoShow" title="月度评价详情" :shade="true" :area="['700px', '700px']">
            <lay-container fluid="true" style="padding: 20px">
                <div style="margin-bottom: 20px">填报月份：{{ infoData.term }}月</div>
                <div style="margin-bottom: 20px">考评对象：{{ infoData.nickname }}</div>
                <div style="margin-bottom: 20px">评价时间：{{ infoData.selftime }}</div>
                <div style="margin-bottom: 20px">我的评价：{{ infoData.self_evaluation }}</div>
                <div style="margin-bottom: 20px">科室：{{ infoData.group_name }}</div>
                <div style="margin-bottom: 20px">科室评价：{{ infoData.group_evaluation? infoData.group_evaluation : '未评价' }}</div>
            </lay-container>
        </lay-layer>
    </lay-container>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { layer } from '@layui/layer-vue'
import {
    monthlyEvaluation, monthlyEvaluationCreate
} from '../../api/module/home'
import { useUserStore } from "@/store/user";
import dayjs from "dayjs";
const addIsInfo = ref(1);
const dataSource = ref([]);
const addShow = ref(false);
const month = ref(dayjs().format('MM'));
const infoShow = ref(false);
const infoData = ref({});
const toDetail = (row: any) => {
    console.log(row)
    infoShow.value = true;
    infoData.value = row;
}
const addModel = reactive({
    self_evaluation: '',
    type: 1
})
onMounted(() => {
    getMonthlyEvaluation();
    //getMonthlyContent();
})
const getMonthlyEvaluation = () => {
    monthlyEvaluation({ 'type': 1 }).then((res) => {
        console.log(res)
        if (res.code == 1) {
            dataSource.value = res.data;
        }
    })
}
const searchAccount = ref(dayjs().year())

function toReset() {
    searchAccount.value = dayjs().year()
}
const columns = [
    {
        title: '月度',
        width: '120px',
        align: 'center',
        key: 'term'
    },
    {
        title: '考评对象',
        width: '150px',
        align: 'center',
        key: 'nickname'
    },
    {
        title: '评价时间',
        width: '250px',
        align: 'center',
        key: 'selftime'
    },
    {
        title: '我的评价',
        key: 'self_evaluation',
        ellipsisTooltip: true,
        align: 'center',
    },{
        title: '科室',
        key: 'group_name',
        align: 'center',
    }, {
        title: '科室评价',
        key: 'group_evaluation',
        customSlot: 'group_evaluation',
        ellipsisTooltip: true,
        align: 'center',
    },
    {
        title: '操作',
        width: '180px',
        customSlot: 'operator',
        key: 'operator',
        align: 'center',
        fixed: 'right'
    }
]
const addButton = ref([
    {
        text: "确认",
        callback: async () => {
            var res = await monthlyEvaluationCreate(addModel);
            console.log(res)
            if (res.code == 1) {
                layer.msg(res.msg)
                addShow.value = false;
                getMonthlyEvaluation();
            } else {
                layer.msg(res.msg, { icon: 2 })
            }
        }
    },
    {
        text: "取消",
        callback: () => {
            addShow.value = false;
        }
    }
])
</script>
<style>
.layui-table-header .layui-table-cell {
    background-color: #ECF8FA !important;
}
</style>