<template>
    <n-spin :show="dataLoading">
        <n-space justify="center">
            <h1>其他职能部门网格化工作考核细则（以季度为考核周期）</h1>
        </n-space>
        <n-space class="container" vertical>
            <n-space class="search" vertical>
                <n-grid :cols="7" :x-gap="10">
                    <n-grid-item>
                        <n-select placeholder="请选择机构" v-model:value="search.select.department.value"
                            :options="search.select.department.options" :clearable="true" />
                    </n-grid-item>
                    <n-grid-item>
                        <n-input v-model:value="search.input.keywords" type="text" placeholder="姓名|手机号" />
                    </n-grid-item>
                    <n-grid-item>
                        <n-select placeholder="请选择年份" v-model:value="search.select.year.value"
                            :options="search.select.year.options" />
                    </n-grid-item>
                    <n-grid-item>
                        <n-select placeholder="请选择月份" v-model:value="search.select.month.value"
                            :options="search.select.month.options" />
                    </n-grid-item>
                    <n-grid-item>
                        <n-space>
                            <n-button type="primary" @click="onSearchClick">搜索</n-button>
                            <n-button type="default" @click="onSaveClick">保存</n-button>
                            <n-button type="info" @click="onExportClick" :disabled="btnExportDisabled">导出</n-button>
                        </n-space>
                    </n-grid-item>
                </n-grid>
            </n-space>
            <n-space class="body">
                <n-data-table size="small" :columns="table.columns" :data="table.data" :bordered="true" :single-line="false"
                    :min-height="table.minHeight" :max-height="table.maxHeight" :scroll-x="table.scrollX" />
            </n-space>
        </n-space>
    </n-spin>
    <n-modal preset="dialog" style="width: 600px" :title="`【${modal.scoring.userName}】${modal.scoring.title}打分`"
        :show="modal.scoring.show" :show-icon="false" :mask-closable="true" :closable="false"
        :on-update-show="onScroingCloseClick">
        <scoring :row-key="modal.scoring.rowKey" :row-index="modal.scoring.rowIndex" :score="modal.scoring.score"
            :reason="modal.scoring.reason" :min-score="modal.scoring.minScore" :max-score="modal.scoring.maxScore"
            @confirm="onScroingConfimClick" />
    </n-modal>
</template>

<script>
import { h } from 'vue';
import {
    NSpace,
    NGrid,
    NGridItem,
    NSelect,
    NRadio,
    NInput,
    NButton,
    NDataTable,
    NModal,
    NSpin,
    useMessage,
    useDialog,
} from 'naive-ui';
import Scoring from '../common/Scoring.vue';
import { listYear, listMonth, getCurrentYear, getCurrentMonth, download } from '../utils/common'

