<style scoped>
    .CM_look {
        padding: 4px !important;
        position: relative;
        top: 1px;
    }

    .opUl li {
        display: inline-block;
        margin: 10px 15px 10px 0;
    }

    .domesticCommission .singeRowTable tr td {
        padding: 8px 5px;
    }

    .domesticCommission .hoverSpan span:hover {
        cursor: pointer;
        text-decoration: underline;
        color: red;
    }
    /deep/.el-checkbox__input.is-checked .el-checkbox__inner{
        background-color: #E95252!important;
        border-color:#E95252!important;
    }
    /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: #E95252!important;
        border-color:#E95252!important;
    }
</style>
<template>
    <div class="flexOne domesticCommission">
        <div>
            <ul class="opUl">
                <li>
                    <em>提成归属公司</em>
                    <el-select filterable  v-model='msg.EmBranchId'
                    @change='handleCurrentChange(1)'>
                    <el-option :label="$t('pub.unlimitedSel')" :value="-1" :key="-1"></el-option>
                    <el-option
                    v-for="item in companyList"
                    :label='item.BName'
                    :value='item.Id'
                    :key='item.Id'
                    ></el-option>
                    </el-select>
                </li>
                <li>
                    <em>选择月份</em>
                    <el-date-picker v-model="Month" value-format="yyyy-MM" type="month" placeholder="选择月">
                    </el-date-picker>
                </li>
                <li v-show="btnShow">
                    <el-button size="mini" type="danger" style="border-radius:14px" :loading="btnLoading"
                        @click="generateTable">生成提成</el-button>
                </li>

            </ul>
        </div>
        <table v-loading="loading" class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <th>期数</th>
                <th>总追加工资</th>
                <th>总提成</th>
                <th>归属公司提成</th>
                <th>总年终</th>
                <th>财务单据</th>
                <th>操作信息</th>
                <th>{{$t('system.table_operation')}}</th>
            </tr>
            <tr v-for="item in dataList">
                <td>{{item.Periods}}</td>
                <td>
                    <p>{{item.SumWage?'+ '+item.SumWage:'-'}}</p>

                </td>
                <td>{{item.SumCommission?item.SumCommission:'-'}}</td>
                <td>{{item.BranchCommission?item.BranchCommission:'-'}}</td>
                <td>{{item.SumBonus?item.SumBonus:'-'}}</td>
                <td>
                    <template v-if="item.FrIdList.length>0">
                        <span  v-for="(x,y) in item.FrIdList">
                            <span style="cursor: pointer;text-decoration: underline;" @click='gofinancialdetail(x)'>
                                {{x}}
                            </span>
                            {{item.FrIdList.length == y+1 ?'':'、'}}
                        </span>
                    </template>
                </td>
                <td>
                    <div>{{item.CreateByName}}</div>
                    <div>{{item.CreateTime}}</div>
                </td>
                <td>

                    <el-tooltip class="item" effect="dark" content="查看明细" placement="top">
                        <el-button type="primary" class="CM_look" @click="goUrl('ImpressionTicketUserDetails',item.Id)"
                            icon="iconfont icon-chakan" circle></el-button>
                    </el-tooltip>
                    <el-tooltip v-if="cMaker==true" class="item" effect="dark" content="提成制单" placement="top">
                        <el-button @click="YijianZD(item,1)" type="danger" class="CM_look" v-if="cMaker==true"
                            icon="iconfont icon-mui-icon-add" circle></el-button>
                    </el-tooltip>
                    <el-tooltip v-if="cMaker==true" class="item" effect="dark" content="工资制单" placement="top">
                        <el-button @click="YijianZD(item,2)" type="danger" class="CM_look" v-if="cMaker==true"
                            icon="iconfont icon-mui-icon-add" circle></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="当期利润" placement="top">
                        <el-button @click="goUrl('ImpressionCurrentProfit',item.Id,1)" type="danger" class="CM_look"
                            icon="iconfont icon-money" circle></el-button>
                    </el-tooltip>
                </td>
            </tr>
            <tr v-if="dataList.length==0">
                <td style="text-align:center" colspan="7">{{$t('system.content_noData')}}</td>
            </tr>
        </table>
        <!-- 分页 -->
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.pageIndex"
            layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'>
        </el-pagination>
        <!-- 制单人员选择 -->
        <el-dialog custom-class='w1006' title="选择制单人员" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
            <template>
                <div
                  class="cm_content"
                  style="width: 100%;margin-bottom: 35px;margin-top: 30px;"
                >
                <el-table
                    v-loading="BillMakingLoading"
                    ref="orderMakerList"
                    :data="orderMakerList"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    :selectable="checkSelectable"
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    label="公司"
                    width="120">
                        <template slot-scope="scope">{{ scope.row.BranchName }}</template>
                    </el-table-column>
                    <el-table-column
                    prop="DeptName"
                    label="部门">
                    </el-table-column>
                    <el-table-column
                    prop="EmName"
                    :label="$t('system.query_name')"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    v-if="BillMakingMsg.Type==1"
                    prop="Commission"
                    label="提成金额"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    v-else
                    label="追加工资"
                    show-overflow-tooltip>
                        <template slot-scope="scope"> + {{ scope.row.WageMoney }}</template>
                    </el-table-column>
                    <el-table-column
                    label="是否已发放"
                    show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.IsGiveOut==2? '否':'是' }}</template>
                    </el-table-column>
                </el-table>
                </div>
                <div style="margin-top: 10px">金额总额:{{ totalAmount }}</div>
              </template>
			<div slot="footer" class="dialog-footer">
				<button class="hollowFixedBtn" @click="outerVisible = false">取消</button> &nbsp;
				<button class="normalBtn" type="primary" @click="BillMaking">确定</button>
			</div>
		</el-dialog>
    </div>
