<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>
                    <!-- S_CheckBranchOrder -->
                    <el-select v-model="msg.OutBranchId" size="mini" @change="handleCurrentChange(1)"
                    :disabled="false">
                        <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-input maxlength="50" v-model="msg.Name" class="permiss-input w200"
                    @keyup.native.enter="msg.pageIndex=1,getList()"
                    :placeholder="$t('pub.pleaseImport')"></el-input>
                </li> -->
                <li>
                    <em>期数</em>
                    <el-select v-model="msg.PeriodsId" size="mini" filterable @change="msg.pageIndex=1,getList()">
                        <el-option label="不限" :value="-1"></el-option>
                        <el-option v-for="(item,index) in PeroidsList" :key="item.index" :label="item.Periods"
                            :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&&isAuthority">
                    <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>财务单据</th>
                <th width="280">汇率</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>
                    <p>{{item.SumDiJieBonus?item.SumDiJieBonus:'-'}}</p>

                </td>
                <td>
                    <p>{{item.BranchDiJieBonus?item.BranchDiJieBonus:'-'}}</p>

                </td>
                <td>
                    <p>{{item.SumYearBonus?item.SumYearBonus:'-'}}</p>
                </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 style="display: flex;justify-content: space-between;align-items: center;padding: 0 5px;"
                    v-for="(x,y) in item.CurrencyRateList" :key="y">
                            <div
                            :style="{'border-top': y!=0? '1px solid #eeee':''}"
                            style="text-align: left;">
                                <span v-if="x.OutBranchName">{{x.OutBranchName}}：</span>
                                <span>
                                    {{x.Rate?x.Rate:'未设汇率'}}
                                </span>
                               <span style="color: #6E6E6E;">{{x.CurrencyName}}</span>

                            </div>
                            <div style="flex-shrink: 0;justify-content: end;align-items: flex-end;"
                            v-if="y==item.CurrencyRateList.length-1&&isRateAuthoTW&&item.FinanceIdList.length==0">
                                <i class="el-icon-edit"
                               style="color: #409eff;cursor: pointer;" @click="editRate(item)"></i>
                            </div>
                    </div>
                </td>
                <td>
                    <div>{{item.CreateByStr}}</div>
                    <div>{{item.CreateStr}}</div>
                </td>
                <td>
                    <div style="display: flex;">
                        <el-tooltip class="item" effect="dark" content="查看用户" placement="top">
                            <el-button type="primary" class="CM_look" @click="goUrl('domesticCommissionUserTW',item.Id)"
                                icon="iconfont icon-chakan" circle></el-button>
                        </el-tooltip>
                        <!--  v-if="cMaker==true&&item.BranchCommission>0&&item.CurrencyRateList[0].Rate>0" -->
                        <el-tooltip class="item" effect="dark" content="提成制单" placement="top">
                            <el-button @click="YijianZD(item,1)" type="danger" class="CM_look"
                                icon="iconfont icon-mui-icon-add" circle></el-button>
                        </el-tooltip>
                        <!--  v-if="cMaker==true&&item.SumDiJieBonus>0&&item.CurrencyRateList[0].Rate>0"  -->
                        <el-tooltip class="item" effect="dark" content="地接奖励制单" placement="top">
                            <el-button @click="YijianZD(item,2)" type="danger" class="CM_look"
                                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="11">暂无数据</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 title="修改本位币汇率" :visible.sync="showVisible" width="450px">
            <el-form ref="addMsg" :model="addMsg" :rules="rules" label-width="110px">
                <div v-for="(x,y) in addMsg.CurrencyRate" :key="y">
                    <el-row>
                        <el-col :span="5">
                            <el-form-item :label="x.OutBranchName">

                            </el-form-item>
                        </el-col>
                        <el-col :span="19">
                            <el-form-item label="发放汇率" :prop="'CurrencyRate.'+ y +'.Rate'"
                            :rules="productCurrencyRate.Rate">
                                <el-input type="Number" v-model="x.Rate">
                                    <template slot="append" style="width: 100%;">{{x.CurrencyName}}</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                      </el-row>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button size="small" @click="showVisible = false">取 消</el-button>
              <el-button size="small" type="danger" @click="submit('addMsg')">确 定</el-button>
            </span>
          </el-dialog>
    </div>
</template>

