<template>

    <basic-container v-loading="loading">

      <el-card v-for="(vip, index) in levels" :key="index">
        <div slot="header" class="clearfix">
            <span style="font-weight: 800;">{{vip.name}}等级</span>
        </div>
        <el-form
          label-position="left"
          inline size="small"
          :rules="rules"
          :model="form"
          ref="normalForm"
          label-width="200px"
          class="layout_v">

            <div class="layout_h_v_c" v-for="(level, idx) in vip.levels" :key="idx" :style="{marginTop: idx == 0 ? '0px' : '16px'}">
              <span>财富值范围在</span>
              <el-form-item style="margin: 0;margin-left: 10px;margin-right: 10px;">
                <el-input v-model="level.min" :min="0" :max="99999" type="number" autocomplete="off"></el-input>
              </el-form-item>
              <span>-</span>
              <el-form-item style="margin: 0;margin-left: 10px;margin-right: 10px;">
                <el-input v-model="level.max" :min="0" :max="99999" type="number" autocomplete="off"></el-input>
              </el-form-item>
              <span>之间的用户VIP 等级为{{level.vipSubName}}</span>
            </div>

        </el-form>
      </el-card>

      <el-card>
        <div slot="header" class="clearfix">
            <span style="font-weight: 800;">等级关联配置</span>
        </div>
        <el-form
          label-position="left"
          inline size="small"
          :rules="rules"
          :model="form"
          ref="normalForm"
          label-width="200px"
          class="layout_v">

          <div class="layout_h_v_c">
            <span>每充值1元，可获得</span>
            <el-form-item style="margin: 0;margin-left: 10px;margin-right: 10px;">
              <el-input v-model="form.oneYuanReward" autocomplete="off"></el-input>
            </el-form-item>
            <span>财富值</span>
          </div>

          <div class="layout_h_v_c" style="margin-top: 16px;">
            <span>banner费用收费为</span>
            <el-form-item style="margin: 0;margin-left: 10px;margin-right: 10px;">
              <el-input v-model="form.bannerFee" autocomplete="off"></el-input>
            </el-form-item>
            <span>A币/天</span>
          </div>

        </el-form>
      </el-card>

      <el-card>
        <div slot="header" class="clearfix">
            <span style="font-weight: 800;">广告租赁图片</span>
        </div>
        <el-form
          label-position="left"
          inline size="small"
          :rules="rules"
          :model="form"
          ref="normalForm"
          label-width="200px"
          class="layout_v">

            <uploader ref="uploader" />

        </el-form>
      </el-card>

      <div class="layout_v" style="width: 100%;margin-bottom: 16px;">
        <el-button class="self_center" type="primary" :loading="saving" @click="submitForm">保存</el-button>
      </div>

    </basic-container>

</template>

<script>

  import { getSystemSet, configSystemSet } from '@/api/systemSet/systemSet.js'
  import { ZmMixin } from '@/mixins/ZmMixin.js'

  export default {
    mixins: [ZmMixin],
    data() {
      return {
        key: 'SYSTEM_SET_VIP_SET',
        loading: false,
        saving: false,
        levels: [],
        rules: {},
        form: {
          oneYuanReward: '',
          bannerFee: '',
          adPlaceHolder: ''
        }
      }
    },
    components: {
      'uploader': () => import('@/components/uploader.vue')
    },
    created() {
      this.load()
    },
    methods: {
      findParent(r) {
        let find = undefined
        for(let v of this.levels) {
          if(v.vip == r.vip) {
            return v
          }
        }
        return undefined
      },
      load() {
        this.loading = true
        getSystemSet({key: this.key})
        .then(r => {
          this.loading = false
          let z = this.zmRes(r)
          if(z) {
            this.form.oneYuanReward = z.oneYuanReward
            this.form.bannerFee = z.bannerFee
            let vipLevels = z.vipLevels
            for(let vip of vipLevels) {
              if(vip.min != -1) {
                let parent = this.findParent(vip)
                if(parent == undefined) {
                  parent = {
                    vip: vip.vip,
                    name: vip.vipName,
                    levels: []
                  }
                  this.levels.push(parent)
                }
                parent.levels.push(vip)
              }
            }
            if(z.adPlaceHolder) {
              this.$refs['uploader'].pushList([{
                url: z.adPlaceHolder
              }])
            }
          }
        })
        .catch(e => {
          this.loading = false
        })
      },
      submitForm() {
        this.form.adPlaceHolder = this.$refs['uploader'].getList()[0]
        let collect = []
        for(let vip of this.levels) {
          for(let v of vip.levels) {
            if(!this.checkEmpty(v.min, v.vipSubName + "的最小值")) {
              return
            }
            if(!this.checkEmpty(v.max, v.vipSubName + "的最大值")) {
              return
            }
            collect.push(v)
          }
        }
        if(collect.length == 0) {
          this.warn("未设置任何等级")
          return
        }
        if(!this.checkEmpty(this.form.oneYuanReward, "每充值1元财富值")) {
          return
        }
        if(!this.checkEmpty(this.form.bannerFee, "banner费用收费")) {
          return
        }
        if(!this.checkEmpty(this.form.adPlaceHolder, "广告租赁图片不能为空")) {
          return
        }
        this.saving = true
        configSystemSet({
          key: this.key,
          data: JSON.stringify({
            oneYuanReward: this.form.oneYuanReward,
            bannerFee: this.form.bannerFee,
            adPlaceHolder: this.form.adPlaceHolder,
            vipLevels: collect
          })
        })
        .then(r => {
          this.saving = false
          this.success("保存成功！")
        })
        .catch(e => {
          this.saving = false
        })
      }
    }
  }

</script>

<style scoped>


</style>
