<template>
  <div class="set_notice">
    <div class="type_item">
      <p class="item_title">服务推送</p>
      <p class="item_description">关闭后用户将接收不到服务推送的消息通知</p>
      <div class="item_action">
        <a
          :class="{ on: data.service_message === 1 }"
          @click="toggleAction('service_message', 1)"
        >
          <img
            class="icon_off"
            :src="require('../../../assets/imgs/btn_off_hov.png')"
          />
          <img
            class="icon_on"
            :src="require('../../../assets/imgs/btn_on_hov.png')"
          />
        </a>
      </div>
    </div>
    <div class="type_item">
      <p class="item_title">平台维护</p>
      <p class="item_description">关闭后用户将接收不到平台维护的消息通知</p>
      <div class="item_action">
        <a
          :class="{ on: data.platform_message === 1 }"
          @click="toggleAction('platform_message', 2)"
        >
          <img
            class="icon_off"
            :src="require('../../../assets/imgs/btn_off_hov.png')"
          />
          <img
            class="icon_on"
            :src="require('../../../assets/imgs/btn_on_hov.png')"
          />
        </a>
      </div>
    </div>
    <div class="type_item">
      <p class="item_title">版本更新</p>
      <p class="item_description">关闭后用户将接收不到版本更新的消息通知</p>
      <div class="item_action">
        <a
          :class="{ on: data.version_message === 1 }"
          @click="toggleAction('version_message', 3)"
        >
          <img
            class="icon_off"
            :src="require('../../../assets/imgs/btn_off_hov.png')"
          />
          <img
            class="icon_on"
            :src="require('../../../assets/imgs/btn_on_hov.png')"
          />
        </a>
      </div>
    </div>
    <div class="type_item">
      <p class="item_title">系统通知</p>
      <p class="item_description">关闭后用户将接收不到系统通知的消息通知</p>
      <div class="item_action">
        <a
          :class="{ on: data.system_message === 1 }"
          @click="toggleAction('system_message', 4)"
        >
          <img
            class="icon_off"
            :src="require('../../../assets/imgs/btn_off_hov.png')"
          />
          <img
            class="icon_on"
            :src="require('../../../assets/imgs/btn_on_hov.png')"
          />
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        service_message: 0,
        platform_message: 0,
        version_message: 0,
        system_message: 0,
      },
      disabledstate: {},
    };
  },
  methods: {
    getOptions() {
      this.$http.get("/apaas/backmgt/center/messageSets").then(({ data }) => {
        if (data.success === 1) {
          let options = data.data;

          this.data.service_message = options.service_message;
          this.data.platform_message = options.platform_message;
          this.data.version_message = options.version_message;
          this.data.system_message = options.system_message;
        }
      });
    },
    setOption(typeStr, type, state) {
      this.$set(this.disabledstate, typeStr, true);

      let finallycallback = () => {
        this.$set(this.disabledstate, typeStr, false);
        this.getOptions();
      };

      this.$http
        .put("/apaas/backmgt/center/messageSets", null, {
          params: {
            type,
            state,
          },
        })
        .then(({ data }) => {
          if (data.success === 1) {
            this.$message.success("设置成功");
          } else {
            this.$message.error(data.errMsg || "设置失败");
          }
          finallycallback();
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("设置失败");
          finallycallback();
        });
    },
    toggleAction(typeStr, type) {
      if (this.disabledstate[typeStr]) {
        this.$message.warning("你操作的频率过快，请稍等");
        return;
      }

      let state = this.data[typeStr] === 1 ? 0 : 1;

      this.$set(this.data, typeStr, state);
      this.setOption(typeStr, type, state);
    },
  },
  created() {
    this.getOptions();
  },
};
</script>

<style>
.set_notice {
  width: 410px;
  background-color: #fff;
  border: 1px solid #e3e5ef;
  box-sizing: border-box;
  border-radius: 10px;
}
.set_notice::before {
  content: "";
  position: absolute;
  top: -16px;
  right: 20px;
  border-top: 0 solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 16px solid #e3e5ef;
  border-left: 8px solid transparent;
}
.set_notice::after {
  content: "";
  position: absolute;
  top: -14px;
  right: 21px;
  border-top: 0 solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 14px solid #fff;
  border-left: 7px solid transparent;
}
.type_item {
  position: relative;
  padding: 12px 100px 12px 35px;
}
.type_item + .type_item {
  border-top: 1px solid #e3e5ef;
}
.type_item p {
  font-size: 14px;
  line-height: 24px;
  color: #242c43;
}
.type_item p.item_title {
  position: relative;
}
.type_item p.item_title::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.type_item:nth-child(1) p.item_title::before {
  background-color: #e8740f;
}
.type_item:nth-child(2) p.item_title::before {
  background-color: #3c61ff;
}
.type_item:nth-child(3) p.item_title::before {
  background-color: #ffa80b;
}
.type_item:nth-child(4) p.item_title::before {
  background-color: #7785ec;
}
.type_item p.item_description {
  color: #a9aec0;
}
.item_action {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item_action a {
  font-size: 0;
  cursor: pointer;
}
.item_action a .icon_on {
  display: none;
}
.item_action a.on .icon_on {
  display: inline-block;
}
.item_action a.on .icon_off {
  display: none;
}
</style>
