<template>
  <div class="container">
    <div class="tableWrap">
      <div class="titleWrap">
        <span class="title"></span>
        <a-button type="primary" @click="handleAdd">新增</a-button>
      </div>
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link">编辑</a-button>
            <a-button type="link">禁用</a-button>
            <a-button type="link">添加商品</a-button>
            <a-button type="link">添加节点</a-button>
            <a-button type="link">删除</a-button>
          </template>
        </template>
      </a-table>
    </div>
    <Modal ref="modalRef"></Modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Modal from './modal.vue';
  import * as GoodsCategoryApi from '/@/api/product/goodsCategoryApi';

  const modalRef = ref();
  const columns = [
    {
      title: '分类名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '排序',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '层级',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
    },
    {
      title: '操作',
      key: 'action',
    },
  ];

  interface DataItem {
    key: number;
    name: string;
    age: number;
    address: string;
    children?: DataItem[];
  }

  const data = ref<DataItem[]>([
    {
      key: 1,
      name: 'John Brown sr.',
      age: 60,
      address: 'New York No. 1 Lake Park',
      children: [
        {
          key: 11,
          name: 'John Brown',
          age: 42,
          address: 'New York No. 2 Lake Park',
        },
      ],
    },
  ]);

  const getData = () => {
    GoodsCategoryApi.tree().then((res) => {
      console.log(res);
    });
  };
  const handleAdd = () => {
    modalRef.value.visible = true;
  };
</script>

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