<template>
  <el-dialog title="赠送积分" :visible.sync="show" width="420px" @closed="close">
    <el-form :model="form" :rules="rules" ref="form" label-width="0">
      <el-radio-group v-if="integralMultiple || old.integralType === 2" v-model="form.integralType" class="mb20" @change="reset">
        <el-radio :label="1">固定积分</el-radio>
        <el-radio :label="2">
          订单金额倍数
          <el-tooltip class="item">
            <div slot="content">
              <p style="color: white;margin-bottom:15px;">条件说明</p>
              <p style="color: white;font-size:12px;width:200px;line-height:18px;">若该计划中增加了消费条件限制，那么在判断订单金额取值时，将综合该计划中的消费条件设置，只取符合条件设置的商品的金额作为积分加倍的数值</p>
            </div>
            <i class="el-icon-question ml5 minor-font-color"></i>
          </el-tooltip>
        </el-radio>
      </el-radio-group>
      <template v-if="form.integralType === 1">
        <p class="regular-font-color mb20">请输入需要赠送的积分<span class="fz12 gray ml10">* 仅支持给认证会员赠送积分</span></p>
        <el-form-item prop="integralCount">
          <el-input v-model.number="form.integralCount" maxLength="7" />
        </el-form-item>
      </template>
      <template v-if="form.integralType === 2">
        <p class="regular-font-color mb20"><span class="fz12 gray">* 订单金额将四舍五入取整，且1元等于1积分</span></p>
        <el-form-item prop="multipleNum">
          设置倍数
          <el-input-number v-model="form.multipleNum" class="ml5 mr5 w120" controls-position="right" :precision="2" :min="0.01" :max="100" placeholder="最多保留两位小数" />
          倍
        </el-form-item>
      </template>
    </el-form>
    <p class="minor-font-color mt10 line-height1_5 fz12">赠送积分无自动通知。如有通知需要，请额外添加【文本】、【图片】、【小程序】或【短信】营销事件。</p>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="addItem">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'lib-integral',
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    },
    show: {
      type: Boolean,
      default: false
    },
    integralMultiple: {
      // 积分 是否需要倍数（场景：消费触发）
      type: Boolean,
      default: false
    }
  },
  data() {
    const validInteral = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error('积分值为数字值'));
      } else if (value <= 0) {
        callback(new Error('积分值最小为1'));
      } else if (value > 1000000) {
        callback(new Error('单次赠送值最大值为1000000'));
      } else {
        callback();
      }
    };
    return {
      ecmMarketingTypeRelationId: '',
      old: {}, // 旧数据
      form: {
        integralCount: '',
        comName: 'integral',
        integralType: 1, // 1固定积分  2订单金额倍数
        multipleNum: '' // 倍数值
      },
      rules: {
        integralCount: [{ required: true, message: '请输入积分值', trigger: 'blur' }, { validator: validInteral, trigger: 'blur' }], // eslint-disable-line
        multipleNum: [{ required: true, message: '请输入倍数', trigger: 'blur' }] // eslint-disable-line
      },
      loading: false
    };
  },
  watch: {
    reset() {
      this.$refs.form.resetFields();
      this.form.multipleNum = 1;
    },
    show(val) {
      if (val) {
        this.old = { ...this.item };
        this.form.integralCount = this.item.integralCount;
        this.form.multipleNum = this.item.multipleNum;
        this.form.integralType = this.item.integralType || 1;
        this.ecmMarketingTypeRelationId = this.item.ecmMarketingTypeRelationId;
      } else {
        this.old = {};
        this.form.integralCount = '';
        this.form.multipleNum = '';
        this.form.integralType = 1;
        this.ecmMarketingTypeRelationId = '';
      }
    }
  },
  methods: {
    close() {
      this.$refs.form.resetFields();
      this.$emit('update:show', false);
    },
    addItem() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.integralMultiple) {
            this.integralType = this.integralType || 1; // 设置默认1 防止''
          }
          this.$emit('sendItem', { ...this.form, ...{ ecmMarketingTypeRelationId: this.ecmMarketingTypeRelationId } });
          this.close();
        }
      });
    }
  }
};
</script>
