<template>
  <div class="form-wrap">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
      <el-form-item label="积分获取规则" prop="integralGetStatus">
        <div>
          <el-radio v-model="ruleForm.integralGetStatus" label="1">每消费</el-radio>
          <el-input v-model="ruleForm.integralGet.fee"  @blur="formatInputFee($event)"></el-input><label>元，获取 </label>
          <el-input v-model="ruleForm.integralGet.integral"  @blur="formatInputFee($event)"></el-input><label>积分。取整策略为</label>
          <el-select v-model="ruleForm.integralGetStrategy" placeholder="请选择">
            <el-option
              v-for="item in cateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-radio v-model="ruleForm.integralGetStatus" label="0" class="margin-20">不获取积分</el-radio>
        </div>
      </el-form-item>
      <div class="form-child" v-if="ruleForm.integralGetStatus==1">
        <el-form-item label="折扣控制" prop="integralGetDiscountControl">
          <div class="radio-cell">
             <el-radio v-model="ruleForm.integralGetDiscountControl" label="1">所有折扣商品都适用</el-radio>
          </div>
          <div class="radio-cell margin-20">
             <el-radio v-model="ruleForm.integralGetDiscountControl" label="2">折扣率</el-radio>
             <el-input v-model="ruleForm.integralGetDiscountControlLower" @change="formatInputChange($event)"></el-input>
             <label>至</label>
             <el-input v-model="ruleForm.integralGetDiscountControlUpper" @change="formatInputChange($event)"></el-input>
             <label>商品都适用</label>
          </div>
        </el-form-item>
        <el-form-item label="积分冻结期" prop="integralGetFreezeDays" class="padding-0">
          <el-input v-model="ruleForm.integralGetFreezeDays" @keyup.native="formatInput($event)"></el-input><label>天</label>
        </el-form-item>
        <el-form-item label="积分有效期" prop="effectiveTime" class="padding-0">
          <el-input v-model="ruleForm.effectiveTime" @keyup.native="formatInput($event)"></el-input><label>天</label>
          <!-- 新增需求 20180927 -->
          <!-- <div class="radio-cell">
             <el-radio v-model="ruleForm.integralGetDiscountControl" label="1">动态</el-radio>
             <el-input v-model="ruleForm.integralGetDiscountControlLower" @change="formatInputChange($event)"></el-input>
             <label>天</label>
          </div>
          <div class="radio-cell margin-20">
            <el-radio v-model="ruleForm.integralGetDiscountControl" label="2">永久有效</el-radio>
          </div>
          <div class="radio-cell margin-20">
            <el-radio v-model="ruleForm.integralGetDiscountControl" label="3">指定清零</el-radio>
          </div>
          <div class="radio-cell margin-20">
            <el-radio v-model="ruleForm.integralGetDiscountControl" label="4">指定清零</el-radio>
          </div> -->
        </el-form-item>
      </div>
      <el-form-item label="积分抵现规则" prop="integralUseStatus" class="margin-20">
        <div>
          <el-radio v-model="ruleForm.integralUseStatus" label="1">每使用</el-radio>
          <el-input v-model="ruleForm.integralUse.integral" @blur="formatInput($event)"></el-input><label>积分，抵 </label>
          <el-input v-model="ruleForm.integralUse.fee"  @blur="formatInput($event)"></el-input><label>元</label>
        </div>
        <div class="margin-20">
          <el-radio v-model="ruleForm.integralUseStatus" label="0">不支持抵现</el-radio>
        </div>
      </el-form-item>
      <el-form-item label="积分成本">
        <label>每使用</label>
        <el-input v-model="ruleForm.integralCost.integral"  @blur="formatInput($event)"></el-input><label>积分，承担 </label>
        <el-input v-model="ruleForm.integralCost.fee"  @blur="formatInput($event)"></el-input><label>元</label>
      </el-form-item>
      <div class="form-child margin-20" v-if="ruleForm.integralUseStatus==1">
        <el-form-item label="折扣控制" prop="integralUseDiscountControl">
          <div class="radio-cell">
            <el-radio  v-model="ruleForm.integralUseDiscountControl" label="1">所有折扣商品都适用</el-radio>
          </div>
          <div class="radio-cell margin-20" >
            <el-radio v-model="ruleForm.integralUseDiscountControl"  label="2">折扣率</el-radio>
            <el-input v-model="ruleForm.integralUseDiscountControlLower" @change="formatInputChange($event)"></el-input>
            <label>至</label>
            <el-input v-model="ruleForm.integralUseDiscountControlUpper" @change="formatInputChange($event)"></el-input>
            <label>商品都适用</label>
          </div>
        </el-form-item>
        <el-form-item label="比例限制" prop="useProportionalRestriction" class="percent-item">
            <label>最多可抵用商品金额的 </label>
            <el-input v-model="ruleForm.useProportionalRestriction" @keyup.native="formatInput($event)"><template slot="append">%</template></el-input>
        </el-form-item>
      </div>
      <el-form-item label="积分说明" prop="integralScript" class="margin-20">
        <div class="tinymce-wrap">
          <editor id='tinymce' v-model='ruleForm.integralScript' :init='init'></editor>
        </div>
        <!-- <div v-html='tinymceHtml'></div> -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script type="text/javascript">
