<template>
  <div class="containe">
    <div class="tableWrap">
      <div class="titleWrap">
        <span class="title"></span>
        <a-button type="primary" @click="handleAdd" v-if="hasPermission('AUTH_PRODUCT_GOODS_CATEGORY:ADD')"
          >新增</a-button
        >
      </div>
      <a-table :columns="columns" :data-source="data" :pagination="false" :loading="tableLoading" rowKey="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <span v-if="record.status === 'YES'"><a-tag color="green">启用</a-tag></span>
            <span v-else><a-tag color="red">禁用</a-tag></span>
          </template>
          <template v-if="column.key === 'action'">
            <a-button
              type="link"
              @click="handleEdit(record.id)"
              v-if="hasPermission('AUTH_PRODUCT_GOODS_CATEGORY:EDIT')"
              >编辑</a-button
            >
            <a-button type="link" v-if="record.status === 'YES'" @click="handleChangeStatus(record.id, 'NO')"
              >禁用</a-button
            >
            <a-button type="link" v-else @click="handleChangeStatus(record.id, 'YES')">启用</a-button>
            <a-button type="link" v-if="record.level === 5" @click="handleAddGoods(record)">添加商品</a-button>
            <a-popconfirm
              title="是否确认删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleDelete(record.id)"
              v-if="hasPermission('AUTH_PRODUCT_GOODS_CATEGORY:DELETE')"
            >
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
    <Modal ref="modalRef" @handleSuccess="getTreeData" v-model:editId="editId"></Modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import Modal from './modal.vue';
  import * as GoodsCategoryApi from '/@/api/product/goodsCategoryApi';
  import { DataItem } from './type';
  import { columns } from './schema';
  import { message } from 'ant-design-vue';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useGo } from '/@/hooks/web/usePage';

  const { hasPermission } = usePermission();
  const modalRef = ref();
  const data = ref<DataItem[]>([]);
  const tableLoading = ref(false);
  const editId = ref<undefined | number>();
  const go = useGo();

  // 获取树结构
  const getTreeData = () => {
    tableLoading.value = true;
    GoodsCategoryApi.tree({ parentId: 0 })
      .then((res: DataItem[]) => {
        data.value = res;
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };

  const handleAdd = () => {
    modalRef.value.visible = true;
  };

  const handleDelete = (id: number) => {
    GoodsCategoryApi.remove(id).then(() => {
      message.success('删除成功');
      getTreeData();
    });
  };

  const handleEdit = (id: number) => {
    modalRef.value.visible = true;
    editId.value = id;
  };

  const handleChangeStatus = (id: number, status: string) => {
    GoodsCategoryApi.update({ id, status }).then(() => {
      message.success('设置成功');
      getTreeData();
    });
  };

  const handleAddGoods = (record) => {
    go('/main/goods-add' + `?classify=${record.id}`);
  };

  onMounted(() => {
    getTreeData();
  });
</script>

<style lang="less" scoped>
  @import url('/@/style/index.less');
</style>
