<template>
  <div class="flightoperation-top">
    <div class="select-item">
      <img src="@/assets/images/flightoperation/project.png" alt="" />
      <a-select
        ref="select"
        v-model:value="selectVal.project"
        style="width: 120px"
        :options="optionsArr.projectOptions"
        placeholder="项目选择"
        @change="handleChange"
      />
    </div>
    <div class="select-item">
      <img src="@/assets/images/flightoperation/equipment.png" alt="" />
      <a-select
        ref="select"
        v-model:value="selectVal.equipment"
        style="width: 120px"
        :options="optionsArr.equipmentOptions"
        placeholder="设备选择"
        @change="handleChange"
      />
    </div>
    <div class="select-item">
      <img src="@/assets/images/flightoperation/airport.png" alt="" />
      <a-select
        ref="select"
        v-model:value="selectVal.airport"
        style="width: 120px"
        :options="optionsArr.airportOptions"
        placeholder="机场选择"
        @change="handleChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref } from 'vue';

  const emits = defineEmits(['selectChange']);
  const selectVal = reactive({
    project: null,
    equipment: null,
    airport: null,
  });
  const optionsArr = reactive({
    projectOptions: [
      {
        label: '项目1',
        value: 1,
      },
    ],
    equipmentOptions: [
      {
        label: '无人机',
        value: '1581F8HGX254V00A0BUY',
      },
    ],
    airportOptions: [
      {
        label: '机场',
        value: '8UUXN5400A079H',
      },
    ],
  });
  const handleChange = () => {
    console.log(selectVal);
    emits('selectChange', selectVal);
  };
</script>
<style lang="less" scoped>
  .flightoperation-top {
    display: flex;
    margin-top: 10px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .select-item {
    width: 160px;
    height: 38px;
    margin-left: 10px;
    background: #3a57e8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    ::v-deep .ant-select-selector {
      background: #3a57e8;
      border: none;
      color: #fff;
      .ant-select-selection-placeholder {
        color: #fff;
      }
    }
    ::v-deep .ant-select-arrow {
      color: #fff;
    }
    img {
      width: 20px;
      margin-left: 10px;
    }
  }
  .select-item:nth-child(2) {
    background: #08b1ba;
    ::v-deep .ant-select-selector {
      background: #08b1ba;
    }
  }
  .select-item:nth-child(3) {
    background: #1aa053;
    ::v-deep .ant-select-selector {
      background: #1aa053;
    }
  }
</style>