import { postRequest,postJsonRequest,postForm } from '@/api/api';

import strLength from '@/common/js/strlen';
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
  export default {
  name: "pointSystem",
  props: {
    pointInfo: Object,
    projectName: String
  },
  data() {
    var getDiscountControlValid = (rule, value, callback) => {
      if (this.ruleForm.integralGetStatus == 1) {
        // this.$refs.ruleForm.validateField('integralGetDiscountControl');
        // callback(new Error('请输入密码'));
        console.log(value)
        if (value == 2) {
          this.$refs.ruleForm.validateField('integralGetFreezeDays');
          this.$refs.ruleForm.validateField('effectiveTime');
        }
        callback();
      } else {
        // if (this.ruleForm.integralGetStatus == 1) {
        //   this.$refs.ruleForm.validateField('integralGetDiscountControl');
        // }
        callback();
      }
    };
    // 折扣率
    var getDiscountControlUpperValid = (rule, value, callback) => {
      if (value == '') {

        callback(new Error('请输入折扣率'));
        console.log(value)

      } else {
         callback();
      }
    };
    // 积分冻结期
    var getFreezeDaysValid = (rule, value, callback) => {
      if (value === '') {

        callback(new Error('请输入积分冻结期'));
        console.log(value)

      } else {
         callback();
      }
    };
    var effectiveTimeValid = (rule, value, callback) => {
      if (value === '') {

        callback(new Error('请输入积分有效期'));
        console.log(value)

      } else {
         callback();
      }
    };
    // 比例限制
    var useProportionalResValid = (rule, value, callback) => {
      if (this.ruleForm.integralUseStatus == 1 && value === '') {

        callback(new Error('请输入比例限制'));
        console.log(value)

      } else {
         callback();
      }
    };
    // 积分说明
    var integralScriptValid = (rule, value, callback) => {
      if (value === '') {

        callback(new Error('请输入积分说明'));
        console.log(value)

      } else {
         callback();
      }
    };

    return {
      repProjectName: 'gic-clique',
      navpath: [{
          name: '首页',
          path: '/'
        },
        {
          name: '积分制度',
          path: ''
        }
      ],

      // form
      cateOptions: [
        {
          value: '1',
          label: '四舍五入'
        },
        {
          value: '2',
          label: '抹零'
        },
        {
          value: '3',
          label: '进位制'
        }
      ],
      ruleForm: {
        // 积分获取规则
        memberIntegralId: "",   // id
        enterpriseId: "",   //企业id
        integralGet: {fee:"1",integral:"1"},   //  积分获取
        integralUse: {fee:"1",integral:"1"},  //积分使用
        integralScript: "",  //说明
        integralGetStatus: "1",  //积分获得开启（0：否，1：是）
        integralUseStatus: "1",  //积分使用开启（0：否，1：是）
        effectiveTime: "100",  //积分有效期
        integralGetDiscountControl: '2',
        integralGetDiscountControlUpper:" 0.0",   // 折扣控制 折扣范围 下限
        integralGetDiscountControlLower: "0.0",   // 折扣控制 折扣范围 上限
        integralGetFreezeDays: "0",    // 获取积分冻结天数
        integralUseDiscountControl: "1",  // 折扣控制 1所有折扣商品适用 2折扣范围
        integralUseDiscountControlUpper: "0.0",
        integralUseDiscountControlLower: "0.0",
        useProportionalRestriction: "90",  //抵现比例限制
        integralCost: {fee:"1",integral:"1"},  //积分成本
      },
      rules: {
        integralGetStatus: [
          { required: true, message: '请选择积分获取规则', trigger: 'blur' },
        ],
        integralGetDiscountControl: [
          { validator: getDiscountControlValid, trigger: 'change' }
        ],
        integralGetDiscountControlUpper: [
          { validator: getDiscountControlUpperValid, trigger: 'change' }
        ],
        integralGetFreezeDays: [
          { validator: getFreezeDaysValid, trigger: 'blur' }
        ],
        effectiveTime: [
          { validator: effectiveTimeValid,  trigger: 'change' }
        ],
        useProportionalRestriction: [
          { validator: useProportionalResValid, trigger: 'blur' }
        ],
        integralScript: [
          { validator: integralScriptValid, trigger: 'blur' }
        ],
        // desc: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ]
      },

      // tinymce
      tinymceHtml: '请输入内容',
      init: {
        language_url: 'static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: 'static/tinymce/skins/lightgray',
        height: 300,
        // 图片上传
        // without images_upload_url set, Upload tab won't show up
        // images_upload_url: '',
        // images_upload_base_path: '/some/basepath',
        images_upload_credentials: true, //是否应传递cookie等跨域的凭据
        // images_upload_handler提供三个参数：blobInfo, success, failure
        images_upload_handler: (blobInfo, success, failure)=>{
          console.log(blobInfo)
          this.handleImgUpload(blobInfo, success, failure)
        },
        // 添加插件
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false,
        setup: function(editor) {
            // 点击编辑框回调
            editor.on('click', function(e) {
              console.log('Editor was clicked');
            });
        },
        fontsize_formats: "8px 10px 12px 14px 18px 24px 36px",

      }
    }
  },
  created() {
    // this.selectReplayStyle()
  },
  methods: {
    // 保存
    submitForm(formName) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(that.pointInfo)
          var data = JSON.parse(JSON.stringify(that.ruleForm))

          // 非空验证
          var flag = !data.integralGet.fee||!data.integralGet.integral||(!data.integralGetFreezeDays && data.integralGetFreezeDays != '0');
          if (data.integralGetStatus == 1 && flag) {
            that.$message.error({
              duration: 1000,
              message: "请填写积分获取规则"
            })
            return;
          }
          if (!parseInt(data.effectiveTime)) {
            that.$message.error({
              duration: 1500,
              message: "积分有效期格式不正确"
            })
            return;
          }


          var tag = !data.integralUse.fee||!data.integralUse.integral||!data.integralCost.integral|| !data.integralCost.fee||!parseInt(data.useProportionalRestriction);
          if (data.integralUseStatus == 1 && tag) {
            that.$message.error({
              duration: 1000,
              message: "请填写积分抵现规则"
            })
            return;
          }

          // 折扣率判断
          var flagA = (data.integralGetStatus == 1 && data.integralGetDiscountControl == 2 && (parseInt(data.integralGetDiscountControlLower) >10 || parseInt(data.integralGetDiscountControlUpper) > 10 || Number(data.integralGetDiscountControlUpper) <= Number(data.integralGetDiscountControlLower)))||(data.integralUseDiscountControl == 2&&(Number(data.integralUseDiscountControlLower) >= Number(data.integralUseDiscountControlUpper)))
          if (flagA) {
            that.$message.error({
              duration: 1000,
              message: "折扣率格式有误"
            })
            return;
          }

          if (data.useProportionalRestriction > 100) {
            that.$message.error({
              duration: 1000,
              message: "比例限制文本格式有误"
            })
            return;
          }


          // 获取规则需要乘以10
          if (data.integralGetStrategy) {}
          data.integralGet.fee = parseInt(data.integralGet.fee*10)
          data.integralGet.integral = parseInt(data.integralGet.integral*10)
          data.integralGet = JSON.stringify(data.integralGet)
          data.integralUse = JSON.stringify(data.integralUse)
          data.integralCost = JSON.stringify(data.integralCost)
          that.saveInfo(data);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    saveInfo(data) {
      var that = this

      var param = data;

      param.requestProject = that.repProjectName
      console.log(param)


      postRequest('/api-admin/save-member-integral-setting',param)
      .then((res) => {
        // console.log(res,res.data,res.data.errorCode)
        var resData = res.data
        if (resData.errorCode == 0) {
          that.$message({
            message: '保存成功',
            type: 'success'
          });
          // 更新原数据
          // that.updateData();
          return;
        }
        // that.userFormVisible = false;
        that.$message.error({
          duration: 1000,
          message: resData.message
        })

      })
      .catch(function (error) {
        console.log(error);
        // that.toLogin()
        // that.userFormVisible = false;
        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    // 更新数据
    updateData() {
      var that = this
      that.ruleForm.integralGet = JSON.parse(that.ruleForm.integralGet)
      that.ruleForm.integralUse = JSON.parse(that.ruleForm.integralUse)
      that.ruleForm.integralCost = JSON.parse(that.ruleForm.integralCost)
      that.ruleForm.integralGet.fee = parseInt(that.ruleForm.integralGet.fee/10)
      that.ruleForm.integralGet.integral = parseInt(that.ruleForm.integralGet.integral/10)

    },


    // 上传图片
    handleImgUpload (blobInfo, success, failure) {
      var that = this
      let formdata = new FormData()
      formdata.set('upload_file', blobInfo.blob())
      formdata.set("requestProject",that.repProjectName);
      console.log(formdata)
      postForm('/api-plug/upload-img', formdata).then(res => {
        success(res.data.result[0].qcloudImageUrl)
      }).catch(res => {
        console.log(res)
        failure('error')
      })
    },

    // 获取
    formatInputFee(e) {
      var that = this
      console.log(e)
      that.ruleForm.integralGet.fee = Number(strLength.getCharVal(String(that.ruleForm.integralGet.fee).replace(/[^\.\d]/g,''),6)).toFixed(1)
      that.ruleForm.integralGet.integral = Number(strLength.getCharVal(String(that.ruleForm.integralGet.integral).replace(/[^\.\d]/g,''),8)).toFixed(1)

    },

     // 折扣重新写的判断
    formatInputChange(e) {
      var that = this
      console.log(e)
      that.ruleForm.integralGetDiscountControlLower = Number(String(that.ruleForm.integralGetDiscountControlLower).replace(/[^\.\d]/g,'')).toFixed(2) == 'NaN'? '0.00': Number(String(that.ruleForm.integralGetDiscountControlLower).replace(/[^\.\d]/g,'')).toFixed(2);
      that.ruleForm.integralGetDiscountControlUpper = Number(String(that.ruleForm.integralGetDiscountControlUpper).replace(/[^\.\d]/g,'')).toFixed(2) == 'NaN'? '0.00': Number(String(that.ruleForm.integralGetDiscountControlUpper).replace(/[^\.\d]/g,'')).toFixed(2);
      // 比较大小
      if (that.ruleForm.integralGetDiscountControlLower > 10) {
        that.ruleForm.integralGetDiscountControlLower = Number(10).toFixed(2)
      }
      if (that.ruleForm.integralGetDiscountControlUpper > 10) {
        that.ruleForm.integralGetDiscountControlUpper = Number(10).toFixed(2)
      }
      // if (Number(that.ruleForm.integralGetDiscountControlLower) >= Number(that.ruleForm.integralGetDiscountControlUpper)) {
      //   that.ruleForm.integralGetDiscountControlLower = String(Number(that.ruleForm.integralGetDiscountControlUpper - 1).toFixed(2)).indexOf('-') != '-1'? '0.00': Number(that.ruleForm.integralGetDiscountControlUpper - 1).toFixed(2)
      // }
      that.ruleForm.integralUseDiscountControlLower = Number(String(that.ruleForm.integralUseDiscountControlLower).replace(/[^\.\d]/g,'')).toFixed(2) == 'NaN'? '0.00': Number(String(that.ruleForm.integralUseDiscountControlLower).replace(/[^\.\d]/g,'')).toFixed(2);
      that.ruleForm.integralUseDiscountControlUpper = Number(String(that.ruleForm.integralUseDiscountControlUpper).replace(/[^\.\d]/g,'')).toFixed(2) == 'NaN'? '0.00': Number(String(that.ruleForm.integralUseDiscountControlUpper).replace(/[^\.\d]/g,'')).toFixed(2);
       // 比较大小
      if (that.ruleForm.integralUseDiscountControlLower > 10) {
        that.ruleForm.integralUseDiscountControlLower = Number(10).toFixed(2)
      }
      if (that.ruleForm.integralUseDiscountControlUpper > 10) {
        that.ruleForm.integralUseDiscountControlUpper = Number(10).toFixed(2)
      }
      // if (Number(that.ruleForm.integralUseDiscountControlLower) >= Number(that.ruleForm.integralUseDiscountControlUpper)) {
      //   that.ruleForm.integralUseDiscountControlLower = String(Number(that.ruleForm.integralUseDiscountControlUpper - 1).toFixed(2)).indexOf('-') != '-1'? '0.00':Number(that.ruleForm.integralUseDiscountControlUpper - 1).toFixed(2)
      // }

      that.$forceUpdate()
    },

    // 输入框输入校验数字
    formatInput(e){
      var that = this
      console.log(e,that.ruleForm.integralGet.fee)
      // 过滤非数字

      // that.ruleForm.integralGet.fee = Number(strLength.getCharVal(String(that.ruleForm.integralGet.fee).replace(/[^\.\d]/g,''),6)).toFixed(1)
      // that.ruleForm.integralGet.integral = Number(strLength.getCharVal(String(that.ruleForm.integralGet.integral).replace(/[^\.\d]/g,''),8)).toFixed(1)

      that.ruleForm.integralUse.fee = strLength.getCharVal(String(that.ruleForm.integralUse.fee).replace(/[^\d]/g,''),6) || '0'
      that.ruleForm.integralUse.integral = strLength.getCharVal(String(that.ruleForm.integralUse.integral).replace(/[^\d]/g,''),8) || '0'

      that.ruleForm.integralCost.fee = strLength.getCharVal(String(that.ruleForm.integralCost.fee).replace(/[^\d]/g,''),6) || '0'
      that.ruleForm.integralCost.integral = strLength.getCharVal(String(that.ruleForm.integralCost.integral).replace(/[^\d]/g,''),8) || '0'

      that.ruleForm.integralGetFreezeDays = strLength.getCharVal(String( that.ruleForm.integralGetFreezeDays).replace(/[^\d]/g,''),4)
      that.ruleForm.effectiveTime = strLength.getCharVal(String(that.ruleForm.effectiveTime).replace(/[^\d]/g,''),4)

      console.log(String(that.ruleForm.integralGetDiscountControlLower).replace(/[^\.\d]/g,''),parseInt())


      that.ruleForm.useProportionalRestriction = strLength.getCharVal(String(that.ruleForm.useProportionalRestriction).replace(/[^\d]/g,''),3) || '0'
      if (parseInt(that.ruleForm.useProportionalRestriction)> 100) {
        that.ruleForm.useProportionalRestriction = 100;
      }

      that.$forceUpdate()

    },

    changeRoute(route) {
      this.$router.push(route);
    }
  },
  watch: {
    projectName: function(newData,oldData){
      var that = this;
      // console.log("新数据:",newData,oldData)
      that.repProjectName = newData || 'gic-web';
    },
    pointInfo: function(newData,oldData){
      var that = this;
      console.log("新数据:",newData,oldData)
      if (!!newData && Object.keys(newData).length) {
        that.ruleForm = newData;
      }
    },
  },
  components: {
     Editor
  },
  mounted() {
    var that = this
    tinymce.init({});
    // that.pointInfo.integralGetStatus = String(that.pointInfo.integralGetStatus);
    // that.pointInfo.integralUseStatus = String(that.pointInfo.integralUseStatus);
    // that.pointInfo.integralGetStrategy = String(that.pointInfo.integralGetStrategy);
    // that.pointInfo.integralGetDiscountControl = String(that.pointInfo.integralGetDiscountControl);
    // that.pointInfo.integralUseDiscountControl = String(that.pointInfo.integralUseDiscountControl);

    // that.pointInfo.integralGet = JSON.parse(that.pointInfo.integralGet);
    // that.pointInfo.integralUse = JSON.parse(that.pointInfo.integralUse);
    // that.pointInfo.integralCost = JSON.parse(that.pointInfo.integralCost);
    console.log("积分form:",that.pointInfo)
    // 传递的数据非空赋值
    if (Object.keys(that.pointInfo).length) {
      that.ruleForm = that.pointInfo;
    }

  }
}
</script>
<style lang="less" scoped>
.form-wrap {

  .el-input {
    width: 178px;
    padding: 0 10px;
  }

  /deep/ .el-form-item__label {
    padding: 0 12px 0 0;
  }

  /deep/ .el-form {
    .el-form-item:last-child {
      /*margin-bottom: 0;*/
    }
  }

  .padding-0 {
    padding: 0;
  }

  .form-child {
    width: 1011px;
    padding: 15px 20px 1px 0px;
    background: #f5f6f9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .margin-20 {
    margin-top: 20px;
  }

  .tinymce-wrap {
    width: 890px;

    /deep/ .mce-tinymce {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      border: 1px solid #dcdfe6;
    }

    /deep/ .mce-panel {
      border: 0px solid #dcdfe6;
    }
  }
}
</style>