</template>

<script>
    import moment from "moment"
    export default {
        data() {
            return {
                orderMakerList:[],//制单人列表
                outerVisible: false,
                Month: moment().subtract(1, 'months').format("YYYY-MM"),
                msg: {
                    pageIndex: 1,
                    pageSize: 20,
                    EmBranchId :-1
                },
                loading: false,
                //数据源
                dataList: [],
                companyList: [],
                getCompanyMsg:{
                    RB_Group_Id:'0',
                    Status:'0',
                },
                total: 0,
                btnShow: false,
                btnLoading: false,
                cMaker: true,//是否可以制单
                BillMakingLoading: false,
                totalAmount:0,
                multipleSelection:[],
                BillMakingMsg:{
                    PeroidsId: null,
                    Type: null,
                    EmpIds:''
                }
            }
        },
        mounted() {
            let userInfo = this.getLocalStorage();
            let ActionMenuCode = userInfo.ActionMenuCode;
            //this.msg.OutBranchId = userInfo.RB_Branch_id
            if (ActionMenuCode.indexOf('F_DCommissionSend') != -1) {
                this.btnShow = true;
            }
            this.getCompanyMsg.RB_Group_Id=userInfo.RB_Group_id;    //集团ID
            this.getCompany()
            this.getList()
        },
        methods: {
            getCompany(){
                this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
                    if(res.data.resultCode==1){
                        this.companyList=res.data.data;
                    }else{}
                },err=>{})
            },
            // 是否已发放
            checkSelectable (row){
                return row.IsGiveOut != 1
            },
            // 已选可制单人员
            handleSelectionChange(val){
                this.multipleSelection = val;
                let zong = 0;
                this.multipleSelection.forEach((x) => {
                    if(this.BillMakingMsg.Type==1){
                        zong += x.Commission;
                    }else{
                        zong += x.WageMoney;
                    }

                });
                this.totalAmount = zong;
            },
            closeChangeMachie(done){//弹出框关闭初始化弹框内表单
		         done();
		    },

            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
            goUrl(path, id,type) {
                let title = ''
                if(type==1){
                    title = '当期利润差额'

                }else{
                    title = '期数详情'
                }
                this.$router.push({
                    path: path,
                    query: {
                        PeriodsId: id,
                        blank: 'y',
                        tab: title
                    }
                });
            },
            //获取数据
            getList() {
                this.loading = true;
                this.crmapipost(
                '/api/Commission/GetCommissionPeroidsPageList', this.msg,
                res => {
                    if (res.data.resultCode == 1) {
                        this.loading = false;
                        this.dataList = res.data.data.pageData;
                        this.total = res.data.data.count;
                    } else {
                        this.loading = false;
                        this.Error(res.data.message)
                    }
                },
                err => {}
                )
            },
            //生成提成报表
            generateTable() {
                if (!this.Month || this.Month == "") {
                    this.Error("请选择月份！")
                    return;
                }
                this.btnLoading = true;
                this.crmapipost(
                    "/api/Commission/SetTicketCommission", {
                      Month: this.Month,
                      IsForceSend:0
                    },
                    res => {
                        this.btnLoading = false;
                        if (res.data.resultCode == 1) {
                            this.handleCurrentChange(1);
                            this.Success('报表生成成功')
                        } else {
                          let buttomTitle
                          if(res.data.message.indexOf('Warning')!=-1){
                            buttomTitle = '强制发放'
                          }else{
                            buttomTitle = '确定'
                          }
                          this.$confirm(res.data.message, this.$t('tips.tips'), {
                              confirmButtonText: buttomTitle,
                              cancelButtonText: this.$t('pub.cancelBtn'),
                              type: "warning"
                          })
                          .then(() => {
                            if(buttomTitle=='强制发放'){
                              this.btnLoading = true;
                              this.crmapipost(
                              "/api/Commission/SetTicketCommission", {
                                Month: this.Month,
                                IsForceSend: 1 },
                              res => {
                                this.btnLoading = false
                                if (res.data.resultCode == 1) {
                                    this.handleCurrentChange(1);
                                    this.Success('报表生成成功')
                                }
                              })
                            }

                          })
                          .catch(() => {

                          });
                        }
                    }
                );
            },
            // 保存制单人员
            BillMaking(){
                if(this.multipleSelection.length==0){
                    this.Error("请选择需要制单的人员！")
                    return
                }
                if(this.totalAmount<=0){
                    this.Error("金额总额必须大于0！")
                    return
                }
                let data = []
                this.multipleSelection.map(item=>{
                    data.push(item.EmpId)
                })
                this.BillMakingMsg.EmpIds = data.join(',')
                this.$confirm("是否制单? 制单后无法更改制单状态,如需修改请联系管理员", this.$t('tips.tips'), {
                    confirmButtonText: this.$t('pub.sureBtn'),
                    cancelButtonText: this.$t('pub.cancelBtn'),
                    type: "warning"
                })
                .then(() => {
                    this.BillMakingFun()
                })
                .catch(() => {});


            },
            BillMakingFun(){
                this.crmapipost(
                    '/api/Commission/SetCommissionSendEmployee', this.BillMakingMsg,
                    res => {
                        if (res.data.resultCode == 1) {
                            this.BillMakingMsg.totalAmount = this.totalAmount
                            this.BillMakingMsg.OtherType = this.BillMakingMsg.Type==1?'56':'57'
                            let query = {
                                blank: "y",
                                tab: "新增付款单据",
                                Type: 2,
                                searchTitle: '提成',
                                companyID: this.msg.EmBranchId,
                                commissionObj: JSON.stringify(this.BillMakingMsg)
                            }
                            this.$router.push({
                                path: "/ChoiceAddFinancialDocuments",
                                query
                            });
                            this.Success('制单人员保存成功')
                            this.outerVisible = false
                            this.BillMakingMsg = {
                                PeroidsId: null,
                                Type: null,
                                EmpIds:''
                            }
                        } else {
                            this.Error(res.data.message)
                        }

                    },
                    err => {}
                )
            },
            // 点击制单
            YijianZD(item,type) {
                if(type==1){
                    if(this.msg.EmBranchId==-1){
                        this.Error("请选择提成归属公司！");
                        return;
                    }
                }
                this.outerVisible = true
                this.GetCommissionSendEmployeeList(item,type)
            },
            // 获取可制单人员
            GetCommissionSendEmployeeList(item,type){
                this.BillMakingMsg.PeroidsId = item.Id
                this.BillMakingMsg.Type = type
                let msg = {
                    PeroidsId: this.BillMakingMsg.PeroidsId,
                    Type: this.BillMakingMsg.Type,
                    EmBranchId: this.msg.EmBranchId
                }
                this.BillMakingLoading = true
                this.crmapipost(
                    '/api/Commission/GetCommissionSendEmployeeList', msg,
                    res => {
                        if (res.data.resultCode == 1) {
                            this.BillMakingLoading = false;
                            this.orderMakerList = res.data.data;
                        } else {
                            this.BillMakingLoading = false;
                            this.Error(res.data.message)
                        }
                    },
                    err => {}
                )
            },
            gofinancialdetail(id) {
                this.$router.push({
                    name: 'FinancialDocumentsDetail',
                    query: {
                        id: id,
                        blank: 'y',
                        tab: this.$t('objFill.documentparticulars')
                    }
                })
            }

        }
    }
</script>
