<template>
  <div class="p-4" style="height: 100%">
    <div class="toolbar-box">
      <div class="search-box">
        <span class="search-item">
          站点名称
          <a-Input
            style="width: 240px"
            placeholder="支持监测点名称、地址"
            v-model="searchItem.name"
          />
        </span>
        <span class="search-item">
          站点地址
          <a-Input style="width: 240px" placeholder="请输入站点地址" v-model="searchItem.address" />
        </span>
        <span class="search-item">
          出厂编码
          <a-Input
            style="width: 240px"
            placeholder="请输入出厂编码"
            v-model="searchItem.outputCode"
          />
        </span>
        <span class="search-item">
          设备类型
          <a-select
            style="width: 240px"
            placeholder="请选择设备类型"
            v-model="searchItem.deviceType"
          >
            <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: 240px"
            placeholder="请选择排水分区"
            v-model="searchItem.widgetArea"
          >
            <a-select-option v-for="areaItem in areaOption" :value="areaItem" :key="areaItem">
              {{ areaItem }}
            </a-select-option>
          </a-select>
        </span>
        <span class="search-item">
          站点分组
          <a-select
            style="width: 240px"
            placeholder="请选择站点分组"
            v-model="searchItem.widgetGroup"
          >
            <a-select-option v-for="groupItem in groupOption" :value="groupItem" :key="groupItem">
              {{ groupItem }}
            </a-select-option>
          </a-select>
        </span>
        <!-- <div class="btn-box"> -->
        <a-button type="primary" @click="search" class="btn"><SearchOutlined />查询</a-button>
        <a-button type="primary" @click="addItem" class="btn"><PlusOutlined />添加</a-button>
        <a-button type="primary" @click="delItem" class="btn" color="error"
          ><DeleteOutlined />删除</a-button
        >
        <a-button type="primary" @click="stopItem" class="btn" color="error"
          ><MinusCircleOutlined />停用</a-button
        >
        <a-button type="primary" @click="DisassemblyItem" class="btn"
          ><ScissorOutlined />拆卸</a-button
        >
        <a-button type="primary" @click="outputItem" class="btn"
          ><VerticalAlignBottomOutlined />导出</a-button
        >
        <!-- </div> -->
      </div>
    </div>
    <BasicTable :rowSelection="{ type: 'checkbox' }" style="flex: auto" @register="registerTable">
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '修改',
              onClick: handleEdict.bind(null, record),
            },
            {
              label: '删除',
              onClick: delItem.bind(null, record),
            },
            {
              label: '配置',
              onClick: configItem.bind(null, record),
            },
            {
              label: '详情',
              onClick: handleDetail.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <component :is="modal" @register="registerModal" />
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, markRaw, nextTick } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { siteColums } from './siteManage.data';
  import { useModal } from '/@/components/Modal';
  import ConfigModal from './configModal.vue';
  import AddSiteModal from './addSiteModal.vue';
  import {
    PlusOutlined,
    DeleteOutlined,
    SearchOutlined,
    MinusCircleOutlined,
    ScissorOutlined,
    VerticalAlignBottomOutlined,
  } from '@ant-design/icons-vue';

  const modal = ref(null) as any;
  const searchItem = reactive({
    name: '',
    address: '',
    outputCode: '',
    deviceType: '',
    widgetArea: '',
    widgetGroup: '',
  });
  const typeOption = ref(null as any); //设备类型选项
  const areaOption = ref(null as any); //排水分区选项
  const groupOption = ref(null as any); //排水分组选项

  const [registerTable] = useTable({
    title: '',
    // api: '', // 加载数据
    columns: siteColums,
    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',
    },
  });
  const [registerModal, { openModal }] = useModal();

  function search() {}
  function addItem() {
    modal.value = markRaw(AddSiteModal);
    nextTick(() => {
      openModal();
    });
  }
  function delItem() {}
  function stopItem() {}
  function DisassemblyItem() {
    modal.value = markRaw(ConfigModal);
    nextTick(() => {
      openModal();
    });
  }
  function outputItem() {}
  function handleEdict() {}
  function configItem() {}
  function handleDetail() {}
</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;
        width: 320px;
        display: inline-block;
        line-height: 45px;
      }

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

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

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