<template>
  <div>
    <div class="p-4">
      <BasicTable :rowSelection="{ type: 'checkbox' }" style="flex: auto" @register="registerTable">
        <template #toolbar>
          <div class="toolbar-box">
            <div class="search-box">
              <span class="search-item">
                关键字
                <a-input-search placeholder="请输入关键字" style="width: 200px" />
              </span>
              <span class="search-item">
                事件类型
                <a-select style="width: 120px" placeholder="请选择">
                  <a-select-option
                    v-for="typeItem in eventTypeOption"
                    :value="typeItem"
                    :key="typeItem"
                  >
                    {{ typeItem }}
                  </a-select-option>
                </a-select>
              </span>
              <span class="search-item">
                事件级别
                <a-select style="width: 120px" placeholder="请选择">
                  <a-select-option
                    v-for="levelItem in eventLevelOption"
                    :value="levelItem"
                    :key="levelItem"
                  >
                    {{ levelItem }}
                  </a-select-option>
                </a-select>
              </span>
              <span class="search-item">
                所属领域
                <a-select style="width: 120px" placeholder="请选择">
                  <a-select-option
                    v-for="areaItem in areaBelongsOption"
                    :value="areaItem"
                    :key="areaItem"
                  >
                    {{ areaItem }}
                  </a-select-option>
                </a-select>
              </span>
              <span class="search-item">
                所属行业
                <a-select style="width: 120px" placeholder="请选择">
                  <a-select-option
                    v-for="industryItem in industryBelongsOption"
                    :value="industryItem"
                    :key="industryItem"
                  >
                    {{ industryItem }}
                  </a-select-option>
                </a-select>
              </span>
              <a-button type="primary" @click="search" class="search-item">
                <SearchOutlined />
                查询
              </a-button>
            </div>
            <div class="btn-box">
              <a-button type="primary" @click="add"><PlusOutlined />添加</a-button>
              <a-button type="primary" color="error"><DeleteOutlined />删除</a-button>
            </div>
          </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>
    <EventCorrelationEdictModal @register="registerModal" :isEdict="isEdict" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { eventCorrelationColums } from './eventCorrelation.data';
  import { PlusOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
  import { ref } from 'vue';
  import { useModal } from '/@/components/Modal';
  import EventCorrelationEdictModal from './eventCorrelationEdictModal.vue';
  // 查询的关键字
  const eventTypeOption = ref(null as any); //事件类型选项
  const eventLevelOption = ref(null as any); //事件等级选项
  const areaBelongsOption = ref(null as any); //所属区域选项
  const industryBelongsOption = ref(null as any); //所属行业选项
  const isEdict = ref<Boolean>(false) as any; // 区分点击的是编辑还是添加

  const [registerTable] = useTable({
    title: '',
    columns: eventCorrelationColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
  });
  const [registerModal, { openModal }] = useModal();

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

    .search-item {
      margin: 0 10px;
    }

    .btn-box {
      position: absolute;
      right: 0;

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