<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;
        line-height: 35px;
    }
    .tdTwo{
        line-height: 35px;
    }
    .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>{{$t('scen.sc_cp')}}</em>
                    <el-select v-model="msg.OutBranchId" size="mini" @change="handleCurrentChange(1)" >
                        <el-option :label="$t('pub.unlimitedSel')" :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>{{$t('objFill.v101.FinancialModule.xuanzheyf')}}</em>
                    <el-date-picker v-model="Month" value-format="yyyy-MM" type="month" :placeholder="$t('op.ChoiceMonth')">
                    </el-date-picker>
                </li>
                <li v-show="btnShow">
                    <el-button size="mini" type="danger" style="border-radius:14px" :loading="btnLoading"
                        @click="generateTable">{{$t('objFill.v101.FinancialModule.shengchengtc')}}</el-button>
                </li>

            </ul>
        </div>
        <table v-loading="loading" class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <th>{{$t('tips.qishu')}}</th>
                <th>{{$t('hotel.hotel_nameOf')}}</th>
                <th>{{$t('advmanager.v_type')}}</th>
                <th>{{$t('objFill.zongticeng')}}</th>
                <th>{{$t('objFill.v101.administrative.suoshugstc')}}</th>
                <th>{{$t('hotel.hotel_Order')}}</th>
                <th>{{$t('objFill.v101.FinancialModule.chaozuoxx')}}</th>
                <th>{{$t('system.table_operation')}}</th>
            </tr>
            <tr v-for="item in dataList" style="line-height: 15px;">
                <td>{{item.Periods}}</td>
                <td>{{item.Name}}</td>
                <td>
                    <div class="tdOne">{{$t('visaT.sale')}}</div>
                    <div class="tdTwo">OP</div>
                </td>
                <td>
                    <div class="tdOne">{{item.SellSumPrice}}</div>
                    <div class="tdTwo">{{item.OPSumPrice}}</div>

                </td>
                <td>
                    <div class="tdOne">{{item.BranchCommission?item.BranchCommission:'-'}}</div>
                    <div class="tdTwo">{{item.BranchOPCommission?item.BranchOPCommission:'-'}}</div>
                </td>
                <td>
                    <div class="tdOne">
                        <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>
                    </div>
                    <div class="tdTwo">
                        <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>
                    </div>

                </td>
                <td :rowspan="1">
                    <div>{{item.CreateByStr}}</div>
                    <div>{{item.CreateStr}}</div>
                </td>
                <td>
                    <div class="tdOne">
                        <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.FinancialModule.chakanyh')" 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="$t('objFill.preparedocument')" 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="$t('objFill.v101.FinancialModule.chakanyh')" 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="$t('objFill.preparedocument')" 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="8">{{$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>

    </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(this.$t('objFill.v101.FinancialModule.qingxayf'))
                    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(this.$t('objFill.v101.administrative.baobiaosccg'))
                        } 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(this.$t('objFill.v101.FinancialModule.gongstcwnbnzd'))
                            return;
                        }
                    }if(type==2){
                        if(item.BranchOPCommission!=0){
                            Money=item.BranchOPCommission
                        }else{
                            this.Error(this.$t('objFill.v101.FinancialModule.gongstcwnbnzd'))
                            return;
                        }
                    }

                }else{
                    Money=item.SumPrice
                }
                if(type==1){
                    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 > 0){
                        query.id = 30
                        query.Name = "分公司销售提成单"
                    }else{
                        query.id = 28
                        query.Name = "总部销售提成单"
                    }

                    this.$router.push({
                        path: "/addFinancialDocuments",
                        query
                    });
                }else{
                    let obj = {
                        CostType: 112,
                        Money: Money,
                        // CurrencyId: 1,
                        // XSTC: 1,
                        OtherType: 64,
                        ReFinanceId: item.Id,
                        SelectState: true,
                        OrderSource: 8,
                        OrderID: 0,
                    }
                    let query = {
                        blank: "y",
                        tab: "新增付款单据",
                        Type: 2,
                        IsUploadPic: 1,
                        orderObj: JSON.stringify(obj)
                    }
                    if (this.msg.OutBranchId > 0) {
                        query.id = 31
                        query.Name = "分公司销售提成单"
                    } else {
                        query.id = 29
                        query.Name = "总部销售提成单"
                    }

                    this.$router.push({
                        path: "/addFinancialDocuments",
                        query
                    });
                }


            },
            gofinancialdetail(item){
                let arr = item.split('-')
                this.$router.push({
                    name: 'FinancialDocumentsDetail',
                    query: {
                    id: arr[0],
                    blank: 'y',
                    tab: '单据详情'
                    }
                })
            }

        }
    }
</script>