@extends('layouts.base')
@section('content')

<style scoped>
  .all {
    color: #101010;
    font-size: 14px;
    margin-bottom: 80px;
  }

  .ladder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 600px;
    margin: 20px 0 20px 236px;
  }
  .tips{
    width: 100%;
    font-size: 13px;
    color: #666;
    margin: 6px 0 0 64px;
  }
  .ladder .text {
    margin-right: 10px;
  }

  .grads {
    width: 600px;
    margin-left: 140px;
  }

  .grads .title {
    display: flex;
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #C9C9C9;
  }

  .grads .title div {
    width: 50%;
  }

  .list .list-item {
    display: flex;
    width: 100%;
    margin: 20px 0;
    align-items: center;
  }

  .list .list-item .el-icon-delete-solid {
    font-size: 20px;
    color: #666;
  }

  .list .list-item div {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list .list-item .el-input {
    width: 80px;
  }

  .list .list-item .line {
    width: 20px;
    height: 1px;
    background-color: #ccc;
    margin: 0 4px;
  }

  .push {
    display: flex;
    align-items: center;
    margin: 20px 0 20px 50px;
  }

  .push .text {
    color: #666;
    margin-left: 20px;
  }

  .fixed {
    width: calc(100% - 250px);
    padding: 7px;
    padding-top: 10px;
    position: fixed;
    bottom: 0px;
    z-index: 199;
    box-sizing: border-box;
    box-shadow: 0px -1px 10px rgb(0 0 0 / 10%);
    margin-left: -14px;
    background-color: #fff;
  }

  .fixed_box {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
@include('public.admin.box-item')
<div class="all">
  <div id="app">
    <box-item text="梯度设置">
      <div class="ladder">
        <div class="text">红包阶梯</div>
        <el-switch v-model="is_grads" active-color="#39b283" inactive-color="#ccc" :active-value="1" :inactive-value="0" @change="change"></el-switch>
        <div class="tips">1，请勿随意关闭更改红包阶梯，以免造成红包金额混乱；</div>
        <div class="tips">2，额度范围后设置后第二天才生效，请勿随意更改；</div>
        <div class="tips">3，不在额度范围里的会员领取随机生成的红包；</div>
        <div class="tips">4，若额度范围内的红包数量已领取完，则剩下的人随机领取红包；</div>
        <div class="tips">5，在额度范围内领取的红包金额不随基础设置的奖励金额和红包最高金额限制；</div>
        <div class="tips">6，会员领取的红包是根据当前的梯度设置进行查询，如果前一天的设置是有梯度1-100元的，后面用户领取的时候该梯度改成了1-99元，视为更改过设置，领取随机红包。</div>
      </div>
      <div class="grads" v-show="is_grads=='1'">
        <div class="title">
          <div>个人红包额度范围</div>
          <div>领取红包额度范围</div>
        </div>
        <div class="list">
          <div class="list-item" v-for="(item,i) in grads" :key="i">
            <div>
              <el-input v-model="item.quota[0]" placeholder="最小值"></el-input>
              <div class="line"></div>
              <el-input v-model="item.quota[1]" placeholder="最大值"></el-input>
            </div>
            <div>
              <el-input v-model="item.amount[0]" placeholder="最小值"></el-input>
              <div class="line"></div>
              <el-input v-model="item.amount[1]" placeholder="最大值"></el-input>
            </div>
            <i @click="grads.splice(i,1)" class="el-icon-delete-solid" v-if="i>0" style="font-size: 20px;color: #666;"></i>
            <i class="el-icon-delete-solid" v-else style="opacity: 0;"></i>
          </div>
        </div>
        <div class="push">
          <el-button type="primary" icon="el-icon-plus" @click="push">添加阶梯</el-button>
          <div class="text">梯度最多只能添加到20层</div>
        </div>
      </div>
    </box-item>

    <div class="fixed">
      <div class="fixed_box">
        <el-button type="primary" @click="Submit">提交</el-button>
      </div>
    </div>
  </div>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    delimiters: ['[[', ']]'],
    data() {
      return {
        is_grads: "",
        grads: [{
          quota: ["",""],
          amount: ["",""]
        }]
      }
    },
    created() {
      this.getData();
    },
    methods: {
      initData(list, type = "split") {
        let grads = [];
        list.forEach(item => {
          grads.push({
            quota: item.quota[type]("_"),
            amount: item.amount[type]("_")
          })
        })
        return grads;
      },
      getData() {
        this.$http.post("{!! yzWebUrl('plugin.red-packet.admin.set.gradsSave') !!}").then(({
          data
        }) => {
          if (data.result == 1) {
            this.is_grads = data.data.is_grads;
            this.grads = this.initData(data.data.grads, "split");
          } else this.$message.error(data.msg);
        })
      },
      push() {
        if (this.grads.length >= 20) {
          this.$message.error('梯度最多只能添加到20层');
          return false
        }

        this.grads.push({
          quota: ["",""],
          amount: ["",""]
        })
      },
      Submit() {
        for (let index = 0; index < this.grads.length; index++) {
          let { quota,amount} = this.grads[index],bool = false;
            for(let j = 0;j<quota.length;j++){
              if (quota[j]=="" || amount[j]=="") {
                bool = true;
                this.$message.error("红包额度范围不能为空");
                return false;
              }else if(isNaN(quota[j]) || isNaN(amount[j])){
                bool = true;
                this.$message.error("红包额度范围只能为数字");
                return false;
              }
            }
            if (quota[0] * 1>quota[1] *1 || amount[0] * 1>amount[1] * 1) return this.$message.error("红包额度最小值不能大于最大值");
            if(bool) return fasle;
        }
        const loading = this.$loading({
          lock: true,
          text: '正在保存中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let data = {
          is_grads: this.is_grads,
          grads: this.initData(this.grads, "join"),
        }
        this.$http.post("{!! yzWebUrl('plugin.red-packet.admin.set.gradsSave') !!}", {
          data
        }).then(({
          data
        }) => {
          loading.close();
          this.$message[data.result == 1 ? "success" : "error"](data.msg)
        });
      },
      change(val){
        if (val==0) {
          this.is_grads = 1;
          this.$confirm('是否确定关闭红包阶梯，关闭后将不再发放红包阶梯的红包金额,只发放原来设置的红包金额。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.is_grads = 0;
        }).catch(() => {
        });
        }
      }
    }
  })
</script>


@endsection