<template>
  <div>
    <el-dialog title="新增二级类目" v-model="dialogVisible">
      <div>
        <el-button type="primary" @click="handleAdd" class="mb-3"
          >新增二级类目</el-button
        >
        <el-table
          ref="multipleTable"
          :data="state.list"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
          <el-table-column prop="categoryName" label="分类名称">
          </el-table-column>
          <el-table-column prop="categoryRank" label="排序值" width="120">
          </el-table-column>
          <el-table-column prop="createTime" label="添加时间" width="200">
          </el-table-column>
          <el-table-column label="操作" width="350">
            <template #default="scope">
              <el-button
                type="primary"
                link
                @click="handleEdit(scope.row.categoryId)"
                >修改</el-button
              >
              <el-popconfirm
                title="确定删除吗？"
                confirmButtonText="确定"
                cancelButtonText="取消"
                @confirm="handleDeleteOne(scope.row.categoryId)"
              >
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
    <DialogAddCategory ref="addCate" :reload="getCategory" :type="state.type" />
  </div>
</template>
<script lang="ts" setup>
import DialogAddCategory from "./DialogAddCategory.vue";
import { ElMessage } from "element-plus";

import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
import { request } from "@/utils";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  id: {
    type: [Number, String]
  }
});
const emits = defineEmits(["update:show"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      if (props.id) {
        getCategory();
      }
    } else {
    }
  }
);
const state = reactive({
  list: [],
  type: "",
  loading: false
});
const addCate = ref(null);
// 修改分类
const handleEdit = id => {
  state.type = "edit";
  addCate.value.open(id, true);
};
// 添加分类
const handleAdd = () => {
  state.type = "add";
  addCate.value.open(props.id, true);
};

// 单个删除
const handleDeleteOne = id => {
  request
    .delete("/mallService/mechanism/category", {
      ids: [id]
    })
    .then(() => {
      ElMessage.success("删除成功");
      getCategory();
    });
};
// 获取分类列表
const getCategory = () => {
  state.loading = true;
  request
    .get("/mallService/mechanism/category", {
      params: {
        pageSize: 9999,
        parentId: props.id
      }
    })
    .then(res => {
      state.list = res.data.list;
      state.loading = false;
    });
};
</script>
