<template>
  <div class="p-4">
    <BasicTable style="flex: auto" @register="registerTable">
      <template #toolbar>
        <div class="toolbar-box">
          <div class="left-button">
            <span style="display: inline-block; white-space: nowrap; width: 250px"
              >关键字<a-input
                placeholder="请输入点位名称、视频编码、地址"
                maxLength="100"
                style="width: 200px"
            /></span>
            <a-button type="primary">查询</a-button>
            <a-button type="primary" @click="add">添加</a-button>
            <a-button type="primary" color="error">删除</a-button>
            <!-- <a-button type="primary"><a-icon type="search" />查询</a-button>
            <a-button type="primary"><a-icon type="plus" />添加</a-button>
            <a-button type="primary" color="error"><a-icon type="delete" />删除</a-button> -->
          </div>
          <div class="right-button">
            <a-button type="primary">导出</a-button>

            <!-- <a-button type="primary"><a-icon type="up-load" />导出</a-button> -->
          </div>
        </div>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              // auth: 'api:yt:dict:update',
              // icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              // auth: 'api:yt:dict:delete',
              // icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: () => {},
                // confirm: handleDeleteOrBatchDelete.bind(null, record),
              },
            },
            {
              label: '详情',
              // icon: 'ant-design:appstore-add-outlined',
              onClick: handleItem.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <VedioSiteAddModal @register="registerModal" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { vedioColums } from './vedio.data';
  // import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  import { useModal } from '/@/components/Modal';
  import VedioSiteAddModal from './vedioSiteAddModal.vue';

  const [registerTable] = useTable({
    title: '',
    columns: vedioColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
  });
  // const { handleDeleteOrBatchDelete } = useBatchDelete();
  const [registerModal, { openModal }] = useModal();
  /**
   * 添加
   */
  function add() {
    openModal();
  }

  /**
   * 点击详情
   */
  function handleItem() {}
  /**
   * 点击编辑
   */
  function handleEdit() {}
</script>
<style lang="less" scoped>
  .toolbar-box {
    width: 100%;
    // height: 50px;
    // line-height: 50px;
    display: flex;
    background-color: white;
    margin: 10px 0;
    position: relative;

    .left-button {
      position: absolute;
      left: 0;
    }

    .right-button {
      position: absolute;
      right: 0;
    }

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