<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="8">
                        <a-form-item label="姓名">
                            <a-input placeholder="姓名" v-model="queryParam.userName" style="width: 8rem;"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                        <a-form-item label="县分">
                            <a-select v-model="queryParam.substName" @change="getSchoolNames" style="width: 8rem;">
                                <a-select-option key="">--全部--</a-select-option>
                                <a-select-option v-for="d in subNames" :key="d.value" :value="d.value">{{d.text}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="12">
                        <a-form-item label="学校">
                            <a-select v-model="queryParam.schoolName" style="width: 15rem;">
                                <a-select-option key="">--全部--</a-select-option>
                                <a-select-option v-for="d in schoolNames" :key="d.value" :value="d.value">{{d.text}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                        <a-form-item label="KPI月份">
                            <a-month-picker @change="onChange" v-model="queryParam.month" placeholder="选择KPI月份" style="width: 8rem;"/>
                        </a-form-item>
                    </a-col>
                    <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
                        <a-col :md="6" :sm="24">
                             <a-button @click="search()" type="primary">查询</a-button>
                             <a-divider type="vertical"/>
                             <a-button @click="modifyfunction()" type="primary">添加</a-button>
                             <a-divider type="vertical"/>
                             <a-button @click="excelInto()" type="primary">KPI数据导入</a-button>
                             <a-divider type="vertical"/>
                             <a-button @click="excelOut()" type="primary">KPI数据导出</a-button>
                        </a-col>
                    </span>
                </a-row>
            </a-form>
        </div>
        <a-modal
                title="批量导入"
                :visible="kpiModifyvisible"
                @ok="createfunctionOk0"
                @cancel="createfunctionCancel0"
                html-type="submit"
                width="400px"
        >
            <a-row :gutter="24">
                <a-col :md="24" :sm="12">
                    <p style="text-align:center">{{ importTile }}</p>
                </a-col>
            </a-row>
            <import-btn :url="importUrl" :responseFun="doPush">
                <a-tooltip placement="topLeft" title="导入文件" arrowPointAtCenter>
                    <a-row :gutter="24">
                        <a-col :md="24" :sm="12">
                            <p>
                                选择文件：
                                <a-button type="primary">选择文件</a-button>
                            </p>
                        </a-col>
                    </a-row>
                </a-tooltip>
            </import-btn>
            <a-row :gutter="24">
                <a-col :md="24" :sm="12">
                    <p v-show="YRYMmoBan">
                        模板下载：
                        <a-button type="primary" @click="downloadMoBan">楼长KPI管理信息模板</a-button>
                    </p>
                </a-col>
            </a-row>
            <a-row :gutter="24" :v-show="KDmoBan">
                <a-col :md="24" :sm="12">
                    <p>说明：</p>
                    <p>1.批量导入请严格按照模版进行导入;</p>
                </a-col>
            </a-row>
        </a-modal>
        <!--列表-->
        <s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling" :locale="emptyText">
            <!--拦截器-->
            <template slot="productLastUpdateTime" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <!--拦截器-->
            <template slot="productCreateTime" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <template slot="minGanZi" slot-scope="text">
                {{ text.substring(0,2)+'**'}}
            </template>
            <template slot="operation" slot-scope="text,record">
                <span>
                  <a @click="modifyfunction(record)">KPI打分</a>
                  <a-divider type="vertical"/>
                  <a-popconfirm title="确定删除吗?" @confirm="remove(record.id,'')">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
            </template>
        </s-table>
        <!----弹框-->
        <a-modal :title="add ?'添加楼长KPI': 'KPI打分'" :visible="modifyvisible" @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="1024px">
            <a-form :form="Formtable">
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="姓名：">
                    <a-input placeholder="姓名" v-decorator="[ 'sysuName', {rules: [{ required: true, message: '姓名不能为空！' }]} ]" :disabled="isdisabled"/>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="账号：">
                    <a-input placeholder="账号" v-decorator="[ 'account', {rules: [{ required: true, message: '账号不能为空！' }]}  ]" :disabled="isdisabled"/>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="汇总任务量(满分:30)：">
                    <a-input-number
                            placeholder="汇总任务量"
                            style="width: 20rem;"
                            :min="0"
                            :max="30"
                            v-decorator="[ 'reportDaily', {rules: [{ required: true, message: '汇总任务量不能为空！' }]} ]"/>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="参与集中营销(满分:30)：">
                    <a-input-number
                            placeholder="参与集中营销"
                            :min="0"
                            :max="30"
                            v-decorator="[ 'collectiveSales', {rules: [{required: true, message: '参与集中营销不能为空！' }]} ]"
                            style="width: 20rem;"/>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="组织周例会(满分:10)：">
                    <a-input-number
                            placeholder="组织周例会"
                            :min="0"
                            :max="10"
                            v-decorator="[ 'weeklyMeeting', {rules: [{ required: true, message: '组织周例会不能为空！' }]} ]"
                            style="width: 20rem;"/>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="定制扫楼营销方案(满分:10)：">
                    <a-input-number
                            placeholder="定制扫楼营销方案"
                            :min="0"
                            :max="10"
                            v-decorator="[ 'organTraining', {rules: [{ required: true, message: '定制扫楼营销方案不能为空！' }]} ]"
                            style="width: 20rem;"/>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="组织培训(满分:20)：">
                    <a-input-number
                            placeholder="组织培训"
                            :min="0"
                            :max="20"
                            v-decorator="[ 'designPlan', {rules: [{required: true, message: '组织培训不能为空！' }]} ]"
                            style="width: 20rem;"/>
                </a-form-item>
                <a-form-item v-show="false" :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="KPI总值：">
                    <a-input-number
                            placeholder="KPI总值"
                            :min="0"
                            :max="100"
                            v-decorator="[ 'kpi' ]"
                            style="width: 20rem;"
                            disabled/>
                </a-form-item>
                <a-form-item v-show="add" :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="KPI月份：">
                    <a-month-picker @change="onChange" placeholder="选择KPI月份" v-decorator="[ 'month' ]" style="width: 20rem;"/>
                </a-form-item>
                <a-form-item v-show="false" :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="是否删除：">
                    <a-select v-decorator="['isDel']" style="width: 330px">
                        <a-select-option key="1">是</a-select-option>
                        <a-select-option key="0">否</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import ImportBtn from "../../../components/sysmanage/ImportBtn";
    import {
        lzKpiList, lzKpiDelete, lzKpiInsert, lzKpiUpdate,
        getSchoolNames, initSubstName, uploadExcel, downloadMoBan
    } from "../../../api/school-center/louZhang/louZhangManagerAPI"
    import {cloneObject, exportFile} from '@/utils/util';
    import Vue from 'vue';
    import {DatetimePicker} from 'vant';
    import moment from "moment";
    import ConstantActivity from "@/constant/ConstantActivity";

    Vue.use(DatetimePicker);

    export default {
        name: "louZhangKPI",
        components: {
            STable, ImportBtn
        },
        data() {
            return {
                emptyText: {emptyText: '暂无数据'},
                Formtable: this.$form.createForm(this),
                modifyvisible: false,
                kpiModifyvisible: false,
                title: ConstantActivity.title,
                add: true,
                isdisabled: true,
                queryParam: {
                    userName: '',
                    substName: '',
                    schoolName: '',
                    month: '',
                },
                subNames: [],
                schoolNames: [],
                modelData: {
                    id: '',
                    userId: '',
                    sysuName: '',
                    account: '',
                    substName: '',
                    schoolName: '',
                    reportDaily: '',
                    collectiveSales: '',
                    weeklyMeeting: '',
                    organTraining: '',
                    designPlan: '',
                    kpi: '',
                    month: '',
                    isDel: '0'
                },
                columns: [
                    {dataIndex: 'sysuName', width: 25, title: '姓名',},
                    {dataIndex: 'account', width: 40, title: '账号',scopedSlots: {customRender: 'minGanZi'}},
                    {dataIndex: 'substName', width: 20, title: '县分'},
                    {dataIndex: 'schoolName', width: 70, title: '学校'},
                    {dataIndex: 'reportDaily', width: 25, title: '汇总任务量'},
                    {dataIndex: 'collectiveSales', width: 30, title: '参与集中营销'},
                    {dataIndex: 'weeklyMeeting', width: 25, title: '组织周例会'},
                    {dataIndex: 'organTraining', width: 30, title: '定制扫楼营销方案 '},
                    {dataIndex: 'designPlan', width: 20, title: '组织培训 '},
                    {dataIndex: 'kpi', width: 20, title: 'KPI总值'},
                    {dataIndex: 'month', width: 20, title: 'KPI月份 '},
                    {
                        dataIndex: 'operation',
                        width: 30,
                        title: '操作',
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }
                ],
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    let obj = cloneObject(this.queryParam)
                    //表示
                    return lzKpiList(Object.assign(params, obj)).then(res => {
                        let data = {}
                        if (res.state !== 'success') {
                            this.$message.error("查询失败！", 5);
                            this.emptyText.emptyText = '查询失败！'
                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            }
                        } else {
                            data = {
                                data: res.data.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.data.total
                            }
                        }
                        return data
                    })
                },
                importTile: "",
                importUrl: "",
                YRYMmoBan: true,
            }
        },
        methods: {
            moment,
            onChange(date, dateString) {
                console.log(dateString);
                this.modelData.month = dateString;
            },
            excelOut() {
                let params = {
                    pageNo: 1,
                    pageSize: 10
                }
                let obj = cloneObject(this.queryParam)
                let nowdate = moment().format("YYYY-MM-DD");
                //导出
                exportFile(
                    uploadExcel(Object.assign(params, obj)),
                    "楼长KPI管理信息" + nowdate + ".xlsx",
                );

            },
            excelInto() {
                this.importTile = "批量导入楼长KPI管理信息";
                this.YRYMmoBan = true;
                this.importUrl = "manager/ciop/lzKpi/importDate";
                this.kpiModifyvisible = true
            },
            downloadMoBan: function () {
                exportFile(downloadMoBan(), "楼长KPI管理信息.xlsx");
            },
            doPush(res) {
                console.log(res);
                if (!res || !res.response) {
                    this.$message.error("上传文件出错！", 10);
                    return false;
                }
                const response = res.response;
                if (response.state !== "success") {
                    this.$message.error(response.msg ? response.msg : "上传文件出错！", 10);
                    return false;
                }
                this.$message.success("上传成功！" + response.data, 5);
            },
            createfunctionOk0() {
                this.kpiModifyvisible = false;
                this.clearmodel0();
            },
            createfunctionCancel0() {
                this.kpiModifyvisible = false;
                this.clearmodel0();
            },
            clearmodel0() {
                this.importTile = "";
                this.YRYMmoBan = false;
                this.importUrl = "";
            },
            search() {
                this.$refs.table.refresh({search: true})
            },
            remove(id, isdel) {
                lzKpiDelete({'id': id, 'isdel': "isdel"}).then((res) => {
                    if (res.state == "success") {
                        this.$notification.success({message: res.data, description: '', duration: 4})
                    }
                    else{
                        this.$message.error(res.msg);
                        return;
                    }
                    this.$refs.table.refresh({search: true})
                })
            },
            modifyfunction(data) {
                if (data != undefined) {
                    this.add = false;
                    this.isdisabled = true;

                    this.modelData.id = data.id
                    this.modelData.userId = data.userId
                    this.modelData.month = data.month
                    setTimeout(() => {
                        this.Formtable.setFieldsValue({
                            "sysuName": data.sysuName,
                            "account": data.account,
                            "substName": data.substName,
                            "schoolName": data.schoolName,
                            "reportDaily": data.reportDaily,
                            "collectiveSales": data.collectiveSales,
                            "weeklyMeeting": data.weeklyMeeting,
                            "organTraining": data.organTraining,
                            "designPlan": data.designPlan,
                            "month": data.month,
                            "kpi": data.kpi,
                            "isDel": data.isDel
                        })
                    }, 0)
                }else{
                    this.isdisabled = false;
                }
                this.modifyvisible = true;
            },
            createfunctionOk() {
                let that = this;
                that.Formtable.validateFields(['sysuName', 'account', 'substName', 'schoolName', 'reportDaily', 'collectiveSales', 'weeklyMeeting', 'organTraining', 'designPlan', "month", 'kpi', 'isDel'], {force: true}, (err, values) => {
                    if (err) {
                        return;
                    }
                    that.modelData.sysuName = values.sysuName
                    that.modelData.account = values.account
                    that.modelData.reportDaily = values.reportDaily
                    that.modelData.collectiveSales = values.collectiveSales
                    that.modelData.weeklyMeeting = values.weeklyMeeting
                    that.modelData.organTraining = values.organTraining
                    that.modelData.designPlan = values.designPlan
                    that.modelData.kpi = values.reportDaily + values.collectiveSales + values.weeklyMeeting + values.organTraining + values.designPlan
                    that.modelData.isDel = 0
                    if (this.add) {
                        let obj = that.modelData;
                        delete obj.id
                        let lzKpi = JSON.stringify(obj);
                        lzKpiInsert({lzKpi}).then((res) => {
                            this.modifyvisible = false;
                            this.clearmodel()
                            if (res.state == "success") {
                                this.$notification.success({message: res.data, description: '', duration: 4})
                            }else{
                                this.$message.error(res.msg);
                                return;
                            }
                            this.search()
                        })
                    } else {
                        let obj = that.modelData;
                        let lzKpi = JSON.stringify(obj);
                        lzKpiUpdate({lzKpi}).then((res) => {
                            this.modifyvisible = false;
                            this.clearmodel()
                            if (res.state == "success") {
                                this.$notification.success({message: res.data, description: '', duration: 4})
                            }
                            this.search()
                        })
                    }
                })
            },
            createfunctionCancel() {
                this.modifyvisible = false;
                this.clearmodel()
                this.add = true;
            },
            //清除弹窗信息
            clearmodel() {
                this.add = true
                this.modelData.id = ''
                this.modelData.month = ''
                this.Formtable.setFieldsValue({
                    "sysuName": '',
                    "account": '',
                    "substName": '',
                    "schoolName": '',
                    "reportDaily": '',
                    "collectiveSales": '',
                    "weeklyMeeting": '',
                    "organTraining": '',
                    "designPlan": '',
                    "kpi": '',
                    "month": '',
                    "isDel": 1
                })
            },
            getSchoolNames() {
                this.schoolNames = []
                this.queryParam.schoolName = ''
                getSchoolNames({"substName": this.queryParam.substName}).then((res) => {
                    if (res.state == "success") {
                        const result = res.data
                        result.forEach((r) => {
                            if (r.schoolName === 'null')
                                return;
                            this.schoolNames.push({
                                value: r.schoolName,
                                text: r.schoolName
                            })
                        })
                    }
                })
            },
            initSubstName() {
                initSubstName().then((res) => {
                    if (res.state == "success") {
                        const result = res.data
                        result.forEach((r) => {
                            if (r.subName === 'null')
                                return;
                            this.subNames.push({
                                value: r.subName,
                                text: r.subName
                            })
                        })
                    }
                })
            }
        },
        mounted() {
            this.initSubstName();
            this.getSchoolNames();
        }
    }
</script>

<style scoped>

</style>