<template>
  <div>
    <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.category"
              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-card style="margin-top: 8px">
      <base-table
        :option="tableOption"
        ref="table"
        style="width: 100%"
        :tree-props="{ children: 'children' }"
        row-key="id"
        :indent="30"
        :showPagination="false"
        @addConfim="addConfim"
        @editConfim="editConfim">
        <template #colunm>
          <el-table-column prop="name" label="服务分类名称" />
          <el-table-column prop="remark" label="备注" align="center" />
          <el-table-column
            #default="{ row }"
            label="操作"
            align="center"
            fixed="right"
            width="250">
            <!-- <el-button size="small" type="primary" @click="examine(row)"
              >查看</el-button
            > -->
            <el-button size="small" type="warning" @click="update(row)"
              >修改</el-button
            >
            <el-button size="small" type="danger" @click="deleteData(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"
            v-model="currentServiceItem"
            v-if="
              pageVisibleState.showPageType.edit ||
              pageVisibleState.showPageType.add
            "></addOrEdit>
          <serviceItemView
            v-if="pageVisibleState.showPageType.view"
            v-model="currentServiceItem"></serviceItemView>
        </template>
      </base-curd-dialog>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { resetParams } from "@/util/globalMethods";
import addOrEdit from "./page/addOrEdit.vue";
import serviceItemView from "./page/view.vue";
import pageVisible from "@/components/curdDialog/pageVisibleState";

import api from "@/lib/request";
import { tableOptionType } from "@/types/table";

const pageVisibleState = new pageVisible({
  add: "新增服务项目",
  edit: "服务项目编辑",
  view: "服务项目查看",
});
const searchForm = reactive({
  name: "",
  category: 0,
});

let currentServiceItem = ref<ServiceItemType>({
  name: "",
  remark: "",
  parentId: 0,
});

watch(
  () => pageVisibleState.show2LevelPage,
  (newVal) => {
    if (newVal.value === false) {
      resetServiceItem();
    }
  },
  {
    deep: true,
  }
);

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

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

function examine(row: ServiceItemType) {
  currentServiceItem.value = row;
  pageVisibleState.show2LevelPage.value = true;
  pageVisibleState.showPageType.view = true;
}
function update(row: ServiceItemType) {
  currentServiceItem.value = { ...row };
  pageVisibleState.show2LevelPage.value = true;
  pageVisibleState.showPageType.edit = true;
}
async function deleteData(row: ServiceItemType) {
  await ElMessageBox.confirm("确定要删除该服务分类吗？", {
    type: "error",
  });
  let respone = await api().get("/service-category/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;
}
async function addConfim() {
  await ElMessageBox.confirm("确定新增该分类吗？", "提示", {
    type: "warning",
  });
  let res = await api().post("/service-category/add", currentServiceItem.value);
  if (res.code === 200) {
    ElMessage.success("添加成功");
    pageVisibleState.show2LevelPage.value = false;
    table.value.methods.setDataType("list");
  } else {
    ElMessage.error(res.msg);
  }
}

async function editConfim() {
  ElMessageBox.confirm("确认修改该条信息吗？", "提示", {
    type: "warning",
  }).then(async () => {
    let respone = await api().post(
      "/service-category/update",
      currentServiceItem.value
    );
    if (respone.code == 200) {
      ElMessage.success("修改成功！");
      pageVisibleState.show2LevelPage.value = false;
      table.value.methods.setDataType("list");
    } else {
      ElMessage.error(respone.msg);
    }
  });
}

function resetServiceItem() {
  currentServiceItem.value = {
    name: "",
    quantity: 0,
    category: 0,
    unit: "",
    price: 0,
    remark: "",
  };
}
</script>
<style lang="scss" scoped></style>
