<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 0px; */
    }

    .domesticCommission .hoverSpan span:hover {
        cursor: pointer;
        text-decoration: underline;
        color: red;
    }
    .tdOne{
        border-bottom: 1px solid #eeeeee;
        padding: 0 0 5px 0;
    }
    .tdTwo{
        padding: 5px 0 0 0;
    }
    .singeRowTableB{
        width: 100%;
        border-collapse: collapse;
    }
    .singeRowTableB tr td{
        padding: 0;
        border: 0;
    }
</style>
<template>
    <div class="flexOne domesticCommission">
        <div>
            <ul class="opUl">
                <li>
                    <em>出团公司</em>
                    <el-select v-model="msg.OutBranchId" size="mini" @change="handleCurrentChange(1)" >
                        <el-option label="不限" :value="-1"></el-option>
                        <el-option v-for="(item,index) in BranchList" :key="item.index" :label="item.BName"
                            :value="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>
                    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
                        <tr><th style="width: 25%;">类型</th>
                            <th style="width: 25%;">总提成</th>
                            <th style="width: 25%;">所属公司提成</th>
                            <th style="width: 25%;">财务单据</th></tr>
                    </table>
                </th>
                <th>操作信息</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in dataList" style="line-height: 15px;">
                <td>{{item.Periods}}</td>
                <td>{{item.Name}}</td>
                <td>
                    <table class="singeRowTableB" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td style="width: 25%;">
                                <table class="singeRowTableB" border="0" cellspacing="0" cellpadding="0">
                                    <tr style="border-bottom: 1px solid #eeeeee;">
                                        <td >
                                            销售
                                        </td>
                                    </tr>
                                    <tr>
                                        <td >
                                            OP
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td style="width: 25%;">
                                <table class="singeRowTableB" border="0" cellspacing="0" cellpadding="0">
                                    <tr style="border-bottom: 1px solid #eeeeee;">
                                        <td >
                                            {{item.SellSumPrice?item.SellSumPrice:'-'}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td >
                                            {{item.OPSumPrice?item.OPSumPrice:'-'}}
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td style="width: 25%;">
                                <table class="singeRowTableB" border="0" cellspacing="0" cellpadding="0">
                                    <tr style="border-bottom: 1px solid #eeeeee;">
                                        <td >
                                            {{item.BranchCommission?item.BranchCommission:'-'}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td >
                                            {{item.BranchOPCommission?item.BranchOPCommission:'-'}}
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td style="width: 25%;">
                                <table class="singeRowTableB" border="0" cellspacing="0" cellpadding="0">
                                    <tr style="border-bottom: 1px solid #eeeeee;">
                                        <td >
                                            <span v-for="(x,y) in item.SellFinanceIdList" >
                                                <span style="cursor: pointer;text-decoration: underline;" @click='gofinancialdetail(x)'>
                                                    {{x}}
                                                </span>
                                               {{item.SellFinanceIdList.length == y+1 ?'':'、'}}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span v-for="(x,y) in item.OPFinanceIdList" >
                                                <span style="cursor: pointer;text-decoration: underline;" @click='gofinancialdetail(x)'>
                                                    {{x}}
                                                </span>
                                               {{item.OPFinanceIdList.length == y+1 ?'':'、'}}
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table> 
                </td>
                <td>
                    <div>{{item.CreateByStr}}</div>
                    <div>{{item.CreateStr}}</div>
                </td>
                <td>
                    <div class="tdOne">
                        <el-tooltip class="item" effect="dark" content="查看用户" placement="top">
                            <el-button type="primary" class="CM_look" @click="goUrl('ServiceCommissionUser',item.Id,1)"
                                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>
                    </div>
                    <div class="tdTwo">
                        <el-tooltip class="item" effect="dark" content="查看用户" placement="top">
                            <el-button type="primary" class="CM_look" @click="goUrl('ServiceCommissionUser',item.Id,2)"
                                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,2)" type="danger" class="CM_look" v-if="cMaker==true" 
                                icon="iconfont icon-mui-icon-add" circle></el-button>
                        </el-tooltip>
                    </div>
                    


                </td>
            </tr>
            <tr v-if="dataList.length==0">
                <td style="text-align:center" colspan="7">暂无数据</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>

    </div>
</template>

<script>
    import moment from "moment"
    export default {
        data() {
            return {
                Month: moment().subtract(1,'months').format("YYYY-MM"),
                msg: {
                    pageIndex: 1,
                    pageSize: 20,
                    Periods: 0,
                    OutBranchId:-1,
                },
                loading: false,
                //数据源
                dataList: [],
                total: 0,
                btnShow: false,
                PeriodsList: [],
                btnLoading: false,
                BranchList:[],
                cMaker:false,//是否可以制单
            }
        },
        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;
            }
            if (ActionMenuCode.indexOf('home_DCommissionZD') != -1) {
                this.cMaker = true;
            }
            // this.getqishilist()
            this.getList();
            this.getCompanyList()

        },
        methods: {
              //初始化公司
              getCompanyList() {
                let userInfo = this.getLocalStorage();
                var RB_Group_id = userInfo.RB_Group_id;
                let msg = {
                    Status: 0,
                    is_show: 0,
                    RB_Group_Id: RB_Group_id
                };
                this.apipost(
                    "admin_get_BranchGetList",
                    msg,
                    res => {
                        if (res.data.resultCode == 1) {
                            this.BranchList = res.data.data;

                        }
                    },
                    err => { }
                );
            },
            getqishilist() {
                this.apipost(
                    "sellcommission_GetGNCommissionPeriodsList",
                    {},
                    res => {
                        if (res.data.resultCode == 1) {
                            this.PeriodsList = res.data.data;
                            // if(this.PeriodsList && this.PeriodsList.length>0){
                            //     this.msg.Periods = Number(this.PeriodsList[0].Id) 
                            // }


                        } else {
                            this.Error(res.data.message);

                        }
                    },
                    null
                );
            },


            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
            goUrl(path, id , type) {
                this.$router.push({
                    path: path,
                    query: {
                        PeriodId: id,
                        blank: 'y',
                        Type: type,
                        tab: '期数详情',
                    }
                });
            },
            //获取数据
            getList() {
                this.loading = true;
                this.apipost(
                    "sellcommission_GetDxCommissionPageList",
                    this.msg,
                    res => {
                        this.loading = false;
                        if (res.data.resultCode == 1) {
                            this.dataList = res.data.data.pageData;
                            this.total = res.data.data.count;
                        } else {
                            this.Error(res.data.message);
                        }
                    },
                    null
                );
            },
            //生成提成报表
            generateTable() {
                if (!this.Month || this.Month == "") {
                    this.Error("请选择月份！")
                    return;
                }
                this.btnLoading = true;
                this.apipost(
                    "sellcommission_Post_SetDxCommissionSend", { Month: this.Month },
                    res => {
                        this.btnLoading = false;

                        if (res.data.resultCode == 1) {
                            this.handleCurrentChange(1);
                            this.Success('报表生成成功')
                        } else {
                            this.Error(res.data.message);
                        }
                    },
                    null
                );
            },
            YijianZD(item,type) {
                let Money 
                if(this.msg.OutBranchId>-1){
                    if(type==1){
                        if(item.BranchCommission>0){
                            Money=item.BranchCommission
                        }else{
                            this.Error("公司提成为0,不能制单!")
                            return;
                        }
                    }if(type==2){
                        if(item.BranchOPCommission>0){
                            Money=item.BranchOPCommission
                        }else{
                            this.Error("公司提成为0,不能制单!")
                            return;
                        }
                    }
                    
                }else{
                    Money=item.SumPrice
                }
                let obj = {
                    CostType: 16,
                    Money: Money,
                    CurrencyId: 1,
                    XSTC: 1,
                    OtherType:type==1?63:64,
                    ReFinanceId:item.Id
                }
                let query = {
                    blank: "y",
                    tab: "新增付款单据",
                    Type: 2,
                    IsUploadPic: 1,
                    orderObj: JSON.stringify(obj)
                }
                if(this.msg.OutBranchId>-1){
                    query.id = 30
                    query.Name = "分公司销售提成单"
                }else{
                    query.id = 28
                    query.Name = "总部销售提成单"
                }
                
                this.$router.push({
                    path: "/addFinancialDocuments",
                    query
                });

            },
            gofinancialdetail(id){
                this.$router.push({
                    name: 'FinancialDocumentsDetail',
                    query: {
                    id: id,
                    blank: 'y',
                    tab: '单据详情'
                    }
                })
            }

        }
    }
</script>