<template>
  <div>
    <el-row>
      <baseTableHeader
        title="菜单管理"
        @resetSearch="resetSearch"
        @search="search">
        <template #content>
          <el-form :model="searchForm" :inline="true" label-position="right">
            <el-form-item label="菜单名：">
              <el-input
                v-model="searchForm.name"
                placeholder="请输入菜单名"></el-input>
            </el-form-item>
            <el-form-item label="菜单路径：">
              <el-input
                v-model="searchForm.path"
                placeholder="请输入菜单路径"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template #operateBtns>
          <el-button type="primary" @click="add" size="small"
            ><el-icon> <CirclePlus /> </el-icon>新增</el-button
          >
        </template>
      </baseTableHeader>
    </el-row>
    <el-card style="margin-top: 8px">
      <base-table
        :option="tableOption"
        ref="table"
        style="width: 100%"
        row-key="id"
        :indent="30"
        @addConfim="addConfim"
        @editConfim="editConfim"
        :tree-props="{ children: 'children' }">
        <template #colunm>
          <el-table-column
            prop="name"
            label="菜单名"
            align="center"
            width="180" />
          <el-table-column
            prop="createDate"
            label="创建时间"
            width="180"
            align="center" />
          <el-table-column label="图标" width="180" align="center">
            <template #default="scope">
              <el-icon>
                <component :is="scope.row.icon"></component>
              </el-icon>
              <span style="padding: 0 15px">{{ scope.row.icon }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="path"
            label="路径"
            width="180"
            align="center" />
          <el-table-column label="是否显示" align="center">
            <template #default="scope">
              <el-switch
                v-model="scope.row.show"
                size="large"
                width="65px"
                inline-prompt
                active-text="是"
                inactive-text="否" />
            </template>
          </el-table-column>
          <el-table-column
            #default="scope"
            width="300"
            label="操作"
            align="center">
            <el-button size="small" type="primary" @click="examine(scope.row)"
              >查看</el-button
            >
            <el-button size="small" type="warning" @click="update(scope.row)"
              >修改</el-button
            >
            <el-button size="small" type="danger" @click="deleteData(scope.row)"
              >删除</el-button
            >
          </el-table-column>
        </template>
      </base-table>

      <base-curd-dialog
        v-model="pageVisibleState.show2LevelPage.value"
        :title="pageVisibleState.dialogTitle.value"
        width="50%"
        :before-close="handleDialogClose"
        @addConfim="addConfim"
        @editConfim="editConfim"
        @closeConfirm="handleDialogClose"
        :showPageType="pageVisibleState.showPageType">
        <template #content>
          <addOrEdit
            :executeType="pageVisibleState.executeType.value"
            :data="currentMenue"
            @updateData="getUserData"
            v-if="
              pageVisibleState.showPageType.edit ||
              pageVisibleState.showPageType.add
            "></addOrEdit>
          <menueView
            v-if="pageVisibleState.showPageType.view"
            :data="currentMenue"></menueView>
        </template>
      </base-curd-dialog>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { resetParams } from "@/util/globalMethods";
import addOrEdit from "./page/addOrEdit/addOrEdit.vue";
import menueView from "./page/view/view.vue";
import pageVisible from "@/components/curdDialog/pageVisibleState";
import { systemMenueType } from "@/types/systemMenue";
import api from "@/lib/request";
import { tableOptionType } from "@/types/table";

const pageVisibleState = new pageVisible({
  add: "新增菜单",
  edit: "菜单编辑",
  view: "菜单查看",
});
const searchForm = reactive({
  name: "",
  path: "",
});

let currentMenue = ref<systemMenueType>({});

let table = ref();
let tableOption = ref<tableOptionType>({
  url: "/system-menue/list",
  searchUrl: "/system-menue/query",
  searchParams: searchForm,
  executeType: "list",
});

function add() {
  pageVisibleState.show2LevelPage.value = true;
  pageVisibleState.showPageType.add = true;
}

function examine(row: systemMenueType) {
  currentMenue.value = row;
  pageVisibleState.show2LevelPage.value = true;
  pageVisibleState.showPageType.view = true;
}
function update(row: systemMenueType) {
  currentMenue.value = row;
  pageVisibleState.show2LevelPage.value = true;
  pageVisibleState.showPageType.edit = true;
}
async function deleteData(row: systemMenueType) {
  ElMessageBox.confirm("确定要删除该菜单吗？", "警告", {
    type: "error",
  }).then(async () => {
    let respone = await api().get("/system-menue/delete?id=" + row.id);
    if (respone.code === 200) {
      ElMessage.success("菜单删除成功！");
      table.value.methods.setDataType("list");
    } else {
      ElMessage.error(respone.msg);
    }
  });
}
function search() {
  table.value.methods.setDataType("search");
}
function resetSearch() {
  resetParams(searchForm);
  table.value.methods.setDataType("list");
  ElMessage.success("重置成功！");
}

function handleDialogClose() {
  pageVisibleState.show2LevelPage.value = false;
}
function addConfim() {
  ElMessageBox.confirm("确定新增该条信息吗？", "提示", {
    type: "warning",
  }).then(async () => {
    let res = await api().post("/system-menue/add", currentMenue.value);
    if (res.code === 200) {
      ElMessage.success("添加成功");
      pageVisibleState.show2LevelPage.value = false;
      table.value.methods.setDataType("list");
    }
  });
}
function getUserData(newVal: systemMenueType) {
  currentMenue.value = { ...newVal };
}
async function editConfim() {
  ElMessageBox.confirm("确认该条信息吗？", "提示", {
    type: "warning",
  }).then(async () => {
    let respone = await api().post("/system-menue/update", currentMenue.value);
    if (respone.code == 200) {
      ElMessage.success("修改成功！");
      pageVisibleState.show2LevelPage.value = false;
      table.value.methods.setDataType("list");
    }
  });
}
</script>
<style lang="scss" scoped></style>
