<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="handlePojectChange"
      />
    </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="handleAirPortChange"
      />
    </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>
</template>
<script setup lang="ts">
  import { reactive, ref, onMounted } from 'vue';
  import { GetWorkspaceList, GetWorkSpaceById, GetUavPageByDocksn } from '@/api/demo/projecthome';
  import { airPortStore } from '@/store/modules/airport';

  const airPortStoreVal = airPortStore();
  const emits = defineEmits(['selectChange']);
  const selectVal = reactive({
    project: null,
    equipment: null,
    airport: null,
  });
  const optionsArr = reactive({
    projectOptions: [],
    equipmentOptions: [],
    airportOptions: [],
  });
  const handleChange = () => {
    airPortStoreVal.setAirPort('sn', selectVal.airport);
    airPortStoreVal.setUAV('sn', selectVal.equipment);
    emits('selectChange', selectVal);
  };
  // 项目列表
  const getProjectList = async () => {
    GetWorkspaceList().then((res) => {
      if (res.length > 0) {
        optionsArr.projectOptions = res.map((item) => {
          return {
            label: item.WorkspaceName,
            value: item.Id,
          };
        });
        if(sessionStorage.getItem('homeToFlightId')){
          selectVal.project = sessionStorage.getItem('homeToFlightId');
          sessionStorage.removeItem('homeToFlightId')
        } else {
          selectVal.project = optionsArr.projectOptions[0].value;
        }
        getAirPort(selectVal.project);
      } else {
        optionsArr.projectOptions = [];
        selectVal.project = null;
        getAirPort(selectVal.project);
      }
    });
  };
  const handlePojectChange = (val) => {
    getAirPort(val);
  };
  // 机场
  const getAirPort = (id) => {
    let params = {
      id: id,
    };
    GetWorkSpaceById(params).then((res) => {
      if (res.lasaDronePort.length > 0) {
        optionsArr.airportOptions = res.lasaDronePort.map((item) => {
          return {
            label: item.name,
            value: item.sn,
          };
        });
        selectVal.airport = optionsArr.airportOptions[0].value;
        getUAV(selectVal.airport);
      } else {
        optionsArr.airportOptions = [];
        selectVal.airport = null;
        optionsArr.equipmentOptions = [];
        selectVal.equipment = null;
      }
    });
  };
  const handleAirPortChange = (val) => {
    getUAV(val);
  };
  // 飞行器
  const getUAV = (sn) => {
    let params = {
      sn: sn,
      page: 1,
      limit: 99,
    };
    GetUavPageByDocksn(params).then((res) => {
      if (res.items.length > 0) {
        optionsArr.equipmentOptions = res.items.map((item) => {
          return {
            label: item.name,
            value: item.sn,
          };
        });
        selectVal.equipment = optionsArr.equipmentOptions[0].value;
        handleChange();
      } else {
        optionsArr.equipmentOptions = [];
        selectVal.equipment = null;
      }
    });
  };
  onMounted(() => {
    getProjectList();
  });
</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>
