<script setup lang="ts">
// @ts-ignore
import { ref, defineEmits } from 'vue'
import { useQueue } from 'wot-design-uni'
import { queryGasStationList } from '@/api/workorder'
const { closeOutside } = useQueue()
const emit = defineEmits(['GasStationchange'])
const value1 = ref('')
const option1 = ref<Record<string, any>[]>([])
function handleChange1({ value }) {
  emit('GasStationchange', value)
}
const queryGasStationListfn = async () => {
  try {
    const res = (await queryGasStationList({})) as any
    if (res?.code === 200) {
      option1.value = res.data.map((item) => ({
        label: `${item.nickName}-${item.stationName}`,
        value: `${item.userId}-${item.stationId}`,
      }))
      value1.value = option1.value[0]?.value || ''
      handleChange1({ value: value1.value })
    }
  } catch (error) {
    console.log(error)
  }
}
onLoad(() => {
  queryGasStationListfn()
})
</script>
<template>
  <view class="schedule-nav-bar">
    <view class="schedule-nav-bar-left">
      <wd-drop-menu>
        <wd-drop-menu-item
          v-model="value1"
          :options="option1"
          @change="handleChange1"
        />
      </wd-drop-menu>
      <!-- <view> -->
      <!-- <text style="font-size: 32rpx; font-weight: 500">静静（站长）</text>
      <wd-icon name="caret-down-small" size="22px"></wd-icon> -->
      <!-- </view> -->
    </view>
    <view class="schedule-nav-bar-right"></view>
  </view>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.schedule-nav-bar {
  // position: fixed;
  // top: 0;
  // left: 0;
  width: 100%;
  // height: 80rpx;
  // background-color: #e61313;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
  .schedule-nav-bar-left {
    // width: 40%;
    // display: flex;
    // align-items: center;
    // border: 1px solid red;
    color: #303030;
    font-family: PingFang SC;
  }
  .schedule-nav-bar-right {
    width: 30%;
  }
}

// 提升下拉框层级
:deep(.wd-drop-menu) {
  z-index: 1000 !important;
}

:deep(.wd-popover) {
  z-index: 1000 !important;
}
</style>
