<template>
  <!--
    作者：luoyiming
    时间：2020-06-04
    描述：插件中心-签到有礼-签到设置
  -->
  <div>
    <el-form size="small" :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <div class="open-sign">
        <span class="gray9">是否开启签到有礼</span>
        <el-switch v-model="form.is_open" class="ml10"></el-switch>
      </div>
      <div v-if="form.is_open" class="mt16">
        <!--每日签到固定奖励-->
        <div class="common-form">每日签到固定奖励</div>

        <el-form-item label="每日签到送" prop="ever_sign">
          <div class="max-w460 d-s-c">
            <div class="flex-1"><el-input v-model="form.ever_sign" placeholder="0" type="number"></el-input></div>
            <span class="ml10">积分</span>
          </div>
        </el-form-item>
        <el-form-item label="递增奖励">
          <el-radio v-model="form.is_increase" :label="true">有</el-radio>
          <el-radio v-model="form.is_increase" :label="false">无</el-radio>
          <div v-if="form.is_increase" class="max-w460 border p-0-20 pt16 mt10">
            <el-form-item label="第二天起递增奖励" label-width="120px" prop="increase_reward">
              <div class="d-s-c">
                <div class="flex-1"><el-input v-model="form.increase_reward" placeholder="请输入第二天起递增积分数" min="0" type="number"></el-input></div>
                <span class="ml10">积分</span>
              </div>
            </el-form-item>
            <el-form-item label="第" label-width="120px" prop="no_increase">
              <div class="d-s-c">
                <div class="flex-1"><el-input v-model="form.no_increase" placeholder="请输入第几天不再递增" min="0" type="number"></el-input></div>
                <span class="ml10">天起不再递增</span>
              </div>
            </el-form-item>
          </div>
        </el-form-item>
        <!--连续签到额外奖励-->
        <div class="common-form">连续签到额外奖励 （达到额外奖励最大天数时，继续签到不会再获得额外奖励，断签后重新开始计算）</div>
        <el-form-item label="额外奖励">
          <div class="reward-list max-w460">
            <div class="reward-item pr border" v-for="(item, reward_index) in form.reward_data" :key="reward_index">
              <el-button class="delete-reward" @click="deleteRewardClick(reward_index)" type="danger" size="small" icon="el-icon-close" circle></el-button>
              <el-form-item label="连续签到" :prop="'reward_data.' + reward_index + '.day'" :rules="rules.day">
                <div class="d-s-c">
                  <div class="flex-1"><el-input v-model="item.day" placeholder="请输入连续签到天数" class="max-w460" type="number" min="0"></el-input></div>
                  <span class="ml10 pr16">天</span>
                </div>
              </el-form-item>
              <el-form-item label="积分奖励">
                <div class="d-s-c">
                  <div><el-checkbox v-model="item.is_point"></el-checkbox></div>
                  <div v-if="item.is_point">
                    <el-form-item label="送" label-width="40px" :prop="'reward_data.' + reward_index + '.point'" :rules="rules.point" style="margin-bottom: 0;">
                      <div class="d-s-c">
                        <div class="flex-1"><el-input v-model="item.point" placeholder="请输入连续签到天数的积分" type="number" min="0"></el-input></div>
                        <span class="ml10 pr16">积分</span>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
          <el-button size="small" icon="el-icon-plus" @click="addReward">添加</el-button>
        </el-form-item>
        <!--规则-->
        <div class="common-form">规则</div>
        <el-form-item label="规则说明：">
          <div class="edit_container"><Uediter v-if="!loading" :text="ueditor.text" :config="ueditor.config" ref="ue"></Uediter></div>
        </el-form-item>
      </div>
      <!--提交-->
      <div class="common-button-wrapper"><el-button type="primary" size="small" @click="onSubmit" :disabled="loading">提交</el-button></div>
    </el-form>
  </div>
