<template>

    <basic-container v-loading="loading">
      <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" :min="1" :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="form.lower" :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="form.upper" :min="1" :max="99999" type="number" autocomplete="off"></el-input>
          </el-form-item>
        </div>

        <div v-for="(pkg, index) in pkgs" :key="index" class="layout_h_v_c" style="margin-top: 16px;">
          <div class="layout_h_v_c">
            <span>购买</span>
            <el-form-item style="margin: 0;margin-left: 10px;margin-right: 10px;">
              <el-input v-model="pkg.amount" :min="1" :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="pkg.price" :min="1" :max="99999" type="number" autocomplete="off"></el-input>
            </el-form-item>
            <span>元</span>
          </div>
        </div>
      </el-form>
      <div class="layout_v" style="width: 100%;">
        <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_ADD_MONEY_SET',
        loading: false,
        saving: false,
        rules: {

        },
        pkgs: [],
        form: {
          oneYuanReward: '',
          lower: '',
          upper: ''
        }
      }
    },
    created() {
      for(let i = 0; i < 5; i++) {
        this.pkgs.push({amount: '', price: ''})
      }
      this.load()
    },
    methods: {
      load() {
        this.loading = true
        getSystemSet({key: this.key})
        .then(r => {
          this.loading = false
          let z = this.zmRes(r)
          if(z) {
            this.form.oneYuanReward = z.rate
            this.form.lower = z.lower
            this.form.upper = z.upper
            for(let i in z.pkg) {
              let p = z.pkg[i]
              if(i < this.pkgs.length) {
                let old = this.pkgs[i]
                old.amount = p.amount
                old.price = p.price
              } else {
                this.pkgs.push(p)
              }
            }
          }
        })
        .catch(e => {
          this.loading = false
        })
      },
      submitForm() {
        let oneYuanReward = this.form.oneYuanReward
        if(oneYuanReward == undefined || oneYuanReward == '') {
          this.warn("请填写1元可购买海盗币个数")
          return
        }
        let lower = this.form.lower
        let upper = this.form.upper
        if(lower == '') {
          this.warn("充值下限不能为空")
          return
        }
        if(upper == '') {
          this.warn("充值上限不能为空")
          return
        }
        if(parseFloat(lower) > parseFloat(upper)) {
          this.warn("充值下限不能大于充值上限")
          return
        }
        for(let pkg of this.pkgs) {
          let amount = pkg.amount
          let price = pkg.price
          if(amount == undefined) {
            this.warn("套餐数量未填写")
            return
          }
          if(price == undefined) {
            this.warn("套餐价格未填写")
            return
          }
        }
        this.saving = true
        configSystemSet({
          key: this.key,
          data: JSON.stringify({
            rate: oneYuanReward,
            lower: lower,
            upper: upper,
            pkg: this.pkgs
          })
        })
        .then(r => {
          this.saving = false
          this.success("保存成功！")
        })
        .catch(e => {
          this.saving = false
        })
      }
    }
  }

</script>

<style scoped>


</style>