<script>
    import moment from "moment"
    export default {
        data() {
            return {
                //所有币种
                allCurrencyList: [],
                showVisible: false,
                rules:{},
                productCurrencyRate: {
                    CurrencyId: [{
                        required: true,
                        message: '请选择币种',
                        trigger: 'change'
                    }],
                    Rate: [{
                        required: true,
                        message: '本位币汇率不能为空',
                        trigger: 'blur'
                    }],
                },
                addMsg:{
                    PeriodsId: 0,
                    CurrencyRate:[
                        {
                            CurrencyId: 0,
                            Rate: 0,
                            CurrencyName: '',
                        }
                    ]
                },
                PeroidsList: [],
                Month: moment().subtract(1,'months').format("YYYY-MM"),
                msg: {
                    pageIndex: 1,
                    pageSize: 20,
                    PeriodsId: -1,
                    Name: '',
                    OutBranchId:-1,
                },
                loading: false,
                //数据源
                dataList: [],
                total: 0,
                btnShow: false,
                PeriodsList: [],
                btnLoading: false,
                BranchList:[],
                cMaker:false,//是否可以制单
                isRateAuthoTW: false,//是否可以修改汇率
                S_CheckBranchOrder: false,//查看公司下订单
                isAuthority: false
            }
        },
        mounted() {
            let userInfo = this.getLocalStorage();
            let ActionMenuCode = userInfo.ActionMenuCode;
            // this.msg.OutBranchId = userInfo.RB_Branch_id
            this.msg.OutBranchId = 1220
            if (ActionMenuCode.indexOf('F_DCommissionSend') != -1) {
                this.btnShow = true;
            }
            if (ActionMenuCode.indexOf('home_DCommissionZD') != -1) {
                this.cMaker = true;
            }
            if (ActionMenuCode.indexOf('isRateAuthoTW') != -1){
                this.isRateAuthoTW = true
            }
            if (ActionMenuCode.indexOf('S_CheckBranchOrder') != -1 ){
                this.S_CheckBranchOrder = true
            }
            if(userInfo.BranchName=='成都印象'||userInfo.BranchName=='台湾印象'||userInfo.BranchName=='微途科技'){
              this.isAuthority = true
              this.getList();
            }
            this.getCompanyList()
            this.GetCommissionPeroidsList()
            this.getAllCurrency()
        },
        methods: {
            //获取所有币种
            getAllCurrency() {
                this.apipost(
                "financeinfo_post_GetList",
                {},
                res => {
                    if (res.data.resultCode == 1) {
                    this.allCurrencyList = res.data.data;
                    }
                },
                err => { }
                );
            },
            editRate(item){
                this.addMsg.PeriodsId = item.Id
                this.addMsg.CurrencyRate = JSON.parse(JSON.stringify(item.CurrencyRateList))

                this.showVisible = true
            },
            submit(formName) {
                for(let i=0;i<this.addMsg.CurrencyRate.length;i++){
                    if(this.addMsg.CurrencyRate[i].Rate<=0){
                        this.Error('汇率须大于0')
                        return
                    }
                }
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.apipost(
                    'sellcommission_SetTWSellPeriodsRate', this.addMsg,
                    res => {
                        if (res.data.resultCode == 1) {
                        this.getList();
                        this.showVisible = false;
                        this.Success(res.data.message)

                        } else {
                        this.Error(res.data.message)
                        }
                    },
                    err => {}
                    )
                }
                });
            },
            GetCommissionPeroidsList() { //期数下拉
                this.apipost("sellcommission_GetTWSellCommissionPeriodsList", {}, res => {
                    if (res.data.resultCode == 1) {
                        this.PeroidsList = res.data.data;
                    } else {
                    this.Error(res.data.message);
                    }
                },
                err => {}
                );
            },
              //初始化公司
              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(
                    "sellcommission_GetTWSellCommissionPageList",
                    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_SetTWSellCommissionSend", { 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 = 0
                if(type==1){
                  if(this.msg.OutBranchId>0){
                    if(item.BranchCommission>0){
                        Money=item.BranchCommission
                    }else{
                        this.Error("公司提成为0,不能制单!")
                        return;
                    }
                  }else{
                      Money=item.SumPrice
                  }
                }else{
                  Money=item.BranchDiJieBonus
                }

                let obj = {
                    CostType: type==1?16:186,
                    Money: Money,
                    CurrencyId: item.CurrencyRateList[0].CurrencyId,
                    XSTC: 1,
                    OtherType: 70,
                    ReFinanceId:item.Id,
                    ReFinanceId2: type,//1提成 2地接奖励
                    Rate: item.CurrencyRateList[0].Rate,
                }
                let query = {
                    blank: "y",
                    tab: "新增付款单据",
                    Type: 2,
                    IsUploadPic: 1,
                    orderObj: JSON.stringify(obj),
                    companyID: this.msg.OutBranchId
                }
                // 费用流程
                if(type==1){
                  if(this.msg.OutBranchId>0){
                    query.id = 30
                    query.Name = "分公司销售提成单"
                  }else{
                      query.id = 28
                      query.Name = "总部销售提成单"
                  }
                }else{
                  query.id = 87
                  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>