<style>
    .activityDeploy .Period-rules {
    display: flex;
    margin-bottom: 24px;
    padding-left: 20px;
  }

  .activityDeploy .Period_Spreate {
    flex: 1;
    min-width: 200px;
    margin-right: 32px;
  }

  .activityDeploy .Period-rule-title {
    color: #646a73;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
  }

  .activityDeploy .Period-info-icon {
    margin-left: 8px;
    color: #8f959e;
    line-height: 1;
    vertical-align: top;
  }
  .baseSetForm_Dialog {
    margin: 20px;
  }
  .cycle_Title {
    font-size: 20px;
    font-weight: 500;
    color: #1f2329;
  }

  .Period-alert {
    padding: 9px 16px;
    border-radius: 4px;
    background-color: #f0f4ff;
    line-height: 22px;
    color: #1f2329;
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 13px;
  }

  .Okr_Length {
    font-weight: 500;
    color: #1f2329;
    margin-top: 15px;
  }

  .FormItem-asterisk {
    position: relative;
    top: 3px;
    margin-left: 3px;
    color: #f54a45;
    line-height: 1;
  }

  .baseSetForm_Dialog .el-radio {
    display: block;
    margin-bottom: 15px;
  }
</style>
<template>
  <div class="page-body activityDeploy">
    <div class="page-search row items-center" style="justify-content: space-between;">
        <span style="font-size: 20px;font-weight: 400;">活动配置 <span style="font-size: 16px;"></span> </span>
        <q-btn color="accent" size="sm" class="q-mr-md" @click="getedit" label="修改基础配置" />
    </div>
    <div v-if="activityobj">
        <div class="Period-rules">
            <div class="Period_Spreate">
              <div class="Period-rule-title">活动类型</div>
              <div>{{activityobj.Type==1?'按人头':'百分比'}}</div>
            </div>
            <div class="Period_Spreate">
                <div class="Period-rule-title">{{activityobj.Type==1?'活动提成金额':'活动提成比例'}}</div>
                <div>{{activityobj.Type==1?activityobj.CommissionMoney+'元':activityobj.CommissionMoney+'%'}}</div>
              </div>
        </div>
        <div class="Period-rules">
            <div class="Period_Spreate">
              <div class="Period-rule-title">操作人</div>
              <div>{{activityobj.UpdateByName}}</div>
            </div>
            <div class="Period_Spreate">
                <div class="Period-rule-title">操作时间</div>
                <div>{{activityobj.UpdateTime}}</div>
              </div>
        </div>
          
    </div>
    <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeProcess">
        <q-card style="margin-top:61px;width:400px" class="no-border-radius classinfo_Dialog">
          <div class="baseSetForm_Dialog">
            <div class="cycle_Title">活动设置修改</div>
            <div class="Okr_Length">提成方式<span class="FormItem-asterisk">*</span></div>
            <div class="q-gutter-sm" style="margin: 10px 0;">
                <q-radio v-model="addMsg.Type" val="1" label="人头" @input="getradio"/>
                <q-radio v-model="addMsg.Type" val="2" label="百分比" @input="getradio"/>
            </div>
            <div class="Okr_Length" v-if="addMsg.Type==1">活动提成金额<span class="FormItem-asterisk">*</span></div>
            <el-input v-if="addMsg.Type==1" type="text" v-model="addMsg.CommissionMoney" style="margin: 10px 0;" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''" size="small">
                <template slot="append">元</template>
            </el-input>

            <div class="Okr_Length" v-if="addMsg.Type==2">活动提成比例<span class="FormItem-asterisk">*</span></div>
            <el-input v-if="addMsg.Type==2" type="number" :min='1' :max='100' v-model="addMsg.CommissionMoney" style="margin: 10px 0;"  @input="getbaifenbi"   size="small">
                <template slot="append">%</template>
            </el-input>


            <q-card-actions align="right" class="bg-white" style="margin-top:20px;">
                <q-btn label="取消" flat color="grey-10" size="sm" @click="closeProcess"
                  style="font-weight:400 !important" />
                <q-btn label="确认" color="accent q-px-md" size="sm" style="font-weight:400 !important"
                  @click="setCheckStatus()" />
            </q-card-actions>
            

    
          </div>
          
        </q-card>
        <div class="dialog-out-close" @click="closeProcess"
          style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
          <q-icon name="iconfont icon-jujue1" size="26px" />
        </div>
      </q-dialog>
   
  </div>
</template>
<script>
  import {
        getActivityConfigInfo,
        setActivityConfig
    } from '../../../api/finance/index'
  export default {
    meta: {
      title: "活动配置"
    },
    components: {
   
    },
    data() {
      return {
        loading:false,
        persistent:false,
        activityobj:null,
        addMsg:{
            Id:0,
            Type:'1',
            CommissionMoney:1,
        },
      }
    },
    mounted() {
        this.getActivityInfo()
    },
    methods: {
      getActivityInfo() {
        this.loading = true;
        getActivityConfigInfo({}).then(res => {
            if (res.Code == 1) {
                this.loading = false;
                this.activityobj = res.Data
            }
        })
      },
       //关闭流程设置
       closeProcess() {
        this.persistent = false;
      },
      getedit(){
        this.addMsg.Id = this.activityobj.Id 
        this.addMsg.Type = (this.activityobj.Type).toString()
        this.addMsg.CommissionMoney = this.activityobj.CommissionMoney 
        this.persistent = true;

      },
      getradio(){
        this.$forceUpdate()
        if(this.addMsg.Type == 2){
            if(this.addMsg.CommissionMoney>100){
                this.addMsg.CommissionMoney = 100
            }else if( this.addMsg.CommissionMoney<1){
                this.addMsg.CommissionMoney = 1
            }
            if(this.addMsg.CommissionMoney && (this.addMsg.CommissionMoney.toString()).indexOf('.')!=-1){
                this.addMsg.CommissionMoney = this.addMsg.CommissionMoney?this.addMsg.CommissionMoney.toFixed(0):1
            }
            
        }
      },
      getbaifenbi(e){
        this.addMsg.CommissionMoney=this.addMsg.CommissionMoney?this.addMsg.CommissionMoney.replace(/\D/g,''):''
        if( this.addMsg.CommissionMoney>100){
            this.addMsg.CommissionMoney = 100
        }else if( this.addMsg.CommissionMoney<1){
            this.addMsg.CommissionMoney = 1
        }
      },
      setCheckStatus(){    
          if(this.addMsg.CommissionMoney<1){
                this.$q.notify({
                    icon: 'close',
                    color: 'accent',
                    timeout: 2000,
                    message: '金额或者百分比数值大于0',
                    position: 'top'
                })
                return
          }      
        setActivityConfig(this.addMsg).then(res => {
            if (res.Code == 1) {
                this.$q.notify({
                    icon: 'iconfont icon-chenggong',
                    color: 'accent',
                    timeout: 2000,
                    message: '操作成功',
                    position: 'top'
                  })
                this.persistent = false;
                this.getActivityInfo()
            }
        })
      }
    }
  }

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

</style>