</template>
<script>
import SignApi from '@/api/sign.js';
import Uediter from '@/components/UE.vue';
export default {
  components: {
    /*编辑器*/
    Uediter
  },
  data() {
    /*判断额外奖励*/
    let validate_reward_data = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('请添加至少一项额外奖励！'));
      } else {
        callback();
      }
    };

    /*连续签到天数*/
    let validate_day = (rule, value, callback) => {
      if (this.form.reward_data.lenght < 1) {
        callback();
      } else {
        if (value === '') {
          callback(new Error('天数不能为空！'));
        }
        callback();
      }
    };

    /*连续签到天数的积分数*/
    let validate_point = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入连续签到积分数！'));
      } else {
        callback();
      }
    };

    return {
      /*富文本配置*/
      ueditor: {
        text: '',
        config: {
          initialFrameWidth: 400,
          initialFrameHeight: 500
        }
      },
      /*表单数据对象*/
      form: {
        is_open: false,
        is_increase: false,
        increase_reward: 0,
        no_increase: 0,
        ever_sign: 0,
        reward_data: []
      },
      /*是否正在加载*/
      loading: true,
      /*验证规则*/
      rules: {
        /*每日签到*/
        ever_sign: [{ required: true, message: '每日签到送积分有误', trigger: 'blur' }],
        /*第二天起递增*/
        increase_reward: [{ required: true, message: '请输入第二天起递增积分数', trigger: 'blur' }],
        /*第几天不再递增*/
        no_increase: [{ required: true, message: '请输入第几天不再递增', trigger: 'blur' }],
        /*连续签到额外奖励*/
        reward_data: [{ validator: validate_reward_data, required: true, trigger: 'blur' }],
        /*连续签到*/
        day: [{ validator: validate_day, required: true, trigger: 'blur' }],
        /*连续签到积分数*/
        point: [{ validator: validate_point, required: true, trigger: 'blur' }]
      }
    };
  },
  created() {
    /*获取列表*/
    this.getData();
  },
  methods: {
    /*获取列表*/
    getData() {
      let self = this;
      self.loading = true;
      SignApi.getData()
        .then(data => {
          self.loading = false;
          let val = data.data.vars.values;
          if (val.is_increase == true) {
            self.form.is_increase = true;
          }
          if (val.is_open == true) {
            self.form.is_open = true;
            self.form.increase_reward = val.increase_reward;
            self.form.no_increase = val.no_increase;
            self.form.ever_sign = val.ever_sign;
            self.form.ever_sign = val.ever_sign;
            self.ueditor.text = val.content;
            if(val.reward_data){
              let len = val.reward_data.length;
              for (let i = 0; i < len; i++) {
                let item = val.reward_data[i];
                if (item.is_coupon == true) {
                  item.is_coupon = true;
                } else {
                  item.is_coupon = false;
                }
                if (item.is_point == true) {
                  item.is_point = true;
                } else {
                  item.is_point = false;
                }
              }
              self.form.reward_data = val.reward_data;
            }
          }
        })
        .catch(error => {});
    },

    /*提交签到有礼*/
    onSubmit() {
      let self = this;
      let params = self.form;
      if (params.is_open) {
        params.content = self.getContent();
      }
      self.loading = true;
      self.$refs.ruleForm.validate(valid => {
        if (valid) {
          SignApi.saveData(params, true)
            .then(data => {
              self.$message({
                message: '恭喜你，保存成功',
                type: 'success'
              });
              self.getData();
            })
            .catch(error => {});
        }
      });
    },

    /*获取富文本编辑器的内容*/
    getContent: function() {
      return this.$refs.ue.getUEContent();
    },

    /*添加奖励*/
    addReward() {
      let obj = {
        day: 0,
        is_point: false,
        point: 0,
        is_coupon: false,
        coupon: []
      };
      this.form.reward_data.push(obj);
    },

    /*删除奖励*/
    deleteRewardClick(e) {
      this.form.reward_data.splice(e, 1);
    }
  }
};
</script>

<style scoped="scoped">
.open-sign {
  padding: 20px;
  background: #e2f0ff;
}

.reward-list .reward-item {
  margin-bottom: 10px;
  padding: 20px 20px 0;
}

.reward-list .delete-reward {
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  z-index: 10;
}
.el-button--small.is-circle {
  padding: 4px;
}
</style>
