<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-20 11:58:33
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-20 15:49:28
 * @FilePath: \znxjxt-ui\src\views\xj\subscription\subscription-center\index.vue
 * @Description: 订阅中心
-->
<template>
  <div class="content">
    <!-- 表格 -->
    <el-table
      ref="subscriptionTable"
      :data="subscriptionList"
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column type="index" width="70" label="序号"> </el-table-column>
      <el-table-column label="消息类型" align="center" prop="messageTypeName" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 1"
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="handleConfirm(scope.row)"
            >订阅
          </el-button>
          <el-button
            v-if="scope.row.status === 2"
            size="mini"
            type="text"
            icon="el-icon-circle-close"
            @click="handleCancel(scope.row)"
            >取消订阅
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getSubscriptionList,
  subscribe,
  unsubscribe,
} from "@/api/xj/subscription";
export default {
  name: "SubscriptionCenter",
  data() {
    return {
      // 订阅列表
      subscriptionList: [],
      // 表格loading
      loading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * @description: 获取订阅列表
     */
    getList() {
      getSubscriptionList().then(({ code, data }) => {
        if (code === 200) {
          this.subscriptionList = data;
        }
      });
    },

    /**
     * @description: 订阅
     */
    handleConfirm(row) {
      this.$modal
        .confirm(`是否确认订阅选中的【${row.messageTypeName}】消息？`)
        .then(() => {
          return subscribe({
            messageType: row.messageType,
          });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("订阅成功");
        })
        .catch(() => {});
    },

    /**
     * @description: 取消订阅
     */
    handleCancel(row) {
      this.$modal
        .confirm(`是否取消订阅选中的【${row.messageTypeName}】消息？`)
        .then(() => {
          return unsubscribe({
            messageType: row.messageType,
          });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("取消订阅成功");
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 5.4rem);
  padding: 1rem;
}
</style>
