<template>
  <div class="mini-integral">
    <div class="content">
      <!-- 积分配置列表 -->
      <div class="integral-list">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%; margin-top: 10px"
          max-height="700"
        >
          <el-table-column prop="functionName" label="事件" />
          <el-table-column prop="" label="" />
          <el-table-column prop="functionValue" label="积分" />
          <el-table-column prop="" label="" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="miniIntegralEdit(scope.$index, scope.row)">
                修改
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="miniIntegralDelete(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>

          </el-table-column>
        </el-table>
      </div>
      <!-- 积分配置 -->
      <div class="integral-title">
        <div class="add" @click="dialogVisible = true">
          <img class="add-img" src="@/assets/plus2.png" alt="">
        </div>
        <div class="integral-text">
            <div class="h1">小</div>
            <div class="h1">程</div>
            <div class="h1">序</div>
            <div class="h1">积</div>
            <div class="h1">分</div>
            <div class="h1">配</div>
            <div class="h1">置</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增修改积分配置弹窗 -->
  <el-drawer v-model="dialogVisible" :with-header="false" @close="dialogVisible = false, miniIntegraldeta = {}">
    <div class="dialog-content">
      <div class="dialog-title">事件{{miniIntegraldeta.id? '编辑' : '新增'}}</div>
      <el-input
        v-if="!miniIntegraldeta.id"
        v-model="miniIntegraldeta.functionName"
        style="width: 100%; margin-top: 20px"
        :rows="3"
        type="textarea"
        placeholder="请输入事件名称"
      />
      <el-input
        v-model="miniIntegraldeta.functionValue"
        style="width: 100%;height: 50px; margin-top: 20px" 
        type="number"
        placeholder="请输入积分值"
      />
      <div class="dialog-btn">
        <div class="dialogSave" @click="miniIntegralAddSave">保存</div>
        <div class="dialogCancel" @click="dialogVisible = false">取消</div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getWxConfigList,
  addWxConfig,
  editWxConfig,
  deleteWxConfig,
} from "@/api/account";
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
} from "vue";
const refname = ref("");
const tableData = ref([]);
const dialogVisible = ref(false);
const miniIntegraldeta = ref({});
//保存积分配置
function miniIntegralAddSave() {
  if (!miniIntegraldeta.value.functionName) {
    ElMessage({
      type: "error",
      message: "事件名称不能为空",
    });
    return;
  }
  if (!miniIntegraldeta.value.functionValue) {
    ElMessage({
      type: "error",
      message: "积分值不能为空",
    });
    return;
  }
  if (miniIntegraldeta.value.id) {
    // 修改积分配置
    editWxConfig(miniIntegraldeta.value)
     .then(() => {
        ElMessage({
          type: "success",
          message: "修改成功",
        });
        dialogVisible.value = false;
        miniIntegraldeta.value = {};
        getIntegralList()
      })
     .catch(() => {
        ElMessage({
          type: "error",
          message: "修改失败",
        });
      });
  } else {
    // 新增积分配置
    addWxConfig(miniIntegraldeta.value)
     .then(() => {
        ElMessage({
          type: "success",
          message: "新增成功",
        });
        dialogVisible.value = false;
        miniIntegraldeta.value = {};
        getIntegralList()
     })
     .catch(() => {
        ElMessage({
          type: "error",
          message: "新增失败",
        });
      });
  }
}
// 新增积分配置弹窗
function miniIntegralEdit(index, row) {
  dialogVisible.value = true;
  miniIntegraldeta.value = row;
}
//删除积分配置
function miniIntegralDelete(index, row) {
  ElMessageBox.confirm("您确认要删除这个积分配置吗？")
    .then(() => {
      deleteWxConfig({ id: row.id })
        .then(() => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getIntegralList()
        })
        .catch(() => {
          ElMessage({
            type: "error",
            message: "删除失败",
          });
        });
    })
    .catch(() => {});
}
// 获取积分配置列表
function getIntegralList() {
  getWxConfigList()
   .then((res) => {
      tableData.value = res;
    })
   .catch(() => {
      ElMessage({
        type: "error",
        message: "获取积分配置列表失败",
      });
    });
}
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
onMounted(() => {
  getIntegralList();
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
</script>

<style scoped>
.mini-integral {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content {
  width: 80%;
  height: 80%;
  background-color: #f5f5f5;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
  padding: 40px;
}
.integral-list{
  width: 87%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 10px;
}
.integral-title{
  width: 10%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 10px;
}
.add{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c4c4c4;
  border-radius: 10px 10px 0 0;
}
.add:hover{
  background-color: #a9a9a9;
}
.add-img{
  width: 40px;
  height: 40px;
}
.integral-text{
  width: 100%;
  height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #c4c4c4;
  font-size: 25px;
  font-family: "SimSun", "Microsoft YaHei", sans-serif;
}
.h1{
  margin-top: 10px;
  margin-bottom: 10px;
}
.dialog-title {
  width: 100%;
  height: 50px;
  font-size: 25px;
  color: #b4b4b4;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.dialog-btn {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.dialogSave {
  width: 45%;
  height: 50px;
  background-color: #d6d6d6;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  font-size: 16px;
  color: #ffffff;
}
.dialogSave:hover {
  background-color: #b4b4b4;
}
.dialogCancel {
  width: 45%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  font-size: 16px;
  color: #d6d6d6;
  border: 1px solid #d6d6d6;
}
.dialogCancel:hover {
  background-color: #e7e6e6;
  color: #ffffff;
}
/* 样式定义 */
</style>
