<template>
  <div class="integral-change" v-loading="loading">
    <p class="pb20">增加积分提醒</p>
    <ul>
      <li v-for="item in increaseList" :key="item">
        <label>{{ item.dictName }}</label>
        <el-switch @change="handleSetIntegralChange(item)" :value="item.state" :active-value="1" :inactive-value="0" />
        <template v-if="item.dictCode == 1101">
          <i class="ml20 ml20 dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">已有门店消费通知，不建议再开启积分变更提醒</span>
        </template>
      </li>
    </ul>
    <p class="pb20">减少积分提醒</p>
    <ul>
      <li v-for="item in reduceList" :key="item">
        <label>{{ item.dictName }}</label>
        <el-switch @change="handleSetIntegralChange(item)" :value="item.state" :active-value="1" :inactive-value="0" />
      </li>
    </ul>
  </div>
</template>

<script>
import { getIntegralChangeSetting, setIntegralChange } from '@/service/api/msgApi.js';
export default {
  name: 'integral-change',
  data() {
    return {
      loading: false,
      increaseList: [], // 增加积分提醒
      reduceList: [] // 减少积分提醒
    };
  },
  methods: {
    handleGetIntegralChangeSetting() {
      this.loading = true;
      getIntegralChangeSetting()
        .then(res => {
          this.loading = false;
          this.increaseList = res.result.increaseList || [];
          this.reduceList = res.result.reduceList || [];
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleSetIntegralChange({ id, state }) {
      this.loading = true;
      setIntegralChange({ id, state: state ? 0 : 1 })
        .then(res => {
          this.loading = false;
          this.handleGetIntegralChangeSetting();
        })
        .catch(() => {
          this.loading = false;
        });
    }
  },
  mounted() {
    this.handleGetIntegralChangeSetting();
  }
};
</script>

<style lang="scss" scoped>
.integral-change {
  min-height: 200px;
  ul li {
    label {
      min-width: 150px;
      display: inline-block;
      text-align: right;
      margin-bottom: 20px;
      margin-right: 15px;
    }
  }
}
</style>
