<template>
  <div class="p-4" style="height: 100%">
    <div v-if="showTable">
      <div class="toolbar-box">
        <div class="search-box">
          <span class="search-item">
            单位名称
            <a-select style="width: 120px" placeholder="请选择">
              <a-select-option v-for="typeItem in typeOption" :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="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="nameItem in nameOption" :value="nameItem" :key="nameItem">
                {{ nameItem }}
              </a-select-option>
            </a-select>
          </span>
          <div class="btn-box">
            <a-button @click="handleReset">重置</a-button>
            <a-button type="primary" @click="search">查询</a-button>
          </div>
        </div>
        <div class="action-box">
          <a-button @click="handleAdd" style="background-color: rgb(0, 128, 255)">新增</a-button>
          <a-button @click="handleEdict" style="background-color: rgb(102, 178, 255)"
            >编辑</a-button
          >
          <a-button @click="handelDelete" style="background-color: rgb(29, 149, 63)">删除</a-button>
          <a-button @click="inputData" style="background-color: rgb(235, 213, 0)"
            >批量导入</a-button
          >
          <a-button @click="outputData" style="color: black">批量导出</a-button>
        </div>
      </div>
      <BasicTable :rowSelection="{ type: 'checkbox' }" style="flex: auto" @register="registerTable">
        <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: handleEdict.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
    <AddRescueTeamModal
      :isEdict="isEdict"
      style="width: 100%; height: 100%"
      @getShowTable="getShowTable"
      v-if="!showTable"
    />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { rescueTeamColums } from './rescueTeam.data';
  import { ref } from 'vue';
  // import { useModal } from '/@/components/Modal';
  import AddRescueTeamModal from './addRescueTeamModal.vue';
  import { getTableList } from '../../../api/emergencyLinkage/dangerSourceApi';
  // 查询的关键字
  const typeOption = ref(null as any); //危险源类型选项
  const areaBelongsOption = ref(null as any); //所属区域选项
  const nameOption = ref(null as any); //危险源名称选项
  const isEdict = ref<Boolean>(false) as any; // 区分点击的是编辑还是添加
  const showTable = ref<Boolean>(true) as any;

  const [registerTable] = useTable({
    title: '',
    api: getTableList, // 加载数据
    columns: rescueTeamColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  /**
   * 查询
   */
  function search() {}
  /**
   * 重置
   */
  function handleReset() {}
  /**
   * 添加
   */
  function handleAdd() {
    isEdict.value = false;
    showTable.value = false;
  }
  /**
   * 删除
   */
  function handelDelete() {}
  /**
   * 批量导入
   */
  function inputData() {}
  /**
   * 批量导出
   */
  function outputData() {}
  /**
   * 点击详情
   */
  function handleItem() {}
  /**
   * 点击编辑
   */
  function handleEdict() {
    isEdict.value = true;
    showTable.value = false;
  }
  function getShowTable(param) {
    console.log(param);

    showTable.value = param;
  }
</script>
<style lang="less" scoped>
  .toolbar-box {
    width: 100%;
    margin: 10px 0;
    position: relative;

    .search-box {
      padding: 10px 0;
      display: flex;
      background-color: white;

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

      .btn-box {
        display: inline-block;
        margin-left: 60px;

        :deep(.ant-btn) {
          margin: 0 10px;
        }
      }
    }

    .action-box {
      margin: 10px 0;

      :deep(.ant-btn) {
        margin: 0 10px;
        height: 40px;
        color: white;
        border-radius: 5px;
      }
    }
  }
</style>
