<style>
    .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;
    }
</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>总金额</th>
                <th>所属公司提成</th>
                <th>财务单据</th>
                <th>操作信息</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in dataList">
                <td>{{item.Periods}}</td>
                <td>{{item.Name}}</td>
                <td>
                    <p>{{item.SumPrice}}</p>

                </td>
                <td>{{item.BranchCommission}}</td>
                <td>
                    <span v-for="(x,y) in item.FinanceIdList">
                        <span style="cursor: pointer;text-decoration: underline;" @click='gofinancialdetail(x)'>
                            {{x}}
                        </span>
                        {{item.FinanceIdList.length == y+1 ?'':'、'}}
                    </span>
                </td>
                <td>
                    <div>{{item.CreateByStr}}</div>
                    <div>{{item.CreateStr}}</div>
                </td>
                <td>

                    <el-tooltip class="item" effect="dark" content="查看用户" placement="top">
                        <el-button type="primary" class="CM_look" @click="goUrl('OPsalesCommissionUser',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)" type="danger" class="CM_look" v-if="cMaker==true"
                            icon="iconfont icon-mui-icon-add" circle></el-button>
                    </el-tooltip>


                </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,
                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.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 => { }
                );
            },



            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
            goUrl(path, id) {
                this.$router.push({
                    path: path,
                    query: {
                        PeriodId: id,
                        blank: 'y',
                        tab: '期数详情'
                    }
                });
            },
            //获取数据
            getList() {
                this.loading = true;
                this.apipost(
                    "opcommission_GetGNOPCommissionPageList",
                    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(
                    "opcommission_Post_SetGNOPCommissionSend", { 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) {
                let Money
                if (this.msg.OutBranchId > -1) {
                    if (item.BranchCommission > 0) {
                        Money = item.BranchCommission
                    } else {
                        this.Error("公司提成为0,不能制单!")
                        return;
                    }
                } else {
                    Money = item.SumPrice
                }
                let obj = {
                    CostType: 112,
                    Money: Money,
                    // CurrencyId: 1,
                    // XSTC: 1,
                    OtherType: 48,
                    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>