<template>
  <div class="rule_item_edit_box">
    <van-nav-bar title="修改规则" left-text="返回" @click-left="$route_back" left-arrow right-text="删除" @click-right="del"></van-nav-bar>
    <div class="body_com has_header">
      <scroller>
        <van-cell-group>
          <van-cell><Mtextarea v-model="item.remark" placeholder="输入规则内容" :text_max="300" :imgs_max="3" @input="onRemarkInput"></Mtextarea></van-cell>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="分值" class="cell-right-4rem">
            <van-radio-group v-model="item.range_type" class="radio_button" direction="horizontal" slot="right-icon">
              <van-radio class="list" :name="1">固定分</van-radio>
              <van-radio class="list" :name="2">范围分</van-radio>
            </van-radio-group>
          </van-cell>
          <template v-if="item.range_type == 1">
            <NumberInput v-model="item.min_point"  title="输入分值" name="输入分值" required v-validate="'required'"></NumberInput>
          </template>
          <template v-else>
            <NumberInput v-model="item.min_point"  title="最小分值" name="最小分值" required v-validate="'required'"></NumberInput>
            <NumberInput v-model="item.max_point"  title="最大分值" name="最大分值" required v-validate="'required'"></NumberInput>
          </template>
        </van-cell-group>
        <van-cell-group class="choose"><CategorySelectorCell required title="选择分类" v-model="rule_cate" :max="2" :multi="false"></CategorySelectorCell></van-cell-group>
        <van-cell-group>
          <van-cell title="积分类型" class="cell-right-4rem">
            <van-radio-group v-model="item.pt_id" direction="horizontal" slot="right-icon" class="radio_button">
              <van-radio v-for="(item, index) in types_list" class="list" :name="item.id" :key="index">{{ item.name }}</van-radio>
            </van-radio-group>
          </van-cell>
        </van-cell-group>
        <div style="padding:0.32rem;"><van-button size="large" @click="data_verify" type="info">保存</van-button></div>
      </scroller>
    </div>
  </div>
</template>
<script>

import Mtextarea from '@/components/Mtextarea';
import NumberInput from '@/components/NumberInput';
import CategorySelectorCell from '@/components/CategorySelectorCell';
import Vue from 'vue';
import { Switch } from 'vant';
import {specialFilter} from "../../../utils/helper";

Vue.use(Switch);
export default {
  name: 'rule_item_edit',
  components: {
    Mtextarea,
    CategorySelectorCell,
    NumberInput
  },
  data() {
    return {
      data: {
        items: []
      },
      cycle: false,
      rule_cate: [],
      item: {
        rule_id: 0,
        prize_type: 1,
        range_type: 1,
        min_point: 0,
        max_point: 0,
        remark: '',
        is_attendance: 0,
        cycle_type: 1,
        pt_id: 0
      },
      send_loading: false,
      types_list: [],
      id: 0
    };
  },
  watch: {
    cycle(val) {
      if (val) {
        this.item.cycle_type = 2;
      } else {
        this.item.cycle_type = 1;
      }
    },
    rule_cate(val) {
      if (val.length > 0) {
        this.item.rule_id = val[0].id;
      } else {
        this.item.rule_id = 0;
      }
    }
  },
  methods: {
    data_verify() {
      let self = this;
      self.$validator.validateAll().then(result => {
        if (!result) {
          self.$notify({ type: 'danger', message: self.$validator.errors.items[0].msg });
        } else {
          self.send();
        }
      });
    },
    del() {
      let self = this;
      this.$dialog
        .confirm({
          title: '删除规则信息吗',
          message: '确定要删除当前规则信息吗？'
        })
        .then(() => {
          self.$toast.loading({
            mask: true,
            message: '处理中...'
          });
          this.$axiosUser('delete', '/api/pro/integral/rule/items', { item_id: self.id }).then(res => {
            self.$toast.clear();
            if (res.data.code == 1) {
              self.$toast.success('删除成功');
              setTimeout(() => {
                self.$route_back();
              }, 300);
            } else {
              self.$toast(res.data.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    send() {
      let self = this;
      self.data.items = [];
      if (self.item.range_type == 1) {
        self.item.max_point = self.item.min_point;
      }
      if (self.item.range_type == 1 && self.item.min_point == 0) {
        self.$notify({ type: 'danger', message: '固定积分必须是个正整数' });
        return false;
      }
      if(this.item.range_type == 2&&(this.item.min_point == 0||this.item.max_point == 0)){
        this.$notify({ type: 'danger', message: '分值不能为零' })
        return false
      }

      self.data.items.push(self.item);
      self.send_loading = true;
      self.$toast.loading({
        message: '正在处理'
      });
      self.item.item_id = self.item.id;
      this.$axiosUser('put', '/api/pro/integral/rule/items', self.item)
        .then(res => {
          self.send_loading = false;
          self.$toast.clear();
          if (res.data.code == 1) {
            self.$toast.success('修改成功');
            setTimeout(() => {
              self.$route_back();
            }, 300);
          } else {
            self.$toast(res.data.msg);
          }
        })
        .catch(e => {
          self.send_loading = false;
          self.$toast.clear();
        });
    },
    get_point_types() {
      this.types_list = [];
      let list = this.$getTypes;
      for (let i in list) {
        if (list[i].code != 'JX') {
          this.types_list.push(list[i]);
        }
      }
    },
    onRemarkInput(v){
      this.item.remark = specialFilter(v)
    }
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.item = JSON.parse(localStorage.getItem('rule_' + this.id));
      this.item.pt_id=Number(this.$route.query.pt_id)
      if (this.item.cycle_type == 2) {
        this.cycle = true;
      }
      if (this.item.rule_id) {
        this.rule_cate = [{ id: this.item.rule_id * 1, name: this.$route.query.rule_name }];
      }
    }
    this.item.remark = specialFilter(this.item.remark)
    this.get_point_types();
  }
};
</script>
<style scoped>
.body_com {
  height: calc(100% - 0.92rem);
  position: relative;
}
</style>
