<style>
    .baseSet_Title {
        width: 120px !important;
        padding: 18px 0 0 16px;
        text-align: right;
    }

    .salesRules .border-bottom {
        /* border-bottom: 1px dashed #EEE; */
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .salesRules .text-bottom {
        height: 32px;
        line-height: 32px;
        margin-bottom: 10px;
    }
</style>
<template>
    <div class="page-body studyAbroadRules">
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
                <div class="col-3">
                    
                </div>
            </div>
        </div>
        <template>
            <q-table :loading="loading" :pagination="tabeMsg" no-data-label="暂无相关数据" flat class="sticky-column-table"
                separator="horizontal" :data="dataList" :columns="columns" row-key="name">
                <template v-slot:top="props">
                    <q-space />
                    <div class="page-option">
                        <q-btn color="accent" size="sm" v-if='isSalerule_preserve == true' @click="preservation()"
                            ref="addBtn" label="保存规则" />
                    </div>
                </template>
                <template v-slot:body-cell-OrderType="props">
                    <q-td :props="props">
                        <span v-if="props.row.OrderType==1">直通车</span>
                        <span v-if="props.row.OrderType==2">代收代付</span>
                        <span v-if="props.row.OrderType==3">返佣</span>
                    </q-td>
                </template>
                <template v-slot:body-cell-CommissionType="props">
                    <q-td :props="props">
                        <el-select v-model="props.row.CommissionType" placeholder="请选择" size="small">
                            <el-option
                              v-for="item in commissionType"
                              :key="item.Id"
                              :label="item.Name"
                              :value="item.Id">
                            </el-option>
                          </el-select>
                    </q-td>
                </template>
                <template v-slot:body-cell-CommissionRate="props">
                    <q-td :props="props">
                        <el-input v-model="props.row.CommissionRate" style='width:180px' type="number" :min='0' :max='100'
                            placeholder="请输入内容" @blur='getinput(props)' size="small">
                            <template slot="append">%</template>
                        </el-input>
                    </q-td>
                </template>
                <template v-slot:bottom>
                </template>

            </q-table>
        </template>

    </div>
</template>
<script>
    import {
        GetClassTypePageList,
    } from '../../../api/system/index';
    import {
        setSellStudyAbroadRule,
        getSellStudyAbroadRuleList,
    } from '../../../api/finance/index'
    export default {
        meta: {
            title: "留学提成规则"
        },
        props: {},
        components: {},
        data() {
            return {


                columns: [{
                    name: 'OrderType',
                    label: '类型',
                    field: 'OrderType',
                    align: 'left'
                },
                {
                    name: 'CommissionType',
                    label: '提成类型',
                    align: 'left',
                    field: 'CommissionType',
                    field: row => row.List
                },
                {
                    name: 'CommissionRate',
                    label: '销售提成比例',
                    align: 'left',
                    field: 'CommissionRate',
                    field: row => row.List
                },



                ],
                loading: false,
                dataList: [], //列表数据

                //列表数据参数
                tabeMsg: {
                    pageIndex: 1,
                    pageSize: 99
                },
                pageCount: 0,
                isSalerule_preserve: false,
                commissionType: [
                    { Id: 1, Name: '销售额' },
                    { Id: 2, Name: '利润' },

                ]
            }
        },
        created() {
            let userinfo = this.getLocalStorage();
            userinfo.ActionMenuList.map(x => {//判断权限
                if (x.FunctionCode == "Salerule_studyabpreserve") {//判断是否有保存的权限
                    this.isSalerule_preserve = true;
                    return
                }
            })
        },
        mounted() {

            this.getRuleList(); //获取规则
           
        },
        methods: {
            getRuleList() {
                this.loading = true;
                getSellStudyAbroadRuleList({}).then(res => {
                    this.loading = false;
                    if (res.Code == 1) {
                        this.dataList = res.Data
                    }
                })
            },
         
            getinput(row){
                let val = this.dataList[row.pageIndex].CommissionRate
                if(val<0 || val==''){
                    this.dataList[row.pageIndex].CommissionRate = 0
                }
                if(val>100){
                    this.dataList[row.pageIndex].CommissionRate = 100
                }
            },
       
            preservation() { //保存规则
                
                setSellStudyAbroadRule(this.dataList).then(res => {
                    if (res.Code == 1) {
                        this.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: '数据保存成功！',
                            position: 'top'
                        })
                        this.getRuleList()
                    }
                })
            },
         

        },
    }

</script>
<style lang="sass">
    @import url('~assets/css/table.sass')
</style>