<template>
  <div>
    <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"><SearchOutlined />查询</a-button>
              <a-button type="primary" @click="add"><PlusOutlined />添加</a-button>
              <a-button type="primary" color="error"><DeleteOutlined />删除</a-button>
              <a-button type="primary" @click="bindDevice">绑定设备</a-button>
              <a-button type="primary" @click="unbindeDevice">解绑设备</a-button>
            </div>
            <div class="right-button">
              <a-button type="primary">导入</a-button>
              <a-button type="primary">导出</a-button>
            </div>
          </div>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '详情',
                onClick: handleItem.bind(null, record),
              },
              {
                label: '编辑',
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  confirm: () => {},
                },
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
    <component :is="modal" @register="registerModal" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { indicatorsColums } from './indicators.data';
  import { useModal } from '/@/components/Modal';
  import AddIndicatorsModal from './addIndicatorsModal.vue';
  import BindDeviceModal from './bindDeviceModal.vue';
  import { ref, markRaw, nextTick } from 'vue';
  import { PlusOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
  // import { Popconfirm } from 'ant-design-vue';

  const modal = ref(null as any);
  const openPopConfirm = ref(false);
  const [registerTable] = useTable({
    title: '',
    columns: indicatorsColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
  });
  const [registerModal, { openModal }] = useModal();

  // const { handleDeleteOrBatchDelete } = useBatchDelete();
  /**
   * 添加
   */
  function add() {
    modal.value = markRaw(AddIndicatorsModal);
    nextTick(() => {
      openModal();
    });
  }
  /**
   * 点击详情
   */
  function handleItem() {}
  /**
   * 点击编辑
   */
  function handleEdit() {}

  /**
   * 绑定设备
   */
  function bindDevice() {
    modal.value = markRaw(BindDeviceModal);
    nextTick(() => {
      openModal();
    });
  }
  function unbindeDevice() {
    openPopConfirm.value = true;
  }
</script>
<style lang="less" scoped>
  .toolbar-box {
    width: 100%;
    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>
