<template>
  <div class="distribution">
    
    <by-form :propConfig="formConfig" ref="form" />
    <div class="top-btn">
      <el-button type="primary" size="small" @click="saveHandle">保存</el-button>
      <div class="msg">注：根据国家规定，1级佣金+2级佣金不能超过30%</div>
    </div>
    <!-- <module-view :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList" /> -->
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { saleRankList,saleRankAdd,saleRankUpdate } from '@/api/distribution'
import editor from './editor.vue'
@Component({components:{}})
export default class DistributionDevel extends Vue {
  formConfig:any={
    attr:{
      width:'900px',
      rules:{
        minRate:[
          {required: true, message: '最小费率不能为空！', trigger: 'blur'},
          { type: 'number', message: '最小费率必须为数字值'}
        ],
        maxRate:[
          {required: true, message: '最大费率不能为空！', trigger: 'blur'},
          { type: 'number', message: '最大费率必须为数字值'}
        ],
        tip:[
          {required: true, message: '提示文字不能为空！', trigger: 'blur'}
        ],
        plan:[
          {required: true, message: '招募计划不能为空！', trigger: 'blur'}
        ]
      }
    },
    columns:[
      [{
        label:'最小费率(%)',
        prop:'minRate',
        component:'by-input',
        compConfig:{
          attr:{
            type:'number'
          }
        }
      }],
      [{
        label:'最大费率(%)',
        prop:'maxRate',
        component:'by-input',
        compConfig:{
          attr:{
            type:'number'
          }
        }
      }],
      [{
        label:'提示文字',
        prop:'tip',
        component:'by-input'
      }],
      [{
        label:'招募计划',
        prop:'plan',
        component:editor
      }]
    ]
  }
  config:any={
    attr:{
      calculateH:true
    },
    // search:{
    //   attr:{
    //     size:'small'
    //   },
    //   columns:[
    //     [{
    //       label:'内部订单号',
    //       prop:'orderId',
    //       component:'by-input'
    //     },{
    //       label:'买家ID',
    //       prop:'buyerId',
    //       component:'by-input'
    //     },{
    //       label:'买家帐号',
    //       prop:'buyerAccount',
    //       component:'by-input'
    //     },{
    //       label:'审核状态',
    //       prop:'status',
    //       component:'by-select',
    //       compConfig:{
    //         attr:{
    //           clearable:true,
    //           data:[{
    //             label:'待审核',
    //             value:'WaitConfirm'
    //           },{
    //             label:'已审核',
    //             value:'Confirmed'
    //           },{
    //             label:'已失效',
    //             value:'Invalid'
    //           }]
    //         }
    //       }
    //     }],
    //     [{
    //       span:6,
    //       label:'支付渠道',
    //       prop:'payment',
    //       component:'by-input'
    //     },{
    //       span:6,
    //       label:'卖家ID',
    //       prop:'sellerId',
    //       component:'by-input'
    //     },{
    //       span:6,
    //       label:'卖家账号',
    //       prop:'sellerAccount',
    //       component:'by-input'
    //     }
    //     // ,{
    //     //   label:'支付时间',
    //     //   prop:'payDate',
    //     //   component:'by-date-picker',
    //     //   compConfig:{
    //     //     attr:{
    //     //       editable:false,
    //     //       type:'datetimerange',
    //     //       format:'yyyy-MM-dd HH:mm:ss'
    //     //     }
    //     //   }
    //     // }
    //     ]
    //   ]
    // },
    tool:{
      tools:{
        // search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        // align:'center',
      },
      columns:[{
        title:'一级费率',
        field:'rate1',
        width:120
      },{
        title:'二级费率',
        field:'rate2',
        width:120,
      },{
        title:'三级费率',
        field:'rate3',
        width:120
      },{
        title:'提示文字',
        field:'tip'
      },{
        title:'招募计划',
        field:'plan',
        width:120
      },{
        title:'背景',
        field:'background',
        width:120
      },{
        title:'最大费率',
        field:'maxRate',
        width:120
      },{
        title:'最小费率',
        field:'minRate',
        width:120
      },{
        title:'应用ID',
        field:'appId',
        width:120
      },{
        title:'流程ID',
        field:'processId',
        width:120
      },{
        title:'状态',
        field:'status',
        width:140
      }]
    }
  }
  load=false
  isSearch=false
  timeNum = 0;
  value:any=null
  mounted(){
    this.$nextTick(()=>{
      this.getList()
    })
  }
  saveHandle(){
    (this.$refs.form as any).validate().then(()=>{
      let data = (this.$refs.form as any).getValue();
      if(data.minRate > data.maxRate){
        this.$message({
          message:'最小费率值不能大于最大费率值！',
          type:'success'
        })
        return
      }
      if(data.id){
        saleRankUpdate(data).then(() => {
          this.$message({
            message:'保存成功！',
            type:'success'
          })
        }).catch(()=>{})
      }else{
        saleRankAdd(data).then(() => {
          this.$message({
            message:'保存成功！',
            type:'success'
          })
        }).catch(()=>{})
      }
      
    }).catch(()=>{})
    
  }

  //列表请求（只有分页，不包含搜素条件）
  getList(){
    this.isSearch = false;
    let data = {
      pageNo:1,
      pageSize:20
    }
    this.requestList(data);
  }

  requestList(data:any){
    this.load = true;
    saleRankList(data).then((res:any) => {
      this.value = res.data.records[0]
      if(this.value){
        this.$nextTick(() =>{
          (this.$refs.form as any).setValue(this.value);
        })
      }

    }).catch(()=>{
      this.load = false;
    })
  }
}
</script>

<style lang="scss" scoped>
.distribution{
  width: 100%;
  height: 100%;
  .top-btn{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 600px;
    margin: 0 auto;
    padding-top: 100px;
    .msg{
      font-size: 12px;
      color: burlywood;
      padding-top: 4px;
      text-align: center;
    }
  }
}
</style>