<template>
<div class="app-container">
  <el-card class="box-card">
    <div slot="header" class="clearfix">
    <span>积分设置</span>
  </div>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="加油返积分" name="first">
        <div>
          <el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
            <el-row>
              <el-form-item  label="积分规则" prop="refuelPointsRules" >
                <el-radio-group v-model="dataForm.refuelPointsRules">
                  <el-radio :label='0'>默认规则</el-radio>
                  <el-radio :label='1'>积分活动规则</el-radio>
                </el-radio-group>
                <span style="display: block; width: 800px; color: rgb(128, 128, 128);font-size: 10px;">
                  默认规则:使用当前页面简版设置,适用于对积分规则要求不高的油站积分活动规则:积分获取按照积分活动(活动营销-积分活动)进行处理,积分活动功能可实现指定日期、指定油品、指定周、指定等级等使用不同积分规则</span>
              </el-form-item>
            </el-row>
            <template v-if="dataForm.refuelPointsRules == 1">
              <span style="color: red;border-left: 40px;padding-left: 100px;">请前往活动营销-积分活动页面创建积分规则</span>
            </template>
            <template v-if="dataForm.refuelPointsRules == 0">
              <el-row>
                <el-form-item  label="积分功能" prop="refuelPointsFunction" >
                  <el-radio-group v-model="dataForm.refuelPointsFunction">
                    <el-radio :label='0'>启用</el-radio>
                    <el-radio :label='1'>禁用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item  label="场景类型" prop="refuelSceneType" >
                  <el-radio-group v-model="dataForm.refuelSceneType">
                    <el-radio :label='0'>按金额</el-radio>
                    <el-radio :label='1'>实付金额</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-row>

              <template v-if="dataForm.refuelSceneType == 0">
                <el-row>
                  <el-form-item  label="金额类型" prop="refuelAmountType" >
                    <el-radio-group v-model="dataForm.refuelAmountType">
                      <el-radio :label='0'>订单金额</el-radio>
                      <el-radio :label='1'>实付金额</el-radio>
                    </el-radio-group>
                    <span style="display: block; width: 800px; color: rgb(128, 128, 128);font-size: 10px;">
                      计算积分的金额类型                </span>
                    </el-form-item>
                </el-row>
                <el-row v-if="dataForm.refuelAmountType == 1">
                  <el-form-item  label="储值参与" prop="refuelValueParticipation" >
                    <el-radio-group v-model="dataForm.refuelValueParticipation">
                      <el-radio :label='0'>储值金额不参与</el-radio>
                      <el-radio :label='1'>储值金额参与</el-radio>
                    </el-radio-group>
                    <span style="display: block; width: 800px; color: rgb(128, 128, 128);font-size: 10px;">
                      按照实付金额计算积分,实付金额是否包含储值卡付款金额部分 如参与 则实付金额 = 储值金额+其它实际付款金额
                    </span>
                  </el-form-item>
                </el-row>
              </template>

              <el-row>
                <el-form-item  label="场景规则" prop="refuelSceneRules" >
                  <el-radio-group v-model="dataForm.refuelSceneRules" @click="abc($event)">
                    <el-radio :label='0'>通用规则</el-radio>
                    <el-radio :label='1'>油品区分</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-row>


              <template v-if="dataForm.refuelSceneRules == 0">
                <el-row>
                  <el-form-item  label="消费金额" prop="refuelFuelAmount" label-width="90px">
                        <el-input style="width: 500px;" v-model="dataForm.refuelFuelAmount" placeholder="？？？">
                          <template slot="append">元</template>
                        </el-input>
                      </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item  label="积多少分" prop="refuelPoints" label-width="90px">
                        <el-input style="width: 500px;" v-model.number="dataForm.refuelPoints" placeholder="？？？">
                          <template slot="append">元</template>
                        </el-input>
                      </el-form-item>
                </el-row>
              </template>
              <template v-if="dataForm.refuelSceneRules == 1">
                <div class="conten-bottom">
                  <div v-for="(item, index) in dataForm.refuelConsumptionAmount" class="cardbox">
                    <div style="height:40px; ">
                      <span>{{ item.oilName }}</span>
                    </div>
                    <div style=" width: 99%;height: 99%;">
                      <el-form-item  label="消费金额" prop="amount" label-width="90px">
                        <el-input style="width: 200px;" v-model="item.amount" placeholder="？？？">
                          <!-- {{ item.amount }} -->
                          <template slot="append">元</template>
                        </el-input>
                      </el-form-item>
                        <el-form-item  label="积多少分" prop="points" label-width="90px">
                        <el-input style="width: 200px;" v-model.number="item.integral" placeholder="？？？">
                          <!-- {{  parseInt(item.integral) }} -->
                          <template slot="append">积分</template>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                </div>
              </template>


            </template>

          </el-form>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="充值积分" name="second">
        <div>
          <el-alert
            title="充值赠送积分详细规则请在充值活动对应规则内配置"
            type="warning"
            show-icon>
          </el-alert>
          <el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
            <el-row>
              <el-form-item  label="充值赠送" prop="rechargeGive" >
                <el-radio-group v-model="dataForm.rechargeGive">
                  <el-radio :label='0'>启用</el-radio>
                  <el-radio :label='1'>禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane> -->
      <el-tab-pane label="邀请用户" name="third">
        <div>
          <el-alert
            title="邀请用户为推荐有礼活动赠送积分规则、邀请新人后将获得的积分"
            type="info"
            show-icon>
          </el-alert>
          <el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
            <el-row>
              <el-form-item  label="邀请赠送" prop="inviteGive" >
                <el-radio-group v-model="dataForm.inviteGive">
                  <el-radio :label='0'>启用</el-radio>
                  <el-radio :label='1'>禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item  label="充值赠送" prop="rechargeGive" >
                <el-input v-model.number="dataForm.rechargeGive" placeholder="？？？">
                  <template slot="prepend">每邀请一人赠送</template>
                  <template slot="append">积分</template>

                </el-input>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="每日签到" name="fourth">
        <div>
          <el-alert
            title="每日积分签到"
            type="info"
            description="签到规则为连续签到、如中途漏签一天将重置从第一天开始"
            show-icon>
          </el-alert>
          <el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">

            <div style="width: 100%;  margin-top: 20px;">

              <el-form-item style="width: 24%" v-for="item, index in dataForm.pointsObtained" :key="index" :prop="'pointsObtained' + index" :label="item.day">
                <el-input v-model.number="item.integral" placeholder="？？？">
                  <template slot="append">积分</template>
                </el-input>
              </el-form-item>
            </div>


            <el-row :gutter="24">
              <el-col :span="23">
                <el-form-item  label="签到规则" prop="signInRules" >
                  <el-input style="width: 900px;" :rows="3" type="textarea" v-model="dataForm.signInRules"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="15">
                <el-form-item  label="签到功能" prop="signInFunction" >
                <el-radio-group v-model="dataForm.signInFunction">
                  <el-radio :label='0'>启用</el-radio>
                  <el-radio :label='1'>禁用</el-radio>
                </el-radio-group>
              </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="积分规则" name="five">
        <div>
          <el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
            <!-- <el-row> -->
              <span style="margin-bottom: 20px;">积分说明</span>
              <editor style="margin-top: 20px;"  @input="handleChildValue" :value.default="dataForm.pointsRules" :height.default="500"></editor>

            <!-- </el-row> -->
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div style="float: right;margin-top: 20px; margin-bottom: 20px;">
      <el-button type="primary" @click="submit"
                 v-hasPermi="['integral:settings:index']"

      >确 定</el-button>
    </div>
  </div>
  </el-card>
