<template>
  <div>
    <div class="recordList_title">
      <span style="margin-left: 15px; font-size: 16px; font-weight: bold">检测记录</span>
      <a-button type="primary" style="margin-right: 15px" @click="openIsNewBuildStatus">
        <PlusOutlined />新建检测
      </a-button>
    </div>
    <div class="recordList_filter">
      <div class="recordList_filter_row1">
        <a-range-picker v-model:value="rangePickerValue" />
        <SearchOutlined
          class="SearchOutlined"
          :style="{
            color: showSearch ? '#2D8CF0' : '#ffffff',
          }"
          @click="inputSearchValue ? '' : (showSearch = !showSearch)"
        />
      </div>
      <div class="recordList_filter_row2" v-if="showSearch">
        <a-input
          v-model:value="inputSearchValue"
          allow-clear
          placeholder="按检测名称搜索"
          style="width: 90%"
        >
          <template #suffix>
            <SearchOutlined class="SearchOutlined" @click="searchFilter" />
          </template>
        </a-input>
      </div>
    </div>
    <div class="recordList_dropdown">
      <a-dropdown>
        <a class="recordList_dropdown_showtitle" @click.prevent>
          {{ dropdownSelect }}
          <CaretDownOutlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a @click="dropdownSelect = '所有航点航线'">所有航点航线</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="dropdownSelect = '巡检航点航线'">巡检航点航线</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <div class="recordList_list" :style="{ height: showSearch ? '688px' : '720px' }">
      <div
        v-for="record in props.recordList"
        :key="record.id"
        class="record"
        :style="{
          outline: record.id == props.nowRecord.id ? '2px solid #2773c3' : '',
        }"
      >
        <div class="record_title">
          <div>{{ record.name }}</div>
          <div>
            <a-tooltip placement="top">
              <template #title>
                <span>查看</span>
              </template>
              <RightSquareOutlined
                style="font-size: 16px; margin-right: 10px"
                @click="chooseNowRecord(record)"
              />
            </a-tooltip>
            <a-tooltip placement="top">
              <template #title>
                <span>编辑</span>
              </template>
              <DashOutlined style="font-size: 16px" />
            </a-tooltip>
          </div>
        </div>
        <div class="record_tag">
          <a-tag color="gray">变化区域{{ record.changeRegion }}</a-tag>
        </div>
        <div class="record_duibi">
          <div class="point" style="background: #2773c3" />{{ record.createtime1 }}
        </div>
        <div class="record_duibi">
          <div class="point" style="background: #cb8824" />{{ record.createtime2 }}
        </div>
        <div class="record_time">
          <ClockCircleOutlined style="margin-right: 5px" />{{ record.time }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import {
    SearchOutlined,
    PlusOutlined,
    CaretDownOutlined,
    RightSquareOutlined,
    DashOutlined,
    ClockCircleOutlined,
  } from '@ant-design/icons-vue';

  const props = defineProps(['recordList', 'nowRecord']);
  const emit = defineEmits(['chooseNowRecord', 'openIsNewBuildStatus']);

  const showSearch = ref(false);
  const dropdownSelect = ref('所有航点航线');

  // 日期范围
  const rangePickerValue = ref([]);
  // 查询框
  const inputSearchValue = ref('');
  function searchFilter() {
    console.log(123);
  }

  // 选择当前记录
  function chooseNowRecord(value) {
    emit('chooseNowRecord', value);
  }
  // 新建新的检测记录
  function openIsNewBuildStatus() {
    emit('openIsNewBuildStatus');
  }
</script>
<style lang="less" scoped>
  // 标题
  .recordList_title {
    position: relative;
    top: 0px;
    left: 0px;
    color: #ffffff;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #ffffff55;
    display: flex;
    align-items: center;
    //   justify-content: flex-start;
    justify-content: space-between;
  }

  // 查询
  .recordList_filter {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;

    .recordList_filter_row1 {
      display: flex;
      align-items: center;
      justify-content: center;

      .SearchOutlined {
        color: #ffffff;
        font-size: 22px;
        margin-left: 12px;
      }
    }

    .recordList_filter_row2 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
  }
  // 下拉框
  .recordList_dropdown {
    position: relative;
    top: 0px;
    left: 0px;

    .recordList_dropdown_showtitle {
      color: #ffffff;
      margin-left: 18px;
    }
  }
  // 列表
  .recordList_list {
    overflow-y: auto;
    position: relative;
    top: 0px;
    left: 0px;
    // height: 705px;
    width: 100%;
    display: block;
    gap: 5px;

    .record {
      position: relative;
      background: #3c3c3c;
      width: 90%;
      height: auto;
      margin: 10px 20px 10px 20px;
      display: block;
      border-radius: 5px;
      padding: 5px 10px 5px 10px;

      .record_title {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: space-between;
      }

      .record_tag {
        margin-top: 5px;
        margin-bottom: 5px;
      }

      .record_duibi {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        color: gray;
        // height: 15px;
        width: 90%;

        .point {
          width: 12px;
          height: 12px;
          border-radius: 12px;
          margin-right: 5px;
        }
      }

      .record_time {
        color: gray;
      }
    }
  }
  // 滑动条隐藏
  .recordList_list::-webkit-scrollbar {
    display: none;
  }
  .recordList_list {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
</style>
