<template>
  <div>
    <div class="p-4">
      <BasicTable :rowSelection="{ type: 'checkbox' }" style="flex: auto" @register="registerTable">
        <template #toolbar>
          <div class="toolbar-box">
            <a-button type="primary" @click="add"><PlusOutlined />添加</a-button>
            <a-button type="primary" color="error"><DeleteOutlined />删除</a-button>
          </div>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '详情',
                // icon: 'ant-design:appstore-add-outlined',
                onClick: handleItem.bind(null, record),
              },
              {
                label: '编辑',
                // auth: 'api:yt:dict:update',
                // icon: 'clarity:note-edit-line',
                onClick: handleEdit.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
    <AddEventTypeModal @register="registerModal" :isEdict="isEdict" v-if="!isDetail" />
    <EventTypeDetailModal @register="registerModal" :data="data" v-if="isDetail" />
    <!-- <Popconfirm v-if="popConfirm">确认删除数据？</Popconfirm> -->
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { eventTypeColums } from './eventType.data';
  import { useModal } from '/@/components/Modal';
  import { ref } from 'vue';
  import AddEventTypeModal from './addEventTypeModal.vue';
  import EventTypeDetailModal from './eventTypeDetailModal.vue';
  // import { Popconfirm } from 'ant-design-vue';

  const isDetail = ref<Boolean>(false) as any; //是否点击详情
  const isEdict = ref<Boolean>(false) as any; //判断是新增还是编辑
  const data = ref<Object>(null as any); //详情数据
  // const popConfirm = ref(false); //确认删除弹窗
  // const isDel=ref(false);// 删除数据？
  const [registerTable] = useTable({
    title: '',
    columns: eventTypeColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
  });
  const [registerModal, { openModal }] = useModal();

  /**
   * 添加
   */
  function add() {
    openModal();
    isDetail.value = false;
    isEdict.value = false;
  }
  /**
   * 点击详情
   */
  function handleItem(record: any) {
    data.value = record;
    isDetail.value = true;
    openModal();
  }
  /**
   * 点击编辑
   */
  function handleEdit() {
    isDetail.value = false;
    isEdict.value = true;
    openModal();
  }
</script>
<style lang="less" scoped>
  .toolbar-box {
    width: 100%;
    // height: 50px;
    // line-height: 50px;
    display: flex;
    background-color: white;
    margin: 10px 0;
    position: relative;

    :deep(.ant-btn) {
      margin: 0 10px;
    }
  }
</style>
