<template>
  <div class="addAutoreleaseCoupon">
    <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="small">
        <el-form-item label="触发事件" class="is-required" style="width: 50%">
          <el-select v-model="msg.TriggerType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="发放的优惠券" class="is-required" style="width: 50%">
          <el-select v-model="msg.DiscountCouponId" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="发放次数" prop="GrantNum" class="is-required">
          <el-tooltip class="item" effect="dark" content="每个用户可发放次数；如不限制发放次数，请填写0" placement="top"
                      style="position: absolute;left: -10px;top:10px">
            <i class="el-tooltip el-icon-info"></i>
          </el-tooltip>
          <el-input v-model="msg.GrantNum" class="el-input--small" :disabled="checked" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\d{0,2})?/) ? this.value.match(/\d+(\d{0,2})?/)[0] : ''" style="width: 30%;"/>
          <el-checkbox v-model="checked" @change="checked==true? msg.GrantNum=0:msg.GrantNum=1" style="margin-left: 10px">无限制</el-checkbox>
        </el-form-item>

        <el-form-item label="领取人" >
          <el-radio-group v-model="msg.IsAll" >
            <el-radio :label="0">所有用户</el-radio>
            <el-radio :label="1">指定用户</el-radio>
            <button class="el-button el-button--text" v-if="msg.IsAll ==1" @click="choice">选择用户</button>
          </el-radio-group>
          <div style="flex-wrap: wrap;" flex="dir:left">
            <div  flex="dir:top cross:center" class="user-item" v-for="(item,index) in UserList" :label="item.Id" :key="index">
              <img :src="item.Photo" alt="" class="avatar">
              <div class="username">{{item.AliasName}}</div>
              <button type="button" class="el-button close el-button--danger is-circle" @click="delUserList(index)"><i class="el-icon-close"></i></button>
            </div>
          </div>
        </el-form-item>
      </el-form>

    </div>
    <el-button type="primary" style="margin: 12px 0 " @click="preserve('msg')" :loading="loading2">保存</el-button>

    <!--选择用户-->
    <el-dialog title="选择用户" :visible.sync="category" width="612px">
      <div class="el-input el-input--small el-input-group el-input-group--append">
        <input type="text" autocomplete="off" placeholder="输入用户ID、昵称搜索" class="el-input__inner" v-model="msg_t.AliasName">
        <div class="el-input-group__append"><button type="button" class="el-button el-button--default" @click="search"><!----><!----><span>搜索</span></button></div>
      </div>
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="Id"
          label="ID"
          width="176">
        </el-table-column>
        <el-table-column
          label="所在平台"
          width="174">
          <template slot-scope="scope">
            <img v-if="scope.row.Source==1" style="width:24px;height:24px" src="../../assets/img/statistics/wechat.png" alt="" class="platform-img">
            <img v-if="scope.row.Source==2" style="width:24px;height:24px" src="../../assets/img/statistics/zhifubao.png" alt="" class="platform-img">
            <img v-if="scope.row.Source==3" style="width:24px;height:24px" src="../../assets/img/statistics/douyin.png" alt="" class="platform-img">
            <img v-if="scope.row.Source==4" style="width:24px;height:24px" src="../../assets/img/statistics/baidu.png" alt="" class="platform-img">
          </template>
        </el-table-column>
        <el-table-column
          prop="AliasName"
          label="昵称"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right"
                     background
                     @current-change="handleCurrentChange"
                     :page-size="msg_t.pageSize"
                     layout="prev, pager, next"
                     :total="count">
      </el-pagination>

      <div slot="footer" class="dialog-footer">
        <el-button @click="category = false">取 消</el-button>
        <el-button type="primary" @click="getProductList">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "addAutoreleaseCoupon",
      data(){
          return{
              msg:{
                ID:0,
                TriggerType:0,
                DiscountCouponId:0,
                GrantNum:1,
                IsAll:0,
                UserList:[]
              },
            rules:{
              GrantNum:[
                {required: true, message: "最多发放次数不能为空", trigger: "blur"}
              ]
            },

            checked:false,
            options:[],
            options2:[],
            Name:'',
            category:false,
            tableData: [],
            msg_t:{
              pageIndex:1,
              pageSize:10,
              AliasName:''
            },
            count:0,
            loading:false,
            UserList:[],
            Storage:[],
            loading2:false
          }
      },
      created(){
        this.getrigger()
        this.getrigger2()
        this.getList()
        setTimeout(()=>{
          if(this.$route.query.ID){
            this.gettRepositoryList(this.$route.query.ID)
          }
        },10)
      },
      methods:{
        gettRepositoryList(ID){
          this.apipost("/api/Coupon/GettRepositoryList",{'ID':ID} , res => {
            if (res.data.resultCode == 1) {
              this.msg = res.data.data
              if(res.data.data.GrantNum==0){
                this.checked=true
              }
              if(res.data.data.UserList){
                this.UserList= res.data.data.UserList
                for(let i = 0;i<this.UserList.length;i++){
                  this.UserList[i].Id = this.UserList[i].UserId
                }
              }
              console.log(this.UserList)
            } else {
              this.Info(res.data.message);
            }
          })
        },
        getrigger(){
          this.apipost("/api/Coupon/GetTriggerTypeEnumList",{}, res => {
            if (res.data.resultCode == 1) {
              this.options = res.data.data;
              this.msg.TriggerType = res.data.data[0].Id
            } else {
              this.Info(res.data.message);
            }

          })
        },
        getrigger2(){
          this.apipost("/api/Coupon/GetAllDiscountCouponList",{}, res => {
            if (res.data.resultCode == 1) {
              this.options2 = res.data.data;
              this.msg.DiscountCouponId = res.data.data[0].ID
            } else {
              this.Info(res.data.message);
            }

          })
        },
        choice(){
          this.category = true;
          this.getList()
        },
        getList(){
          this.loading  =true
          this.apipost("/api/User/GetPageListByKey",this.msg_t, res => {
            this.loading  =false

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

          })
        },
        getProductList(){
          if(this.UserList.length>0){
            let newStorage  =[]
            for(let i= 0;i<this.UserList.length;i++){
              for(let j= 0;j<this.Storage.length;j++){
                  if(this.UserList[i].Id != this.Storage[j].Id){
                    newStorage.push(this.Storage[j])
                  }
              }
            }
            this.UserList = this.UserList.concat(newStorage)
          }else {
            this.UserList = this.UserList.concat(this.Storage)
          }
          this.category = false;

        },
        search(){
          this.getList();
        },
        preserve(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let UList =[];
              for(let i= 0;i<this.UserList.length;i++){
                UList.push({'UserId':this.UserList[i].Id})
              }
              this.msg.UserList= UList
              this.loading2 = true;
              this.apipost("/api/Coupon/AddOrUpdateSelfMotion",this.msg, 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;
            }
          });
        },
        handleSelectionChange(val){
          this.Storage = val
        },
        handleCurrentChange(val) {
          this.msg_t.pageIndex = val;
          this.getList();
        },
        delUserList(index){
          this.UserList.splice(index,1)
        },
        cancel(){
          this.$router.go(-1)
        }
      }
    }
</script>

<style >
  .addAutoreleaseCoupon .form-box {
    background: #fff;
    padding: 20px 50% 20px 0;
    margin-top: 10px;
  }
  .addAutoreleaseCoupon .el-input--small .el-input__inner{
    margin-left: 10px;
    height: 32px;
    line-height: 32px;
  }
  .addAutoreleaseCoupon .form-body{
    background-color: #fff;
    padding: 10px 50% 10px 20px;
    min-width: 1000px;
  }
  .addAutoreleaseCoupon .user-item {
    border: 1px #eeeeee solid;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 120px;
    height: 120px;
    position: relative;
  }
  .addAutoreleaseCoupon .user-item .close {
    position: absolute;
    right: -10px;
    top: -10px;
    padding: 0;
    border-radius: 100px;
    width: 20px;
    height: 20px;
  }
  .addAutoreleaseCoupon .user-item .avatar {
    width: 50px;
    height: 50px;
  }
</style>
