<template>
    <n-space class="container" vertical>
        <n-space justify="center">
            <h1>区级与街道指挥调度中心（调度专管员）网格化工作考核细则（以季度为考核周期）</h1>
        </n-space>
        <n-space class="search" vertical>
            <n-grid :cols="7" :x-gap="10">
                <n-grid-item>
                    <n-select placeholder="请选择街道" v-model:value="search.select.street.value"
                        :options="search.select.street.options" :clearable="true" />
                </n-grid-item>
                <n-grid-item>
                    <n-select placeholder="请选择社区" v-model:value="search.select.community.value"
                        :options="search.select.community.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" :clearable="true" />
                </n-grid-item>
                <n-grid-item>
                    <n-select placeholder="请选择月份" v-model:value="search.select.month.value"
                        :options="search.select.month.options" :clearable="true" />
                </n-grid-item>
                <n-grid-item>
                    <n-space>
                        <n-button type="primary">搜索</n-button>
                        <n-button type="info">导出</n-button>
                    </n-space>
                </n-grid-item>
            </n-grid>
        </n-space>
        <n-space>
            <n-data-table :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-modal preset="dialog" style="width: 800px" :show="modal.sign.show" :show-icon="false" :mask-closable="true"
        :closable="false" :on-update-show="onSignCloseClick">
        <ddy-work />
    </n-modal>
    <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,
    NDataTable,
    NSelect,
    NInput,
    NButton,
    NModal,
} from 'naive-ui';
import Scoring from '../common/Scoring.vue';
import DdyWork from '../common/DdyWork.vue';

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

        DdyWork,
        Scoring,
    },
    data() {
        let vueSelf = this;
        return {
            
            search: {
                select: {
                    street: {
                        value: null,
                        options: [
                            { label: '稀土路街道', value: 'xtl' }
                        ]
                    },
                    community: {
                        value: null,
                        options: [
                            { label: '社区', value: 'sq' }
                        ]
                    },
                    year: {
                        value: null,
                        options: [
                            { label: '2023年', value: '2023' }
                        ]
                    },
                    month: {
                        value: null,
                        options: [
                            { label: '1月', value: '1' }
                        ]
                    }
                },
                input: {
                    keywords: ''
                }
            },
            table: {
                minHeight: 300,
                maxHeight: 300,
                scrollX: 800,
                columns: [
                    {
                        align: 'center',
                        title: '序号',
                        key: 'A',
                        keyName: 'key',
                        fixed: 'left',
                        width: 60
                    },
                    {
                        align: 'center',
                        title: '姓名',
                        key: 'B',
                        keyName: 'name',
                        fixed: 'left',
                        width: 60
                    },
                    {
                        align: 'center',
                        title: '签到情况（30分）',
                        key: 'C',
                        keyName: 'sign',
                        width: 60,
                        render(row, index) {
                            return h('a', {
                                href: 'javascript:void(0);',
                                onClick() {
                                    vueSelf.onSignClick(row, index);
                                }
                            }, row.C);
                        }
                    },
                    {
                        align: 'center',
                        title: '网格案件调度情况',
                        children: [
                            {
                                align: 'center',
                                title: '基础分',
                                key: 'D',
                                keyName: 'baseScore',
                                width: 60
                            },
                            {
                                align: 'center',
                                title: '案件调度',
                                key: 'dispatchCase',
                                width: 60,
                                children: [
                                    {
                                        align: 'center',
                                        title: '数量',
                                        key: 'E',
                                        keyName: 'dispatchCaseCount',
                                        width: 60
                                    },
                                    {
                                        align: 'center',
                                        title: '扣分',
                                        key: 'F',
                                        keyName: 'dispatchCaseDeductPoints',
                                        width: 60
                                    }
                                ]
                            },
                            {
                                align: 'center',
                                title: '案件调度过程质量凡属下列情况之一经核准予以扣分',
                                width: 60,
                                children: [
                                    {
                                        align: 'center',
                                        title: '应调度却未及时调度',
                                        key: 'G',
                                        keyName: 'shouldButNot',
                                        width: 60,
                                        render(row, index) {
                                            return h('a', {
                                                href: 'javascript:void(0)',
                                                onClick() {
                                                    vueSelf.onShouldButNotClick(row, index)
                                                }
                                            }, row.G)
                                        }
                                    },
                                    {
                                        align: 'center',
                                        title: '未及时调度案件造成严重影响',
                                        key: 'H',
                                        keyName: 'timeout',
                                        width: 60,
                                        render(row, index) {
                                            return h('a', {
                                                href: 'javascript:void(0)',
                                                onClick() {
                                                    vueSelf.onTimeoutClick(row, index)
                                                }
                                            }, row.H)
                                        }
                                    },
                                    {
                                        align: 'center',
                                        title: '其它情况',
                                        key: 'I',
                                        keyName: 'others',
                                        width: 60,
                                        render(row, index) {
                                            return h('a', {
                                                href: 'javascript:void(0)',
                                                onClick() {
                                                    vueSelf.onOthersClick(row, index)
                                                }
                                            }, row.I)
                                        }
                                    }
                                ]
                            },
                        ]
                    },
                    {
                        align: 'center',
                        title: '其他工作考核',
                        children: [
                            {
                                align: 'center',
                                title: '组织评价',
                                key: 'J',
                                keyName: 'orgEvalution',
                                width: 60,
                                render(row, index) {
                                    return h('a', {
                                        href: 'javascript:void(0)',
                                        onClick() {
                                            vueSelf.onOrgEvalutionClick(row, index)
                                        }
                                    }, row.J)
                                }
                            }
                        ]
                    },
                    {
                        align: 'center',
                        title: '总得分',
                        key: 'K',
                        keyName: 'totalScore',
                        fixed: 'right',
                        width: 60,
                        render(row, index) {
                            return vueSelf.computeK(row);
                        }
                    },
                    {
                        align: 'center',
                        title: '应发绩效工资',
                        key: 'L',
                        keyName: 'shouldPay',
                        fixed: 'right',
                        width: 60
                    },
                    {
                        align: 'center',
                        title: '实发绩效工资',
                        key: 'M',
                        keyName: 'actualPay',
                        fixed: 'right',
                        width: 60,
                        render(row, index) {
                            return vueSelf.computeK(row) * row.L / 100;
                        }
                    }
                ],
                data: []
            },
            modal: {
                sign: {
                    show: false
                },
                scoring: {
                    show: false,
                    userName: null,
                    title: null,
                    rowKey: null,
                    rowIndex: null,
                    score: 0,
                    reason: '',
                    minScore: null,
                    maxScore: null
                }
            }
        }
    },
    methods: {
        // 考勤关闭
        onSignCloseClick() {
            this.modal.sign.show = false;
        },
        // 考勤签到打开
        onSignClick(row, index) {
            let sign = row.C;
            this.modal.sign.show = true;
        },
        // 打分确定
        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;
        },
        // 应调度却未及时调度 -
        onShouldButNotClick(row, index) {
            let shouldButNot = row.G;
            this.modal.scoring.show = true;
            this.modal.scoring.rowKey = 'G';
            this.modal.scoring.rowIndex = index;
            this.modal.scoring.score = shouldButNot;
            this.modal.scoring.reason = row.reasonG;
            this.modal.scoring.maxScore = null;
            this.modal.scoring.minScore = null;
            this.modal.scoring.userName = row.B;
            this.modal.scoring.title = '应调度却未及时调度';
        },
        // 未及时调度案件造成严重影响 -
        onTimeoutClick(row, index) {
            let timeout = row.H;
            this.modal.scoring.show = true;
            this.modal.scoring.rowKey = 'H';
            this.modal.scoring.rowIndex = index;
            this.modal.scoring.score = timeout;
            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 others = row.I;
            this.modal.scoring.show = true;
            this.modal.scoring.rowKey = 'I';
            this.modal.scoring.rowIndex = index;
            this.modal.scoring.score = others;
            this.modal.scoring.reason = row.reasonI;
            this.modal.scoring.maxScore = null;
            this.modal.scoring.minScore = null;
            this.modal.scoring.userName = row.B;
            this.modal.scoring.title = '其它情况';
        },
        // 组织评价 +
        onOrgEvalutionClick(row, index) {
            let others = row.J;
            this.modal.scoring.show = true;
            this.modal.scoring.rowKey = 'J';
            this.modal.scoring.rowIndex = index;
            this.modal.scoring.score = others;
            this.modal.scoring.reason = row.reasonJ;
            this.modal.scoring.maxScore = 20;
            this.modal.scoring.minScore = 0;
            this.modal.scoring.userName = row.B;
            this.modal.scoring.title = '组织评价';
        },
        computeK(row) {
            return row.C + row.D - row.F - row.G - row.H - row.I + row.J;
        },
        listTestData() {
            let data = [];
            for (let i = 0; i < 100; i++) {
                let d = {
                    userId: 'userId',
                    key: i + 1,
                    name: i + 'name',
                    sign: i,
                    baseScore: Math.floor(Math.random() * 100),
                    dispatchCaseCount: 30,
                    dispatchCaseDeductPoints: 2,
                    shouldButNo: Math.floor(Math.random() * 10),
                    reasonShouldButNo: '',
                    timeout: Math.floor(Math.random() * 10),
                    reasonTimeout: '',
                    others: Math.floor(Math.random() * 10),
                    reasonOthers: '',
                    orgEvalution: Math.floor(Math.random() * 10),
                    reasonOrgEvalution: '',
                    totalScore: Math.floor(Math.random() * 10),
                    shouldPay: Math.floor(Math.random() * 10),
                    actualPay: Math.floor(Math.random() * 10),
                }
                data.push({
                    A: d.key,
                    B: d.name,
                    C: d.sign,
                    D: d.baseScore,
                    E: d.dispatchCaseCount,
                    F: d.dispatchCaseDeductPoints,
                    G: d.shouldButNo,
                    reasonG: d.reasonShouldButNo,
                    H: d.timeout,
                    reasonH: d.reasonTimeout,
                    I: d.others,
                    reasonI: d.reasonOthers,
                    J: d.orgEvalution,
                    reasonJ: d.reasonOrgEvalution,
                    K: d.totalScore,
                    L: d.shouldPay,
                    M: d.actualPay,
                });
            }
            this.table.data = data;
        },
        resize() {
            let body = document.body;
            this.table.minHeight = body.clientHeight - 365;
            this.table.maxHeight = body.clientHeight - 365;
            this.table.scrollX = body.clientWidth;
        }
    },
    mounted() {
        let vueSelf = this;
        vueSelf.listTestData();
        vueSelf.resize();
        window.onresize = this.resize;
    }
}
</script>

<style lang="stylus" scoped>
.container
    padding 0 10px
:deep(.score-plus)
    background-color yellow
:deep(.score-minus)
    background-color red
</style>
