<template>
  <div class="grantCouPon">
    <div class="form-box" style="margin-top: 0">
      <div>
        <span style="color: rgb(64, 158, 255);cursor: pointer;margin-left: 20px" @click="cancel">优惠券管理</span>
        <span style="margin: 0 5px;color: #C0C4CC;">/</span>
        <span>优惠券发放</span>
      </div>
    </div>
    <div class="el-card__body" style="background-color: white; padding: 15px 50% 15px 0 ;margin-top: 20px">
      <el-form :model="msg" style="padding:0 20px;" :rules="rules" ref="msg" label-width="160px"  size="medium">
        <el-form-item label="优惠券名称">
         <span>{{record.Name}}</span>
        </el-form-item>
        <el-form-item label="最低消费金额（元）">
          <span>{{record.MinConsumePrice}}</span>
        </el-form-item>
        <el-form-item label="优惠金额（元）">
          <span>{{record.DiscountsPrice}}</span>
        </el-form-item>

        <el-form-item label="剩余数量">
          <div v-if="record.TotalNum ==-1">{{record.TotalNum ==-1? '无限制领取':record.TotalNum}}</div>
          <div v-if="record.TotalNum !=-1">{{record.ResidueNum}}</div>
        </el-form-item>
        <el-form-item label="优惠券有效期">
          <div v-if="record.IndateType==1">领取后{{record.IndateDay}}天内有效</div>
          <div v-if="record.IndateType==2">开始时间：{{record.StartDate}}</div>
          <div v-if="record.IndateType==2">结束时间：{{record.EndDate}}</div>
        </el-form-item>

        <el-form-item label="发送数量" prop="GrantNum">
          <el-input v-model="msg.GrantNum" size="small" style="width: 40%" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\d{0,2})?/) ? this.value.match(/\d+(\d{0,2})?/)[0] : ''"/>
        </el-form-item>
        <el-form-item label="发放对象" >
          <el-tooltip class="item" effect="dark" content="请输入昵称/ID/手机号查找用户" placement="top"
                      style="position: absolute;left: -10px;top:10px">
            <i class="el-tooltip el-icon-info"></i>
          </el-tooltip>
          <el-input v-model="AliasName" style="width: 20%;margin-left: 5px"  placeholder="昵称/ID/手机号" size="small"/>
          <el-button :loading="loading" @click="lookup" size="small">查找用户</el-button>
          <div style="width: 80%;display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 5px" v-if="ByPhone.length>0">
            <el-checkbox-group v-model="msg.UserIds" @change = 'SelectBy'>
              <el-checkbox-button v-for="(item,index) in ByPhone" :label="item.Id" :key="index" >
                <img :src="item.Photo" alt="" class="avatar">
                <div class="username">{{item.AliasName}}</div>
              </el-checkbox-button>

            </el-checkbox-group>
          </div>
          <div style="width: 30%;display: flex;flex-direction: row;margin-top: 5px;justify-content: center;color: #666666" v-if="ByPhone.length==0">暂无数据~</div>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" style="margin: 12px 0 " @click="preserve('msg')" :loading="loading2">保存</el-button>
    <el-button @click="cancel">取消</el-button>
  </div>
</template>

<script>
    export default {
        name: "grantCouPon",
      data(){
          return{
            record:{},
            msg:{
              GrantNum:0,
              UserIds:[],
            },
            AliasName:'',
            rules:{
              GrantNum:[
                { validator: this.DiscountsPrice, trigger: 'blur' }
              ]
            },
            loading:false,
            loading2:false,
            ByPhone:[],
          }
      },
      created(){
        if(this.$route.query.row){
            this.record = this.$route.query.row
        }
      },
      methods:{
        cancel(){
          this.$router.go(-1)
        },
        lookup(){
          this.msg.UserIds = [];//重新选择的时候清楚之前的
          this.loading = true;
          this.apipost("/api/User/GetListByPhoneOrAliasName",{'AliasName':this.AliasName,SmallShopId:this.record.SmallShopId}, res => {
            this.loading = false;

            if (res.data.resultCode == 1) {
                this.ByPhone = res.data.data
            } else {
              this.Info(res.data.message);
            }

          })

        },
        SelectBy(val){
          this.msg.UserIds = val
        },
        DiscountsPrice(rule, value, callback) {
            if(value>0){
              return callback();
            }else {
              return callback(new Error('发送数量需大于零'));
            }

        },
        preserve(formName){

          this.$refs[formName].validate((valid) => {
            if (valid) {
              let UserIds = ''
              if(this.msg.UserIds.length>0){
                UserIds = this.msg.UserIds.join(",")
              }
              let data = {
                ID: this.record.ID,
                GrantNum :this.msg.GrantNum,
                UserIds:UserIds,
              }
              this.apipost("/api/Coupon/GrantCoupon",data, res => {
                this.loading2 = false;

                if (res.data.resultCode == 1) {
                  this.Success(res.data.message);
                  this.$router.go(-1);//返回上一层
                } else {
                  this.Info(res.data.message);
                }

              })
            } else {
              return false;
            }
          });
        }
      }
    }
</script>

<style >
  .grantCouPon .form-box {
    background: #fff;
    padding: 18px 50% 18px 0;
    margin-top: 10px;
  }
  .grantCouPon .el-input--small .el-input__inner{
    height: 32px;
    line-height: 32px;
  }
.grantCouPon .username{
  margin-top: 10px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .grantCouPon  .el-checkbox-button__inner {
    border: 1px solid #e2e2e2;
    height: 125px;
    width: 120px;
    padding-top: 15px;
    text-align: center;
    margin: 0 20px 20px 0;
    cursor: pointer;
    border-radius: 0!important;
  }
  .grantCouPon .el-checkbox-button, .el-checkbox-button__inner{
    display: inline-block;
    position: relative;
  }
  .grantCouPon  .avatar {
    height: 60px;
    width: 60px;
    border-radius: 30px;
  }
</style>
