<template>
  <div class="osedgrantCouPon">
    <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="剩余数量">
          <div v-if="record.TotalNum ==-1">{{record.TotalNum ==-1? '无限制领取':record.TotalNum}}</div>
          <div v-if="record.TotalNum !=-1">{{record.TotalNum}}</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: "osedgrantCouPon",
    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/Reserve/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 >
  .osedgrantCouPon .form-box {
    background: #fff;
    padding: 18px 50% 18px 0;
    margin-top: 10px;
  }
  .osedgrantCouPon .el-input--small .el-input__inner{
    height: 32px;
    line-height: 32px;
  }
  .osedgrantCouPon .username{
    margin-top: 10px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .osedgrantCouPon  .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;
  }
  .osedgrantCouPon .el-checkbox-button, .el-checkbox-button__inner{
    display: inline-block;
    position: relative;
  }
  .osedgrantCouPon  .avatar {
    height: 60px;
    width: 60px;
    border-radius: 30px;
  }
</style>
