<template>
  <div class="ship-type-box" id="ship-type-box">
    <!-- 筛选搜索按钮 -->
    <div class="filter-btn" @click="toggleFilter">
      <!-- {{ isShowFilter ? '−' : '+' }} -->
      <img v-if="isShowFilter" src="@/util/map/img/search-fold.png" alt="筛选搜索" />
      <img v-else src="@/util/map/img/search-ex.png" alt="筛选搜索" />
    </div>

    <!-- 筛选搜索弹窗 -->
    <div v-if="isShowFilter" class="filter-popup">
      <div class="filter-item">
        <!-- 船舶图例 -->
        <div class="legend-circle ship-legend"></div>
        <div class="filter-title">{{ language === 'zh' ? '船舶' : 'Ship' }}</div>
        <el-checkbox v-model="checkedTypes.ship" @change="handleTypeChange('ship')">
        </el-checkbox>
        <el-select
          v-model="searchValues.ship"
          :placeholder="language === 'zh' ? '搜索船名/MMSI' : 'Search Ship Name'"
          :disabled="!checkedTypes.ship"
          filterable
          clearable
          remote
          :remote-method="handleShipSearch"
          :loading="false"
          @change="handleShipSelect"
          class="ship-select"
          no-match-text="没有匹配结果"
        >
          <el-option
            v-for="ship in shipOptions"
            :key="ship.shipId"
            :label="`${ship.shipnameEn || '未知船名'} (${ship.mmsi})`"
            :value="ship.shipnameEn || ship.mmsi"
          >
            <div class="ship-option-content">
              <div class="ship-name">{{ ship.shipnameEn || '未知船名' }}</div>
              <div class="ship-mmsi">MMSI: {{ ship.mmsi }}</div>
            </div>
          </el-option>
        </el-select>
      </div>
      <div class="filter-item">
        <!-- 车辆图例 -->
        <div class="legend-car">
          <img src="/zero2/img/car.svg" alt="车辆" class="car-icon">
        </div>
        <div class="filter-title"> {{ language === 'zh' ? '车辆' : 'Car' }}</div>
        <el-checkbox v-model="checkedTypes.car" @change="handleTypeChange('car')">
        </el-checkbox>
        <el-select
          style="width: 300px"
          v-model="searchValues.car"
          :placeholder="language === 'zh' ? '搜索车牌号' : 'Search Car Number'"
          :disabled="!checkedTypes.car"
          filterable
          clearable
          no-match-text="请输入车牌号，超过4位才搜索"
          remote
          :remote-method="handleCarSearch"
          :loading="false"
          @change="handleCarSelect"
          class="car-select"
        >
          <el-option
            v-for="car in carOptions"
            :key="car.carNum"
            :label="car.carNum"
            :value="car.carNum"
          >
            <div class="car-option-content">
              <div class="car-num">{{ car.carNum }}</div>
              <div class="car-company">{{ car.companyName || '' }}</div>
            </div>
          </el-option>
        </el-select>
      </div>
      <div class="filter-item">
        <!-- 游艇图例 -->
        <div class="legend-circle yacht-legend"></div>
        <div class="filter-title"> {{ language === 'zh' ? '游艇' : 'Yacht' }}</div>
        <el-checkbox v-model="checkedTypes.yacht" @change="handleTypeChange('yacht')">
          <!-- {{ language === 'zh' ? '游艇' : 'Yacht' }} -->
        </el-checkbox>
        <el-select
          v-model="searchValues.yacht"
          :placeholder="language === 'zh' ? '搜索游艇名/MMSI' : 'Search Yacht Name/MMSI'"
          :disabled="!checkedTypes.yacht"
          filterable
          clearable
          remote
          :remote-method="handleYachtSearch"
          :loading="false"
          @change="handleYachtSelect"
          class="yacht-select"
          no-match-text="没有匹配结果"
        >
          <el-option
            v-for="yacht in yachtOptions"
            :key="yacht.shipId"
            :label="`${yacht.shipnameEn || '未知游艇'} (${yacht.mmsi})`"
            :value="yacht.shipnameEn || yacht.mmsi"
          >
            <div class="ship-option-content">
              <div class="ship-name">{{ yacht.shipnameEn || '未知游艇' }}</div>
              <div class="ship-mmsi">MMSI: {{ yacht.mmsi }}</div>
            </div>
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator'
import bus from '@/util/bus'
import storeUtil from '@/util/store'

@Component({})
export default class MapBottomShipType extends Vue {
  private language = window.localStorage.getItem('language')
  private isShowFilter = false

  // 接收父组件传递的车辆数据
  @Prop({
    type: Array,
    default: () => []
  })
  private carData!: any[]

  // 接收父组件传递的船舶数据
  @Prop({
    type: Array,
    default: () => []
  })
  private shipData!: any[]

  // 勾选状态
  private checkedTypes: { [key: string]: boolean } = {
    ship: true,
    car: true,
    yacht: true
  }

  // 搜索值
  private searchValues: { [key: string]: string } = {
    ship: '',
    car: '',
    yacht: ''
  }

  // 车辆搜索选项
  private carOptions: any[] = []

  // 船舶搜索选项
  private shipOptions: any[] = []

  // 游艇搜索选项
  private yachtOptions: any[] = []
  // 控制车辆下拉框是否显示
  private carSelectVisible = false