</div>
</template>

<script>
import {getSettingsApi,updateSettingsApi } from "@/api/integral/settings";
import editor from '@/components/Editor/index'

export default {
  name: "index",
  // components: {Editor},

  data() {
    var valiNumberPass = (rule, value, callback) => {//包含小数的数字
      parseFloat(value).toFixed(2)
        let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
        if (value === '') {
          callback(new Error('请输入内容'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入数字'));
        } else {
          callback();
        }
      };
    return {


      activeName: 'first',


      rules:{
        refuelPointsRules:[
            { required: true, message: '请选择积分规则', trigger: 'change' }
        ],
        refuelSceneType:[
          { required: true, message: '请选择场景类型', trigger: 'change' }
        ],
        refuelAmountType:[
          { required: true, message: '请选择金额类型', trigger: 'change' }
        ],
        refuelValueParticipation:[
          { required: true, message: '请选择储值参与', trigger: 'change' }
        ],
        refuelSceneRules:[
          { required: true, message: '请选择场景规则', trigger: 'change' }
        ],
        refuelFuelAmount: [
            { required: true, validator:valiNumberPass, trigger: "blur" }
        ],
        refuelPoints: [
          { required: true, message: '输入积分', trigger: "blur" },
          { type: 'number', message: '积分必须为数字值'}
        ],
      //   amount:[
      //     {required: true,
      //     validator: (rule, value, callback) => this.valiNumberPass(rule, value, callback, 'amount'),
      //     trigger: 'blur'
      // }
    // ],

        rechargeGive:[
          { required: true, message: '输入积分', trigger: "blur" },
          { type: 'number', message: '积分必须为数字值'}
        ],
        // points: [
        //   { required: true}
        // ],
      },
      dataForm: {
        // 积分设置ID
        id: null,
        // 加油积分规则
        refuelPointsRules: 0,
        // 加油积分功能
        refuelPointsFunction: 0,
        // 加油场景类型
        refuelSceneType: 0,
        // 加油金额类型
        refuelAmountType: 0,
        // 加油储值参与
        refuelValueParticipation: 0,
        // 加油场景规则
        refuelSceneRules: 0,
        // 加油消费金额
        refuelConsumptionAmount: '',
        // 加油积分
        refuelPoints: 0,
        // 加油油品金额
        refuelFuelAmount: 0.0,
        // 加油油品升数
        refuelFuelVolume: 0.0,
        // 充值赠送
        rechargeGive: 0,
        // 邀请赠送
        inviteGive: 0,
        // 邀请赠送规则
        inviteGiveRules: '',
        // 签到功能
        signInFunction: 0,
        // 签到规则
        signInRules: '',
        // 签到获得
        pointsObtained: [
          {
            day:'第1天获得',
            integral:0,
          },
          {
            day:'第2天获得',
            integral:0,
          },
          {
            day:'第3天获得',
            integral:0,
          },
          {
            day:'第4天获得',
            integral:0,
          },
          {
            day:'第5天获得',
            integral:0,
          },
          {
            day:'第6天获得',
            integral:0,
          },
          {
            day:'第7天获得',
            integral:0,
          },
          {
            day:'超8天获得',
            integral:0,
          }
        ],

        // 积分规则
        pointsRules: ''

      },



    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleChildValue(value) {
      console.log("vale",value)
      this.dataForm.pointsRules = value
    },


    getData() {
      let file = this.dataForm
      file.pointsObtained = JSON.stringify(file.pointsObtained);
      file.refuelConsumptionAmount = JSON.stringify(file.refuelConsumptionAmount);

      getSettingsApi(this.dataForm).then(res=>{
        this.dataForm = res.data
        this.dataForm.pointsObtained = JSON.parse(this.dataForm.pointsObtained)
        this.dataForm.refuelConsumptionAmount = JSON.parse(res.data.refuelConsumptionAmount)
      })
    },
    submit() {
      let file = this.dataForm
      // console.log()
      file.pointsObtained = JSON.stringify(file.pointsObtained);
      file.refuelConsumptionAmount = JSON.stringify(file.refuelConsumptionAmount);
      this.dataForm = {}
      updateSettingsApi(file).then(res=>{
        this.$modal.msgSuccess("添加成功");
        this.dataForm = {}
        res.data.pointsObtained = JSON.parse(res.data.pointsObtained)
        res.data.refuelConsumptionAmount = JSON.parse(res.data.refuelConsumptionAmount)
        this.dataForm = res.data
      }).catch(res=>{
        this.$modal.msgSuccess("添加失败");

      })
      // this.getData()

    },
    cancel() {},
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },

    valiNumberPass(rule, value, callback, fieldName) {
      this.$nextTick(() => {
        // 在这里进行自定义验证逻辑，value 应该在这时候被正确设置
        console.log(`Validating ${fieldName}:`, value);
      });
    },


}
</script>

<style scoped lang="scss">

.app-container{
    width: 100%;
    height: 100%;
    background: #f6f8f9;
  }
.conten-bottom{
    box-sizing: border-box;
    padding: 20px 20px;
    display: flex;
    flex-wrap: wrap;
  }
  .cardbox{
    margin-right: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    width: 23%;
    height: 150px;
    background-size:40% 70%;
    background-color: #f9f9f9;
    border: 1px solid rgb(196, 196, 196)
  }
</style>
