<template>
  <div class="modalChooseObjectDiv">
    <div class="modalChooseObject_title">选择检测对象</div>
    <div class="modalChooseObject_select">
      <div class="modalChooseObject_select_title">第 1 步：选择航线</div>
      <div class="modalChooseObject_select_">
        <a-select
          v-model:value="value"
          style="width: 200px"
          :options="hangxianOptions"
          placeholder="选择航线"
        ></a-select>
      </div>
    </div>
    <div class="modalChooseObject_choose">
      <div class="modalChooseObject_choose_title">第 2 步：选择文件</div>
      <div class="modalChooseObject_choose_show">
        <div class="modalChooseObject_choose_showDiv">
          <div class="modalChooseObject_choose_showname">
            <span style="font-weight: bold; font-size: 16px">视窗1</span>
            <span style="color: #dcdee1; margin-left: 10px; margin-right: 10px">|</span>
            <a-input
              v-model:value="inputSearchValue"
              allow-clear
              placeholder="搜索文件夹名称"
              style="width: 300px"
            >
              <template #suffix>
                <SearchOutlined class="SearchOutlined" @click="searchFilter" />
              </template>
            </a-input>
          </div>
          <div class="modalChooseObject_choose_table">
            <a-table
              :columns="columns"
              :data-source="data1"
              :pagination="false"
              :scroll="{ x: 600, y: 325 }"
            />
            <div class="table_null_1" v-if="data1.length == 0">
              <div style="display: flex; align-items: center; justify-content: center">
                <LaptopOutlined style="font-size: 60px; color: gray" />
              </div>
              <div style="display: flex; align-items: center; justify-content: center; color: gray">
                暂无数据
              </div>
            </div>
          </div>
        </div>

        <div class="modalChooseObject_choose_showDiv">
          <div class="modalChooseObject_choose_showname"> 视窗2 </div>
          <div class="modalChooseObject_choose_table">
            <a-table
              :columns="columns"
              :data-source="data2"
              :pagination="false"
              :scroll="{ x: 600, y: 325 }"
            />
            <div class="table_null_2" v-if="data2.length == 0">
              <div style="display: flex; align-items: center; justify-content: center">
                暂无可匹配内容
              </div>
              <div style="display: flex; align-items: center; justify-content: center">
                将根据视窗 1 所选内容展示匹配项
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modalChooseObject_buttons">
      <a-button @click="closeModalChooseObject">取消</a-button>
      <a-button type="primary" :disabled="true">确定</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { SearchOutlined, LaptopOutlined } from '@ant-design/icons-vue';
  import dayjs from 'dayjs';

  const props = defineProps(['']);
  const emit = defineEmits(['closeModalChooseObject']);

  function closeModalChooseObject() {
    emit('closeModalChooseObject');
  }

  const hangxianOptions = [
    {
      value: '航点航线测试',
      label: '航点航线测试',
    },
    {
      value: '新建航点航线',
      label: '新建航点航线',
    },
  ];

  const columns = [
    {
      title: '文件夹名称',
      dataIndex: 'flodername',
      width: 200,
    },
    {
      title: '创建时间',
      dataIndex: 'createtime',
      width: 100,
      sorter: {
        compare: (a, b) => {
          const timeA = dayjs(a.createtime).isValid() ? dayjs(a.createtime).valueOf() : 0;
          const timeB = dayjs(b.createtime).isValid() ? dayjs(b.createtime).valueOf() : 0;
          return timeA - timeB;
        },
        multiple: 3,
      },
    },
  ];
  const data1 = [
    // {
    //   flodername: '1',
    //   createtime: '2024-05-09 12:12:12',
    // },
    // {
    //   flodername: '12',
    //   createtime: '2025-05-09 12:12:12',
    // },
  ];
  const data2 = [];
</script>
<style lang="less" scoped>
  .modalChooseObjectDiv {
    height: 720px;
  }

  .modalChooseObject_title {
    height: 40px;
    width: 100%;
    background: #f7f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  .modalChooseObject_select {
    margin-top: 30px;
    padding-left: 40px;
    padding-right: 40px;
    display: block;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;

    .modalChooseObject_select_title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 40px;
      font-weight: bold;
      font-size: 16px;
    }

    .modalChooseObject_select_ {
      padding-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      // height: 40px;
      border-bottom: 1px solid #dcdee1;
    }
  }

  .modalChooseObject_choose {
    // margin-top: 10px;
    padding-left: 40px;
    padding-right: 40px;
    display: block;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;

    .modalChooseObject_choose_title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 40px;
      font-weight: bold;
      font-size: 16px;
    }

    .modalChooseObject_choose_show {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;

      .modalChooseObject_choose_showDiv {
        width: 48%;
        height: auto;

        .modalChooseObject_choose_showname {
          font-weight: bold;
          font-size: 16px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }

        .modalChooseObject_choose_table {
          // 页面不能被选中
          -webkit-user-select: none; /* Safari */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* IE/Edge */
          user-select: none;

          position: relative;
          margin-top: 10px;
          outline: 1px solid #dcdee1;
          width: 100%;
          height: 380px;

          .table_null_1 {
            display: block;
            position: absolute;
            top: 45%;
            left: 46%;
            z-index: 1000;
          }

          .table_null_2 {
            display: block;
            position: absolute;
            top: 50%;
            left: 35%;
            z-index: 1000;
          }
        }
      }
    }
  }

  .modalChooseObject_buttons {
    padding-right: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 94px;
    gap: 10px;
  }

  .SearchOutlined {
    font-size: 20px;
    margin-left: 12px;
  }
  ::v-deep .ant-empty {
    display: none !important;
  }
  ::v-deep .ant-table-cell {
    border-bottom: 1px solid #00000000 !important;
  }
</style>