  // 切换筛选弹窗显示状态
  private toggleFilter() {
    this.isShowFilter = !this.isShowFilter
  }

  // 处理类型勾选变化
  private handleTypeChange(type: string) {
    const isChecked = this.checkedTypes[type]

    // 取消勾选时，清空并禁用搜索框
    if (!isChecked) {
      this.searchValues[type] = ''
      // 触发搜索，清空结果
      this.handleSearch(type)
      // 如果有打开的弹窗或轨迹，重置地图
      this.resetMap()
    }

    // 触发全局事件，通知地图更新显示
    bus.$emit('filterTypeChange', {
      type,
      isChecked
    })

  }

  // 处理搜索
  private handleSearch(type: string) {
    const value = this.searchValues[type]

    // 车牌号需要超过4位才搜索
    if (type === 'car' && value.length < 4) {
      return
    }

    // 触发全局事件，通知地图更新搜索结果
    bus.$emit('filterSearch', {
      type,
      value
    })
  }

  // 处理车辆搜索 - 当输入超过4位时触发
  private handleCarSearch(query: string) {
    // 车牌号需要超过4位才搜索
    if (query.length < 4) {
      this.carOptions = []
      return
    }

    // 模糊搜索车辆数据
    this.carOptions = this.carData.filter((car: any) => {
      const carNum = car.carNum || ''
      return carNum.includes(query)
    })
  }

  // 处理车辆选择
  private handleCarSelect(value: string) {
    // 触发搜索事件，更新地图显示
    this.handleSearch('car')
  }

  // 处理船舶搜索
  private handleShipSearch(query: string) {
    // 过滤出船舶数据（shipTypeName !== '其他'）
    const shipData = this.shipData.filter((ship: any) => {
      return ship.shipTypeName !== '其他'
    })
    // 模糊搜索船舶数据（匹配船名）
    this.shipOptions = shipData.filter((ship: any) => {
      const shipName = ship.shipnameEn || ''
      const mmsi = ship.mmsi || ''
      return shipName.toLowerCase().includes(query.toLowerCase()) || mmsi.includes(query)
    })
  }

  // 处理船舶选择
  private handleShipSelect(value: string) {
    // 触发搜索事件，更新地图显示
    this.handleSearch('ship')
  }

  // 处理游艇搜索
  private handleYachtSearch(query: string) {
    // 过滤出游艇数据（shipTypeName === '其他'）
    const yachtData = this.shipData.filter((ship: any) => {
      return ship.shipTypeName === '其他'
    })
    // 模糊搜索游艇数据（匹配船名或MMSI）
    this.yachtOptions = yachtData.filter((yacht: any) => {
      const shipName = yacht.shipnameEn || ''
      const mmsi = yacht.mmsi || ''
      return shipName.toLowerCase().includes(query.toLowerCase()) || mmsi.includes(query)
    })
  }

  // 处理游艇选择
  private handleYachtSelect(value: string) {
    // 触发搜索事件，更新地图显示
    this.handleSearch('yacht')
  }

  // 重置地图
  private resetMap() {
    const mapFun = storeUtil.getMapFun()
    const mapInstance = storeUtil.getMapInstance()

    if (mapFun && mapInstance) {
      // 这里需要根据实际情况调用地图工具的方法来重置地图
      // 例如关闭弹窗、擦除轨迹、取消聚焦等
      console.log('重置地图')
    }
  }

  public mounted() {
    window.addEventListener('setItemEvent', (e: any) => {
      if (e.key === 'language') {
        this.language = e.newValue
      }
    })
  }
}
</script>

<style scoped lang="scss">
.ship-type-box {
  position: absolute;
  display: flex;
  align-items: center;
  height: 2.5rem;
  z-index: 999;
  left: 1.1rem;
  bottom: 3.8rem;
  border-radius: 0.25rem;
  color: #333333;
}

.filter-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  color: white;
  border-radius: 0.25rem;
  transition: all 0.3s;
}
.filter-title{
  color: #2c469b;
  margin-right: 0.5rem;
  font-weight: 600;
}

/* 图例样式 */
.legend-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 0.6rem;
  margin-left: .14rem;
  flex-shrink: 0;
}

/* 船舶图例 - 黄色圆形 */
.ship-legend {
  background-color: rgb(180, 39, 74);
}

/* 游艇图例 - 红色圆形 */
.yacht-legend {
  background-color: rgb(255, 188, 67);
}

/* 船舶选项样式 */
.ship-option-content {
  display: flex;
}

.ship-name {
  font-weight: 600;
  margin-bottom: 4px;
  margin-right: 0.5rem;
}

.ship-mmsi {
  font-size: 12px;
  color: #666;
}

/* 车辆图例 */
.legend-car {
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.car-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.filter-popup {
  position: absolute;
  bottom: 3rem;
  left: 0;
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: 25rem;
  z-index: 1000;
}

.filter-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;

  &:last-child {
    margin-bottom: 0;
  }

  .el-checkbox {
    margin-right: 1rem;
    font-size: 0.875rem;
  }
  .el-select {
    flex: 1;
  }
  .ship-select, .yacht-select {
    flex: 1;
  }
  .el-input {
    flex: 1;
    ::v-deep .el-input__inner {
      height: 2rem;
      font-size: 0.875rem;
    }
  }
}
</style>
