<template>
  <div class="osAddcardrelease">
    <div class="form-box" style="margin-top: 0">
      <div>
        <span style="color: rgb(64, 158, 255);cursor: pointer;margin-left: 20px" @click="CommonJump('osCardrelease')">自动发放套餐卡券</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.Name}}</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.Name">
        <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%"
        height="400px"
        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="Name"
          label="昵称"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right"
                     background
                     @current-change="handleCurrentChange"
                     :page-size="msg_t.pageSize"
                     :current-page.sync="msg_t.pageIndex"
                     layout="prev, pager, next"
                     :total="count">
      </el-pagination>

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

<script>
  export default {
    name: "osAddcardrelease",
    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,
          Name:'',
          SmallShopId:0,
        },
        count:0,
        loading:false,
        UserList:[],
        Storage:[],
        loading2:false
      }
    },
    created(){
      this.getrigger()
      this.getrigger2()
      setTimeout(()=>{
        if(this.$route.query.ID){
          this.gettRepositoryList(this.$route.query.ID)
        }
      },10)
    },
    methods:{
      gettRepositoryList(ID){
        this.apipost("/api/Reserve/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
              }
            }
          } 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/Reserve/GetAllDiscountCouponList",{}, res => {
          if (res.data.resultCode == 1) {
            this.options2 = res.data.data;
            if(res.data.data.length>0){
              this.msg.DiscountCouponId = res.data.data[0].ID
            }
          } else {
            this.Error(res.data.message);
          }
        })
      },
      choice(){
        this.options2.forEach(x=>{
          if(x.ID == this.msg.DiscountCouponId){
            this.msg_t.SmallShopId = x.SmallShopId
          }
        })
        this.category = true;
        this.msg_t.pageIndex =1
        this.getList()
      },
      getList(){
        this.apipost("/api/User/GetPageListByKey",this.msg_t, res => {
          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.msg_t.pageIndex =1
        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/Reserve/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)
      },
    }
  }
</script>

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