export default {
    name: 'Znbm',
    components: {
        NSpace,
        NGrid,
        NGridItem,
        NSelect,
        NRadio,
        NInput,
        NButton,
        NDataTable,
        NModal,
        NSpin,

        Scoring,
    },
    data() {
        let vueSelf = this;
        return {
            message: useMessage(),
            dialog: useDialog(),
            dataLoading: false,
            btnExportDisabled: false,
            search: {
                userId: null,
                userName: null,
                select: {
                    department: {
                        value: null,
                        options: [
                            { label: '社区', value: 'sq' }
                        ]
                    },
                    year: {
                        value: null,
                        options: [
                            { label: '2023年', value: '2023' }
                        ]
                    },
                    month: {
                        value: null,
                        options: [
                            { label: '1月', value: '1' }
                        ]
                    }
                },
                radio: {
                    level: {
                        value: 5,
                    }
                },
                input: {
                    keywords: ''
                }
            },
            table: {
                minHeight: 300,
                maxHeight: 300,
                scrollX: 900,
                columns: [
                    {
                        align: 'center',
                        title: '序号',
                        key: 'A',
                        keyName: 'key',
                        fixed: 'left',
                        width: 60
                    },
                    {
                        align: 'center',
                        title: '姓名',
                        key: 'B',
                        keyName: 'name',
                        fixed: 'left',
                        width: 140
                    },
                    {
                        align: 'center',
                        title: '案件受理数量',
                        children: [
                            {
                                align: 'center',
                                title: '案件办理得分与奖励金额',
                                children: [
                                    {
                                        align: 'center',
                                        title: '案件总数',
                                        key: 'C',
                                        keyName: 'caseCount',
                                        width: 60,
                                    },
                                    {
                                        align: 'center',
                                        title: '办结并验收',
                                        key: 'D',
                                        keyName: 'handleCheck',
                                        width: 60,
                                    },
                                    {
                                        align: 'center',
                                        title: '办结未验收',
                                        key: 'E',
                                        keyName: 'handleUnCheck',
                                        width: 60,
                                    },
                                    {
                                        align: 'center',
                                        title: '案件积分奖励（元）',
                                        key: 'F',
                                        keyName: 'reward',
                                        width: 60,
                                    },
                                    {
                                        align: 'center',
                                        title: '得分',
                                        key: 'G',
                                        keyName: 'score',
                                        width: 60,
                                    },
                                ]
                            },
                            {
                                align: 'center',
                                title: '案件受理数量及过程质量',
                                children: [
                                    {
                                        align: 'center',
                                        title: '未在规定的时限内退单，影响处置时效',
                                        key: 'H',
                                        keyName: 'unBackError',
                                        width: 60,
                                        render(row, index) {
                                            return h('a', {
                                                href: 'javascript:void(0);',
                                                onClick() {
                                                    vueSelf.onUnBackErrorClick(row, index);
                                                }
                                            }, row.H);
                                        }
                                    },
                                    {
                                        align: 'center',
                                        title: '自行上报案件没完成',
                                        key: 'I',
                                        keyName: 'selfReportUnComplete',
                                        width: 60,
                                    },
                                    {
                                        align: 'center',
                                        title: '自行上报案件没完成扣分',
                                        key: 'J',
                                        keyName: 'selfReportUnCompleteDeduct',
                                        width: 60,
                                    },
                                    {
                                        align: 'center',
                                        title: '其他情况',
                                        key: 'K',
                                        keyName: 'others',
                                        width: 60,
                                        render(row, index) {
                                            return h('a', {
                                                href: 'javascript:void(0);',
                                                onClick() {
                                                    vueSelf.onOthersClick(row, index);
                                                }
                                            }, row.K);
                                        }
                                    },
                                ]
                            },
                        ]
                    },
                    {
                        align: 'center',
                        title: '案件处置实效',
                        children: [
                            {
                                align: 'center',
                                title: '处理情况',
                                key: 'L',
                                keyName: 'handleResult',
                                width: 60,
                                render(row, index) {
                                    return h('a', {
                                        href: 'javascript:void(0);',
                                        onClick() {
                                            vueSelf.onHandleResultClick(row, index);
                                        }
                                    }, row.L);
                                }
                            },
                            {
                                align: 'center',
                                title: '督察案件',
                                key: 'M',
                                keyName: 'superviseResult',
                                width: 60,
                                render(row, index) {
                                    return h('a', {
                                        href: 'javascript:void(0);',
                                        onClick() {
                                            vueSelf.onSuperviseResultClick(row, index);
                                        }
                                    }, row.M);
                                }
                            },
                        ]
                    },
                    {
                        align: 'center',
                        title: '总得分',
                        key: 'N',
                        keyName: 'totalScore',
                        fixed: 'right',
                        width: 60,
                        render(row, index) {
                            return vueSelf.computeN(row);
                        }
                    },
                    {
                        align: 'center',
                        title: '应发绩效工资',
                        key: 'O',
                        keyName: 'shouldPay',
                        fixed: 'right',
                        width: 60
                    },
                    {
                        align: 'center',
                        title: '实发绩效工资',
                        key: 'P',
                        keyName: 'actualPay',
                        fixed: 'right',
                        width: 60,
                        render(row, index) {
                            return vueSelf.computeN(row) * row.O / 100 + row.F;
                        }
                    }
                ],
                data: []
            },
            modal: {
                scoring: {
                    show: false,
                    userName: null,
                    title: null,
                    rowKey: null,
                    rowIndex: null,
                    score: 0,
                    reason: '',
                    minScore: null,
                    maxScore: null
                }
            }
        }
    },
    methods: {
        // 打分确定
        onScroingConfimClick(key, index, { score, reason, userId, userName, date }) {
            this.modal.scoring.show = false;
            this.table.data[index][key] = score;
            this.table.data[index][`reason${key}`] = reason;
        },
        // 打分关闭
        onScroingCloseClick() {
            this.modal.scoring.show = false;
        },
        // 未在规定的时限内退单，影响处置时效 - 
        onUnBackErrorClick(row, index) {
            let unBackError = row.H;
            this.modal.scoring.show = true;
            this.modal.scoring.rowKey = 'H';
            this.modal.scoring.rowIndex = index;
            this.modal.scoring.score = unBackError;
            this.modal.scoring.reason = row.reasonH;
            this.modal.scoring.maxScore = null;
            this.modal.scoring.minScore = null;
            this.modal.scoring.userName = row.B;
            this.modal.scoring.title = '未在规定的时限内退单，影响处置时效';
        },
        // 自行上报案件没完成扣分 - 
        onOthersClick(row, index) {
            let handleResult = row.K;
            this.modal.scoring.show = true;
            this.modal.scoring.rowKey = 'K';
            this.modal.scoring.rowIndex = index;
            this.modal.scoring.score = handleResult;
            this.modal.scoring.reason = row.reasonK;
            this.modal.scoring.maxScore = null;
            this.modal.scoring.minScore = null;
            this.modal.scoring.userName = row.B;
            this.modal.scoring.title = '自行上报案件没完成扣分';
        },
        // 处理情况 - 
        onHandleResultClick(row, index) {
            let others = row.L;
            this.modal.scoring.show = true;
            this.modal.scoring.rowKey = 'L';
            this.modal.scoring.rowIndex = index;
            this.modal.scoring.score = others;
            this.modal.scoring.reason = row.reasonL;
            this.modal.scoring.maxScore = null;
            this.modal.scoring.minScore = null;
            this.modal.scoring.userName = row.B;
            this.modal.scoring.title = '处理情况';
        },
        // 督察案件 - 
        onSuperviseResultClick(row, index) {
            let superviseResult = row.M;
            this.modal.scoring.show = true;
            this.modal.scoring.rowKey = 'M';
            this.modal.scoring.rowIndex = index;
            this.modal.scoring.score = superviseResult;
            this.modal.scoring.reason = row.reasonM;
            this.modal.scoring.maxScore = null;
            this.modal.scoring.minScore = null;
            this.modal.scoring.userName = row.B;
            this.modal.scoring.title = '督察案件';
        },
        computeL(row) {
            return Math.max(row.G - row.H - row.J - row.K + row.L + row.M, 0);
        },
        computeM(row) {
            return Math.max(row.G - row.H - row.J - row.K + row.L + row.M, 0);
        },
        computeN(row) {
            return Math.max(row.G - row.H - row.J - row.K + row.L + row.M, 0);
        },
        resize() {
            let body = document.body;
            this.table.minHeight = body.clientHeight - 378;
            this.table.maxHeight = body.clientHeight - 378;
            // this.table.scrollX = body.clientWidth;
        },
        listZnbm() {
            let vueSelf = this;
            vueSelf.$axios.get(`api/kpi/list-znbm`, {
            }).then(({ data }) => {
                let optionArray = [];
                data.forEach((item, index) => {
                    optionArray.push({
                        label: item.departmentName,
                        value: item.departmentId
                    })
                })
                vueSelf.search.select.department.options = optionArray;
            }).catch(resp => {
                vueSelf.message.error(resp.data.msg);
            })
        },
        onSearchClick() {
            this.listData();
        },
        onSaveClick() {
            let vueSelf = this;
            let tableDatas = [];
            vueSelf.table.data.forEach(item => {
                item.N = vueSelf.computeN(item);
                item.P = item.N * item.O / 100 + item.F;
                tableDatas.push({...item});
            })
            vueSelf.dialog.warning({
                title: "提示",
                content: "确定更新吗？",
                positiveText: "确定",
                negativeText: "取消",
                onPositiveClick: () => {
                    vueSelf.dataLoading = true;
                    vueSelf.$axios.put(`api/kpi/khxz/update-znbm`, {
                        datas: tableDatas
                    }).then( resp => {
                        vueSelf.message.info('保存成功');
                    }).catch( ({data}) => {
                        console.error(resp);
                        vueSelf.message.error(data.data.msg);
                    }).finally(() => {
                        vueSelf.dataLoading = false;
                    });
                },
                onNegativeClick: () => {
                }
            })
        },
        onExportClick() {
            let vueSelf = this;
            vueSelf.btnExportDisabled = true;
            download(vueSelf.$axios, `api/kpi/khxz/export-znbm`, vueSelf.getQuery(), () => {
                vueSelf.btnExportDisabled = false;
            });
        },
        getQuery() {
            return {
                departmentId: this.search.select.department.value,
                khYear: this.search.select.year.value,
                khMonth: this.search.select.month.value,
                keywords: this.search.input.keywords
            }
        },
        listData() {
            let vueSelf = this;
            vueSelf.dataLoading = true;
            vueSelf.$axios.get(`api/kpi/khxz/list-znbm`, {
                params: vueSelf.getQuery()
            }).then(({ data }) => {
                data.forEach((item, index) => {
                    item.A = index + 1;
                });
                this.table.data = data;
            }).catch(({ data }) => {
                vueSelf.message.error(data.msg);
            }).finally(() => {
                vueSelf.dataLoading = false;
            });
        },
        init() {
            this.search.select.year.options = listYear();
            this.search.select.year.value = getCurrentYear();
            this.search.select.month.options = listMonth();
            this.search.select.month.value = getCurrentMonth();
            this.listZnbm();
            this.listData();
        }
    },
    mounted() {
        let vueSelf = this;
        vueSelf.init();
        vueSelf.resize();
        window.onresize = this.resize  
    }
}
</script>

<style lang="stylus" scoped>
.container
    padding 0 10px
:deep(.n-data-table-thead th)
    background-color rgba(196, 196, 196, 1)
:deep(.score-plus)
    background-color yellow
:deep(.score-minus)
    background-color red
</style>