<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="3" :sm="6">
                        <a-form-item label="姓名">
                            <a-input placeholder="姓名" v-model="queryParam.name"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="12">
                        <a-form-item label="月份">
                            <a-range-picker
                                showTime
                                :placeholder="['开始月份', '结束月份']"
                                format="YYYYMM"
                                :value="queryParam.month"
                                :mode="tempMode"
                                @panelChange="handlePanelChange"
                                @ok="onOk"
                            />
                        </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 v-show="false" type="vertical"/>-->
<!--                             <a-button v-show="false" @click="modifyfunction()" type="primary">添加</a-button>-->
                             <a-divider type="vertical"/>
                             <a-button @click="excelInto()" type="primary">薪酬数据导入</a-button>
                             <a-divider type="vertical"/>
                             <a-button @click="excelOut()" type="primary">薪酬数据导出</a-button>
                        </a-col>
                    </span>
                </a-row>
            </a-form>
        </div>
        <a-modal
                title="批量导入"
                :visible="salaryModifyvisible"
                @ok="createfunctionOk0"
                @cancel="createfunctionCancel0"
                html-type="submit"
                width="800px"
        >
            <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">总经理薪酬管理信息模板</a-button>
                    </p>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <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="productState" slot-scope="text">
                <p v-if="text=='0'">正常</p>
                <p v-else=""></p>
            </template>
            <template slot="operation" slot-scope="text,record">
                <span>
                  <!--<a v-show="false" @click="modifyfunction(record)">编辑</a>
                  <a-divider v-show="false" type="vertical"/>-->
                  <a-popconfirm title="确定删除吗?" @confirm="remove(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
            </template>
        </s-table>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import ImportBtn from "../../../components/sysmanage/ImportBtn";
    import {
        zjlSalaryList, zjlSalaryDelete, uploadExcel, downloadMoBan,createSalary
    } from "../../../api/school-center/louZhang/zjlSalaryManagerAPI"
    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: "zjlSalary",
        components: {
            STable, ImportBtn
        },
        data() {
            return {
                emptyText: {emptyText: '暂无数据'},
                modifyvisible: false,
                salaryModifyvisible: false,
                title: ConstantActivity.title,
                queryParam: {
                    name: '',
                    month: [],
                },
                columns: [
                    {dataIndex: 'month', width: 80, title: '月份 '},
                    {dataIndex: 'department', width: 80, title: '归属'},
                    {dataIndex: 'name', width: 80, title: '姓名'},
                    {dataIndex: 'idCard', width: 120, title: '身份证'},
                    {dataIndex: 'company', width: 80, title: '分公司'},
                    {dataIndex: 'attribute', width: 80, title: '属性'},
                    {dataIndex: 'positionWage', width: 80, title: '岗位工资'},
                    {dataIndex: 'performanceBonus', width: 80, title: '绩效奖金（绩效工资+提成）'},
                    {dataIndex: 'specialBonus', width: 80, title: '专项奖'},
                    {dataIndex: 'yearEndBonus', width: 80, title: '年终奖'},
                    {dataIndex: 'festivalFee', width: 80, title: '高温补贴(6-10月)'},
                    {dataIndex: 'correspondenceSubsidy', width: 80, title: '通讯补贴'},
                    {dataIndex: 'tableMoneySubsidy', width: 80, title: '餐费补贴'},
                    {dataIndex: 'trafficSubsidy', width: 80, title: '交通补贴'},
                    {dataIndex: 'specialBonusAutumn', width: 87, title: '专项奖（秋营奖励）'},
                    {dataIndex: 'otherSubsidy', width: 80, title: '其他补扣补退'},
                    {dataIndex: 'totalYf', width: 80, title: '应发合计'},
                    {dataIndex: 'endowmentInsurancePersonal', width: 80, title: '个人养老保险'},
                    {dataIndex: 'unenploymentInsurancePersonal', width: 80, title: '个人缴纳失业保险'},
                    {dataIndex: 'medicarePersonal', width: 80, title: '个人缴纳医疗保险'},
                    {dataIndex: 'totalInsurance', width: 80, title: '个人保险小计'},
                    {dataIndex: 'reservedFund', width: 80, title: '个人缴纳住房公积金'},
                    {dataIndex: 'reservedFundTax', width: 80, title: '个税'},
                    {dataIndex: 'yearEndBonusTax', width: 80, title: '年终奖个税'},
                    {dataIndex: 'otherFeePersonal', width: 80, title: '个人其他补交补退'},
                    {dataIndex: 'duesPersonal', width: 80, title: '个人工会费'},
                    {dataIndex: 'totalFeePersonal', width: 80, title: '个人缴交小计'},
                    {dataIndex: 'totalSf', width: 80, title: '实发合计'},
                    {dataIndex: 'endowmentInsuranceUnit', width: 80, title: '单位养老保险'},
                    {dataIndex: 'unenploymentInsuranceUnit', width: 80, title: '单位失业保险'},
                    {dataIndex: 'medicareUnit', width: 80, title: '单位医疗保险'},
                    {dataIndex: 'employmentInjuryInsuranceUnit', width: 80, title: '单位工伤保险'},
                    {dataIndex: 'birthInsuranceUnit', width: 80, title: '单位生育保险'},
                    {dataIndex: 'illnessInsuranceUnit', width: 80, title: '重大疾病保险'},
                    {dataIndex: 'reservedFundUnit', width: 80, title: '单位公积金'},
                    {dataIndex: 'laborUnionFeeUnit', width: 80, title: '工会计提'},
                    {dataIndex: 'accidentInsuranceUnit', width: 80, title: '商业意外险'},
                    {dataIndex: 'disabilityInsuranceUnit', width: 80, title: '残保金'},
                    {dataIndex: 'otherFeeUnit', width: 80, title: '单位其他补交补退'},
                    {dataIndex: 'totalFeeUnit', width: 80, title: '单位缴交小计'},
                    {dataIndex: 'totalCastPersonal', width: 80, title: '总个人人工成本合计'},
                    {dataIndex: 'additionMsg', width: 80, title: '总薪酬'},
                    {dataIndex: 'manageFee', width: 80, title: '邮电人才服务管理费（200/人）'},
                    {dataIndex: 'totalCastUnit', width: 80, title: '单位总成本（含支出税点）'},
                    {dataIndex: 'endowmentInsurancePersonal2', width: 80, title: '个人缴纳养老保险2'},
                    {dataIndex: 'unenploymentInsurancePersonal2', width: 80, title: '个人缴纳失业保险2'},
                    {dataIndex: 'medicarePersonal2', width: 80, title: '个人缴纳医疗保险2'},
                    {dataIndex: 'resveredFundPersonal2', width: 80, title: '个人缴纳住房公积金2'},
                    {dataIndex: 'endowmentInsuranceUnit2', width: 80, title: '单位养老保险2'},
                    {dataIndex: 'unenploymentInsuranceUnit2', width: 80, title: '单位失业保险2'},
                    {dataIndex: 'medicareUnit2', width: 80, title: '单位医疗保险2'},
                    {dataIndex: 'employmentInjuryInsuranceUnit2', width: 80, title: '单位工伤保险2'},
                    {dataIndex: 'birthInsuranceUnit2', width: 80, title: '单位生育保险2'},
                    {dataIndex: 'illnessInsuranceUnit2', width: 80, title: '重大疾病保险企业缴纳2'},
                    {dataIndex: 'reservedInsuranceUnit2', width: 80, title: '单位住房公积金2'},
                    {dataIndex: 'totalInsuranceUnit2', width: 80, title: '合并计税'},
                    {dataIndex: 'wage', width: 80, title: '本月计税工资'},
                    {dataIndex: 'wageTax', width: 80, title: '本月抵税扣除'},
                    {dataIndex: 'wageTaxAfter', width: 80, title: '本月工资抵税'},
                    {dataIndex: 'lastYearEndBonus', width: 80, title: '年终奖应税'},
                    {dataIndex: 'lastYearEndBonusTax', width: 80, title: '年终奖个税计算'},
                    {dataIndex: 'bankAccount', width: 80, title: '银行账号'},
                    {dataIndex: 'managerCast', width: 80, title: '督导成本'},
                    {dataIndex: 'xzCompanyCast', width: 80, title: '学子公司成本'},
                    {
                        dataIndex: 'operation',
                        width: 60,
                        title: '操作',
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }
                ],
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    let obj = cloneObject(this.queryParam)
                    //表示
                    return zjlSalaryList(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,
                tempMode:['month', 'month'],
            }
        },
        methods: {
            moment,
            handlePanelChange(value, mode) {
                this.queryParam.month = value;
                this.tempMode = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
                //console.log("this.tempMode=================="+this.tempMode);
            },
            onOk(value) {
                this.queryParam.month = value;
                console.log('onOk: ', value);
            },
            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)),
                    "总经理薪酬管理信息" + nowdate + ".xlsx",
                );

            },
            excelInto() {
                this.importTile = "批量导入总经理薪酬管理信息";
                this.YRYMmoBan = true;
                this.importUrl = "manager/ciop/zjlWage/importDate";
                this.salaryModifyvisible = true
            },
            downloadMoBan: function () {
                exportFile(downloadMoBan(), "总经理薪酬管理信息.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);
            },
            createSalay(){
                //生成总经理上月薪酬
                this.createSalaryvisible = true
            },
            createfunctionOk1() {  //确定按扭
                this.createSalaryvisible = false;
                createSalary({}).then((res) => {
                    if (res.state == "success") {
                        this.$notification.success({message: res.data, description: '', duration: 4})
                    }else{
                        this.$message.error(res.msg);
                        return;
                    }
                    this.search()
                })

            },
            createfunctionCancel1() { //取消按扭
                this.createSalaryvisible = false;
            },

            createfunctionOk0() {
                this.salaryModifyvisible = false;
                this.clearmodel0();
            },
            createfunctionCancel0() {
                this.salaryModifyvisible = false;
                this.clearmodel0();
            },
            clearmodel0() {
                this.importTile = "";
                this.YRYMmoBan = false;
                this.importUrl = "";
            },
            search() {
                this.$refs.table.refresh({search: true})
            },
            remove(id) {
                zjlSalaryDelete({'id': id}).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})
                })
            },
        },
        mounted() {

        }
    }
</script>

<style scoped>

</style>