<script lang="ts" setup>
import { getCurrentLocationRegionAPI, getEbikeDetailForWorkAPI, getEbikeListForWorkAPI } from '@/api/operator'
import { getOperatoringListAPI } from '@/api/warehouse'
import { getScanBikeInfoBycodeAPI } from '@/api/work'
import AMapWX from '@/plugIns/amap-wx.130.js'
import { deepClone, getImageFullPath } from '@/utils'
import { eventBus, EVENTS } from '@/utils/events'
import { addLine, drawPoint, drawRegion, getLoalcation, getMapContext, getPolygonCentroid, getRoutePlan, siteTypeConfig } from '@/utils/map'
import { menuButtonBoundingClientRect, systemInfo } from '@/utils/systemInfo'
import carDetailsTools from './components/carDetailsTools.vue'
import cardModule from './components/cardModule.vue'
import changeTools from './components/changeTools.vue'
import dispatchTools from './components/dispatchTools.vue'
import filtrate from './components/filtrate.vue'
import maintainTools from './components/maintainTools.vue'
import pollingTools from './components/pollingTools.vue'
import regionSelect from './components/regionSelect.vue'
import { getSiteTypeIcon, tab_list, tab_style } from './config'

const { VITE_AMAP_KEY } = import.meta.env
const amapsdk = new AMapWX({
  key: VITE_AMAP_KEY,
})
const PangeInstance = getCurrentInstance() // 当前页面实例

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

const touchboxRef = ref(null)
const bike_list = ref<any>([])
// 地图引用
const mapContext = ref<any>(null)
const regionList = ref<any>([]) // 区域列表
const mapPolylines = ref<any>([]) // 地图线
const mapPolygons = ref([]) // 地图多边形区域
const touchMaxTop = ref(500) // 触摸最大高度
const mapConfig = reactive({
  scale: 14,
  latitude: undefined,
  longitude: undefined,
})
const mapMarker_list = ref<any>([])
const currentRegion = ref<any>({
  regionId: '',
  regionName: '',
  isLoading: false,
  sites: [],
})
const mapContainerHeight = ref<number>(400)

// 弹窗
const regionPopupRef = ref<any>(null)
const regionSelectRef = ref<any>(null)
const filtratePopupRef = ref<any>(null)
const carDetailsToolsRef = ref<any>(null)
const filtratetRef = ref<any>(null)
const bikeDetail = ref<any>({})

// 查询参数
const query = ref({
  bikeCode: '',
  bikeStatus: null,
  acceptOrder: null,
  orderType: tab_list[4].value,
})

const tab_current = computed(() => {
  return tab_list.findIndex((item: any) => item.value === query.value.orderType)
})

// 工具列表筛选参数
const toolListQuery = ref({
  // 换电
  sliderRange: [0, 100],
  seletType: 'all',

  // 调度
  dispatchSlider: 7,
  dispatchSeletType: 'all',

  // 维修
  repairSeletType: 'all',

  // 巡检
  inspectionSeletType: 'all',
})

/**
 *  选项卡点击
 */
async function handleTabClick(item: any) {
  const { key, name, value } = item
  query.value.orderType = value

  toolListQuery.value = {
    sliderRange: [0, 100],
    seletType: 'all',
    dispatchSlider: 7,
    dispatchSeletType: 'all',
    repairSeletType: 'all',
    inspectionSeletType: 'all',
  }

  const bikes: any = await getEbikeList()
  bike_list.value = bikes

  const filterBikes = await getToolsChangeBike(bike_list.value)
  const sitePoints = mapMarker_list.value.filter((item: any) => item.type === 'siteCurrentPoint')
  mapMarker_list.value = [].concat(sitePoints).concat(filterBikes)

  touchboxRef.value.setBottom(0)
  touchboxFinishEnd()
}

/**
 * 定位
 */
function handleLocation() {
  getLoalcation({
    mapContext: mapContext.value,
    moveCenter: true,
    success: (res: any) => {},
    fail: () => {},
  })
}

/**
 * 刷新
 */
async function handleRefresh() {
  uni.showLoading({
    title: '刷新中...',
  })
  mapPolygons.value = []
  mapMarker_list.value = []
  mapPolylines.value = []
  touchboxRef.value.setBottom(0)
  currentRegion.value.isLoading = true

  try {
    if (!mapContext.value) {
      mapContext.value = getMapContext('mapRef', PangeInstance)
    }
    const { latitude, longitude, scale }: any = await getCurrentLocation()
    const { list }: any = await getRegionList()
    regionList.value = list

    if (!currentRegion.value.regionId) {
      await setRegion(list[0].regionId)
    }

    const bikes: any = await getEbikeList()
    bike_list.value = bikes

    // 绘制地图中的信息
    currentRegion.value.sites = await getSiteList(currentRegion.value.regionId)
    const operationArea = await drawOperationArea()
    const { sites, currentPoints } = await drawMapSite()
    const sitePoints = await drawMapSiteCenterPoint(currentPoints)
    const filterBikes = await getToolsChangeBike(bike_list.value)

    // 赋值地图信息
    mapPolygons.value = [].concat(operationArea).concat(sites)
    mapMarker_list.value = [].concat(sitePoints).concat(filterBikes)
  }
  catch (e) {
    console.error(e)
    uni.showToast({
      title: '刷新失败',
      icon: 'none',
    })
  }
  finally {
    uni.hideLoading()
  }
}

/**
 * 区域选择
 */
function handleOpenRegion() {
  regionSelectRef.value.init(currentRegion.value.regionId)
  regionPopupRef.value.open()
}

/**
 * 获取当前位置
 */
function getCurrentLocation() {
  return new Promise((resolve, reject) => {
    getLoalcation({
      mapContext: mapContext.value,
      moveCenter: true,
      success: (res: any) => {
        const { latitude, longitude } = res
        mapConfig.latitude = latitude
        mapConfig.longitude = longitude
        resolve({ latitude, longitude, scale: mapConfig.scale })
      },
      fail: (err: any) => {
        reject(err)
      },
    })
  })
}

/**
 * 规划路线
 */
function getRoute(point: any): Promise<{
  arrPoint: any[]
  distance: number
}> {
  return new Promise((resolve, reject) => {
    if (!point) {
      return resolve({
        arrPoint: [],
        distance: 0,
      })
    }
    getLoalcation({
      mapContext: mapContext.value,
      success(myRes: any) {
        const { longitude, latitude } = myRes
        getRoutePlan({
          mapsdk: amapsdk,
          slng: longitude,
          slat: latitude,
          elng: point.location.longitude,
          elat: point.location.latitude,
          success(routeRes: any) {
            const { arrPoint, distance } = routeRes

            if (mapContext.value) {
              mapContext.value.includePoints({
                points: arrPoint,
                padding: [90, 90, 90, 90], // 视野边缘与点的间距
                success: () => {
                  resolve({
                    arrPoint,
                    distance,
                  })
                },
              })
            }
          },
          fail(err: any) {
            reject(err)
          },
        })
      },
      fail(err: any) {
        reject(err)
      },
    })
  })
}

/**
 * 获取区域列表
 */
function getRegionList() {
  return new Promise((resolve, reject) => {
    getCurrentLocationRegionAPI({
      type: 'point',
      longitude: mapConfig.longitude,
      latitude: mapConfig.latitude,
    }).then((res) => {
      // console.log('区域列表', res)
      const region_list = res.filter((item: any) => item.status === 1)
      currentRegion.value.isLoading = false
      resolve({ list: region_list || [] })
    }).catch((err: any) => {
      currentRegion.value.isLoading = false
      reject(err)
    })
  })
}

/**
 * 设置运营区
 */
function setRegion(regionId: string) {
  return new Promise((resolve, reject) => {
    const region = regionList.value.find((item: any) => item.regionId === regionId)
    currentRegion.value = {
      ...currentRegion.value,
      ...region,
    }
    resolve(currentRegion.value)
  })
}

/**
 * 选择运营区
 */
async function comfirmRegion(region: any) {
  uni.showLoading({
    title: '正在获取数据',
  })
  try {
    await setRegion(region.regionId)
    const bikes: any = await getEbikeList()
    bike_list.value = bikes

    // 绘制地图中的信息
    currentRegion.value.sites = await getSiteList(region.regionId)
    const operationArea = await drawOperationArea()
    const { sites, currentPoints } = await drawMapSite()
    const sitePoints = await drawMapSiteCenterPoint(currentPoints)
    const filterBikes = await getToolsChangeBike(bike_list.value)

    // 赋值地图信息
    mapPolygons.value = [].concat(operationArea).concat(sites)
    mapMarker_list.value = [].concat(sitePoints).concat(filterBikes)

    closeRegionSelect()
    touchboxRef.value.setBottom(0)
    touchboxFinishEnd()
  }
  catch (err) {
    uni.showToast({
      title: '获取数据失败',
      icon: 'error',
      duration: 2000,
    })
  }
  finally {
    uni.hideLoading()
  }
}

/**
 * 筛选点击
 */
function handleFiltrateClick() {
  filtratetRef.value.init(query.value)
  filtratePopupRef.value.open()
}

function closeRegionSelect() {
  regionPopupRef.value.close()
}

function closeFiltratet() {
  filtratePopupRef.value.close()
}

/**
 * 筛选确定
 */
async function comfirmFiltrate(params: any) {
  uni.showLoading({
    title: '正在获取数据',
  })
  try {
    const { bikeCode, bikeStatus, acceptOrder } = params
    query.value.acceptOrder = acceptOrder
    query.value.bikeCode = bikeCode
    query.value.bikeStatus = bikeStatus

    const bikes: any = await getEbikeList()
    bike_list.value = bikes

    // 绘制地图中的信息
    const { currentPoints } = await drawMapSite()
    const sitePoints = await drawMapSiteCenterPoint(currentPoints)
    const filterBikes = await getToolsChangeBike(bike_list.value)

    // 赋值地图信息
    mapMarker_list.value = [].concat(sitePoints).concat(filterBikes)

    closeFiltratet()
  }
  catch (err) {
    uni.showToast({
      title: '获取数据失败',
      icon: 'error',
      duration: 2000,
    })
  }
  finally {
    uni.hideLoading()
  }
}

/**
 * 获取工单地图车辆列表信息
 */
function getEbikeList() {
  return new Promise((resolve, reject) => {
    if (!currentRegion.value.regionId) {
      return resolve([])
    }
    getEbikeListForWorkAPI({
      regionId: currentRegion.value.regionId,
      bikeCode: query.value.bikeCode,
      bikeStatus: query.value.bikeStatus,
      acceptOrder: query.value.acceptOrder,
      orderType: query.value.orderType,
    }).then((res) => {
      resolve(res)
    }).catch ((error: any) => {
      reject(error)
    })
  })
}

/**
 * 获取站点列表
 */
function getSiteList(regionId: string) {
  return new Promise((resolve, reject) => {
    getOperatoringListAPI(regionId)
      .then((res: any) => {
        resolve(res || [])
      })
      .catch((error: any) => {
        reject(error)
      })
  })
}

/**
 * 绘制运营区
 */
function drawOperationArea() {
  return new Promise((resolve, reject) => {
    const operationArea = []

    if (currentRegion.value.regionPolygon) {
      const { coordinates } = currentRegion.value.regionPolygon
      drawRegion({
        point: coordinates,
        type: 'operation',
        isFormat: true,
        success(res) {
          operationArea.push(res)
          resolve(operationArea)
        },
        fail(err) {
          console.error(err)
          reject(err)
        },
      })
    }
    else {
      resolve(operationArea)
    }
  })
}

/**
 * 绘制站点
 */
function drawMapSite(): Promise<{
  sites: any[]
  currentPoints: any[]
}> {
  return new Promise((resolve, reject) => {
    const sites = []
    const currentPoints = []

    if (currentRegion.value.sites && currentRegion.value.sites.length > 0) {
      currentRegion.value.sites.forEach((site: any) => {
        const { coordinates } = site.sitePolygon
        drawRegion({
          point: coordinates,
          isFormat: true,
          zIndex: 1,
          type: 'site',
          option: {
            strokeWidth: 2,
            strokeColor: siteTypeConfig[site.siteType].strokeColor,
            fillColor: siteTypeConfig[site.siteType].fillColor,
            level: siteTypeConfig[site.siteType].level,
            zIndex: siteTypeConfig[site.siteType].zIndex,
          },
          success(res) {
            sites.push(res)
          },
          fail(err) {
            console.error(err)
          },
        })
        const currentPoint = getPolygonCentroid(coordinates)
        currentPoints.push({
          id: Number(site.siteId),
          name: site.siteName,
          siteType: site.siteType,
          ...currentPoint,
        })
      })
      resolve({
        sites,
        currentPoints,
      })
    }
    else {
      resolve({
        sites: [],
        currentPoints: [],
      })
    }
  })
}

/**
 * 绘制站点中心点位信息
 */
function drawMapSiteCenterPoint(currentPoints: any []) {
  return new Promise((resolve, reject) => {
    const arr = []
    if (currentPoints.length > 0) {
      currentPoints.forEach((point: any) => {
        const siteCurrentPoint = {
          id: point.id,
          siteId: point.id.toString(),
          type: 'siteCurrentPoint',
          latitude: point.latitude,
          width: 21,
          siteType: point.siteType,
          height: 30,
          iconPath: getSiteTypeIcon(point.siteType),
          longitude: point.longitude,
        }
        arr.push(siteCurrentPoint)
      })
    }
    resolve(arr)
  })
}

/**
 * 换电工具变化
 */
async function batteryToolChange(res: any) {
  const { value, chargeType } = res
  toolListQuery.value.seletType = chargeType
  toolListQuery.value.sliderRange = value
  const filterBikes = await getToolsChangeBike(bike_list.value)
  const filterMapList = mapMarker_list.value.filter(item => item.type !== 'bike')
  mapMarker_list.value = [...filterMapList, ...filterBikes]
}
/**
 * 调度工具变化
 */
async function dispatchToolChange(res: any) {
  const { dispatchSeletType, dispatchSlider } = res
  toolListQuery.value.dispatchSlider = dispatchSlider
  toolListQuery.value.dispatchSeletType = dispatchSeletType
  const filterBikes = await getToolsChangeBike(bike_list.value)
  const filterMapList = mapMarker_list.value.filter(item => item.type !== 'bike')
  mapMarker_list.value = [...filterMapList, ...filterBikes]
}
/**
 * 维修工具变化
 */
async function maintainToolChange(res: any) {
  const { repairSeletType } = res
  toolListQuery.value.repairSeletType = repairSeletType
  const filterBikes = await getToolsChangeBike(bike_list.value)
  const filterMapList = mapMarker_list.value.filter(item => item.type !== 'bike')
  mapMarker_list.value = [...filterMapList, ...filterBikes]
}
/**
 * 巡检工具变化
 */
async function pollingToolChange(res: any) {
  const { inspectionSeletType } = res
  toolListQuery.value.inspectionSeletType = inspectionSeletType
  const filterBikes = await getToolsChangeBike(bike_list.value)
  const filterMapList = mapMarker_list.value.filter(item => item.type !== 'bike')
  mapMarker_list.value = [...filterMapList, ...filterBikes]
}

/**
 * 工具栏变化筛选车辆
 */
function getToolsChangeBike(bikeList: any[]): Promise<any[]> {
  return new Promise((resolve) => {
    let bikes = []

    console.log(query.value.orderType, 'orderType')

    if (bikeList?.length > 0) {
      // 换电
      if (query.value.orderType === 2) {
        bikes = getChangeBattery(bikeList)
      }

      // 调度
      if (query.value.orderType === 3) {
        bikes = getChangDispatch(bikeList)
      }

      // 维修
      if (query.value.orderType === 4) {
        bikes = getChangRepair(bikeList)
      }

      // 巡检
      if (query.value.orderType === 1) {
        bikes = getChangInspection(bikeList)
      }

      // 全部
      if (!query.value.orderType || query.value.orderType === 'all') {
        bikes = getChangAll(bikeList)
      }
    }

    resolve(bikes)
  })
}
function getChangeBattery(bikeList: any[]): any[] {
  const arr = []
  let filterList = []

  // 全部
  if (toolListQuery.value.seletType === 'all') {
    filterList = filterList = bikeList.filter((item: any) => (
      item.soc >= toolListQuery.value.sliderRange[0]
      && item.soc <= toolListQuery.value.sliderRange[1]
    ))
  }

  // 离线
  if (toolListQuery.value.seletType === 'offline') {
    filterList = bikeList.filter((item: any) => !item.online)
  }

  // 电量筛选
  if (toolListQuery.value.seletType !== 'all' && toolListQuery.value.seletType !== 'offline') {
    filterList = bikeList.filter((item: any) => (
      item.soc >= toolListQuery.value.sliderRange[0]
      && item.soc <= toolListQuery.value.sliderRange[1]
      && item.online
    ))
  }

  filterList.forEach((item: any) => {
    drawPoint({
      type: 'charge',
      point: {
        bikeCode: item.bikeCode,
        latitude: item.location.latitude,
        longitude: item.location.longitude,
        soc: item.soc,
        online: item.online,
      },
      success(res) {
        arr.push({
          ...res,
          type: 'bike',
        })
      },
      fail(res) {
        console.error(res)
      },
    })
  })
  return arr
}
function getChangDispatch(bikeList: any[]): any[] {
  const arr = []
  let filterList = []
  // 筛选：4中情况：24无单、不在停车区、全部、无单但是时间自己选择
  if (toolListQuery.value.dispatchSeletType === 'all') {
    filterList = deepClone(bikeList)
  }

  if (toolListQuery.value.dispatchSeletType === 'over24Hours') {
    filterList = bikeList.filter(item => item.over24Hours)
  }

  if (toolListQuery.value.dispatchSeletType === 'NoInParkingArea') {
    filterList = bikeList.filter(item => !item.isInParkingArea)
  }

  if (toolListQuery.value.dispatchSeletType === 'optionalHours') {
    filterList = bikeList.filter((item) => {
      const day = item.hoursSinceLastCycling / 24
      return day <= toolListQuery.value.dispatchSlider
    })
  }

  filterList.forEach((item: any) => {
    drawPoint({
      type: 'dispatch',
      point: {
        bikeCode: item.bikeCode,
        latitude: item.location.latitude,
        longitude: item.location.longitude,
        soc: item.soc,
        online: item.online,
        bikeInfo: {
          ...item,
        },
      },
      option: {
        seletType: toolListQuery.value.dispatchSeletType,
      },
      success(res) {
        arr.push({
          ...res,
          type: 'bike',
        })
      },
      fail(res) {
        console.error(res)
      },
    })
  })

  return arr
}
function getChangRepair(bikeList: any[]): any[] {
  const arr = []
  let filterList = []

  if (toolListQuery.value.repairSeletType === 'all') {
    filterList = deepClone(bikeList)
  }

  if (toolListQuery.value.repairSeletType === 'repair') {
    filterList = bikeList.filter(item => item.online)
  }

  if (toolListQuery.value.repairSeletType === 'offline') {
    filterList = bikeList.filter(item => !item.online)
  }

  filterList.forEach((item: any) => {
    drawPoint({
      type: 'maintain',
      point: {
        bikeCode: item.bikeCode,
        latitude: item.location.latitude,
        longitude: item.location.longitude,
        soc: item.soc,
        online: item.online,
        bikeInfo: {
          ...item,
        },
      },
      option: {
        seletType: toolListQuery.value.repairSeletType,
      },
      success(res) {
        arr.push({
          ...res,
          type: 'bike',
        })
      },
      fail(res) {
        console.error(res)
      },
    })
  })

  return arr
}
function getChangInspection(bikeList: any[]): any[] {
  const arr = []
  let filterList = []

  if (toolListQuery.value.inspectionSeletType === 'all') {
    filterList = deepClone(bikeList)
  }

  if (toolListQuery.value.inspectionSeletType === 'pollingTask') {
    filterList = bikeList.filter(item => !item.isUserReporting)
  }

  if (toolListQuery.value.inspectionSeletType === 'userRepairs') {
    filterList = bikeList.filter(item => item.isUserReporting)
  }

  filterList.forEach((item: any) => {
    drawPoint({
      type: 'polling',
      point: {
        bikeCode: item.bikeCode,
        latitude: item.location.latitude,
        longitude: item.location.longitude,
        soc: item.soc,
        online: item.online,
        bikeInfo: {
          ...item,
        },
      },
      option: {
        seletType: toolListQuery.value.inspectionSeletType,
      },
      success(res) {
        arr.push({
          ...res,
          type: 'bike',
        })
      },
      fail(res) {
        console.error(res)
      },
    })
  })

  return arr
}
function getChangAll(bikeList: any[]): any[] {
  const arr = []

  bikeList.forEach ((item) => {
    drawPoint({
      type: 'none',
      point: {
        bikeCode: item.bikeCode,
        latitude: item.location.latitude,
        longitude: item.location.longitude,
        soc: item.soc,
        online: item.online,
        bikeInfo: {
          ...item,
        },
      },
      success(res) {
        arr.push({
          ...res,
          type: 'bike',
        })
      },
      fail(res) {
        console.error(res)
      },
    })
  })

  return arr
}

/**
 * 点击地图标点
 */
async function handleMarkertap(e: any) {
  const { markerId } = e.detail
  const point = mapMarker_list.value.find(item => item.id === markerId)
  try {
    if (point.type === 'bike') {
      uni.showLoading({
        title: '详情加载中...',
      })
      // 获取车辆详情
      const detail = await getEbikeDetailForWorkAPI(point.bikeCode)
      const scanDetail = await getScanBikeInfoBycodeAPI(point.bikeCode)
      const { distance, arrPoint } = await getRoute(detail)
      mapPolylines.value = [
        addLine({
          sColor: '#1082FF',
          arrPoint,
          width: 10,
          arrowLine: true,
        }),
      ]
      bikeDetail.value = {
        ...detail,
        bikeCode: point.bikeCode,
        distance,
        orders: scanDetail.orders,
      }

      touchboxRef.value.setBottom((systemInfo.windowHeight || 750) - touchMaxTop.value)
      carDetailsToolsRef.value.init(bikeDetail.value, query.value.orderType)
    }
  }
  catch (err) {
    console.error(err)
  }
  finally {
    uni.hideLoading()
  }
}

/**
 * 初始化
 */
async function initMap() {
  try {
    //  加载状态
    currentRegion.value.isLoading = true

    // 获取地图上下文
    if (!mapContext.value) {
      mapContext.value = getMapContext('mapRef', PangeInstance)
    }

    // 获取当前位置
    const { latitude, longitude, scale }: any = await getCurrentLocation()

    // 获取区域列表
    const { list }: any = await getRegionList()
    regionList.value = list
    if (list && list.length > 0) {
      await setRegion(list[0].regionId)
      const bikes: any = await getEbikeList()
      bike_list.value = bikes

      // 绘制地图中的信息
      currentRegion.value.sites = await getSiteList(list[0].regionId)
      const operationArea = await drawOperationArea()
      const { sites, currentPoints } = await drawMapSite()
      const sitePoints = await drawMapSiteCenterPoint(currentPoints)
      const filterBikes = await getToolsChangeBike(bike_list.value)

      // 赋值地图信息
      mapPolygons.value = [].concat(operationArea).concat(sites)
      mapMarker_list.value = [].concat(sitePoints).concat(filterBikes)
    }
  }
  catch (err) {
    console.error(err)
  }
}

function touchboxFinishEnd() {
  mapPolylines.value = []
  mapContext?.value.moveToLocation({
    longitude: mapConfig.longitude,
    latitude: mapConfig.latitude,
  })
  carDetailsToolsRef.value.clear()
}

function noticeByEventBus(orderType: string | number) {
  handleRefresh()
}

onMounted(() => {
  initMap()
  eventBus.on(EVENTS.ORDERCOMPLETE, noticeByEventBus)
})

onUnmounted(() => {
  eventBus.off(EVENTS.ORDERCOMPLETE)
})

onReady(() => {
  if (systemInfo && menuButtonBoundingClientRect) {
    const tabHeight = 45
    const tabbarHight = 55
    mapContainerHeight.value
      = systemInfo.windowHeight - menuButtonBoundingClientRect.top - menuButtonBoundingClientRect.height - systemInfo.safeAreaInsets.bottom - tabHeight - tabbarHight
  }
})
</script>

<template>
  <z-paging
    ref="paging"
    bg-color="#f9f9f9"
  >
    <template #top>
      <view class="header">
        <view class="status-bar" :style="{ height: `${systemInfo.statusBarHeight + 8}px` }" />
        <view
          class="title_bar" :style="{
            height: menuButtonBoundingClientRect ? `${menuButtonBoundingClientRect.height}px` : 'auto',
          }"
        >
          <view class="title">
            工单地图
          </view>
          <view class="area">
            <uv-icon name="map" color="white" size="16" />
            <view v-if="currentRegion.isLoading">
              <uv-loading-icon mode="spinner" color="white" size="15" />
            </view>
            <view v-else class="flex" @click="handleOpenRegion">
              <text class="text">{{ `${currentRegion.regionName}` || '--' }}</text>
              <uv-icon name="arrow-right" color="white" size="14" />
            </view>
          </view>
        </view>
        <view class="tab_bar">
          <uv-tabs
            line-color="#ffffff"
            :current="tab_current"
            :list="tab_list"
            :active-style="tab_style.active"
            :inactive-style="tab_style.inactive"
            :item-style="tab_style.custom"
            @change="handleTabClick"
          />
          <view class="filtrate" @click="handleFiltrateClick">
            <uv-icon
              name="shaixuan"
              color="white"
              custom-prefix="custom-icon"
              size="24"
            />
          </view>
        </view>
      </view>
    </template>
    <view
      class="map_container"
      :style="{
        width: `${systemInfo.windowWidth}px`,
        height: `${mapContainerHeight}px`,
      }"
    >
      <map
        id="mapRef"
        ref="mapRef"
        :style="{ width: '100%', height: `100%` }"
        :show-location="true"
        :scale="mapConfig.scale"
        :markers="mapMarker_list"
        :latitude="mapConfig.latitude"
        :longitude="mapConfig.longitude"
        :polygons="mapPolygons"
        :polyline="mapPolylines"
        @markertap="handleMarkertap"
      />

      <!-- 换电工具栏 -->
      <cardModule v-if="query.orderType === 2">
        <changeTools :list="bike_list" @change="batteryToolChange" />
      </cardModule>

      <!-- 调度工具栏 -->
      <cardModule v-if="query.orderType === 3">
        <dispatchTools :list="bike_list" @change="dispatchToolChange" />
      </cardModule>

      <!-- 巡检工具栏 -->
      <cardModule v-if="query.orderType === 1">
        <pollingTools :list="bike_list" @change="pollingToolChange" />
      </cardModule>

      <!-- 维修工具栏 -->
      <cardModule v-if="query.orderType === 4">
        <maintainTools :list="bike_list" @change="maintainToolChange" />
      </cardModule>

      <!-- 定位 -->
      <view
        class="broadside_icon"
        :style="{
          top: `${systemInfo.windowHeight / 2}px`,
        }"
        @click="handleLocation"
      >
        <uv-image :src="getImageFullPath('DINGWEI_ICON_IMAGE')" mode="widthFix" width="100%" />
      </view>

      <!-- 刷新 -->
      <view
        :style="{
          top: `${systemInfo.windowHeight / 2 - 60}px`,
        }"
        class="broadside_icon"
        @click="handleRefresh"
      >
        <uv-image :src="getImageFullPath('SHUAXING_ICON_IMAGE')" mode="widthFix" width="100%" />
      </view>
    </view>
  </z-paging>

  <!-- 运营区筛选 -->
  <uv-popup ref="regionPopupRef" mode="right">
    <regionSelect ref="regionSelectRef" :region-list="regionList" @close="closeRegionSelect" @comfirm="comfirmRegion" />
  </uv-popup>

  <!-- 筛选 -->
  <uv-popup ref="filtratePopupRef" mode="right">
    <filtrate ref="filtratetRef" @close="closeFiltratet" @comfirm="comfirmFiltrate" />
  </uv-popup>

  <!-- 车辆详情 -->
  <you-touchbox
    ref="touchboxRef"
    :custom-style="{
      backgroundColor: '#FFFFFF',
      borderTopLeftRadius: '26px',
      borderTopRightRadius: '26px',
      boxShadow: '0 2rpx 8rpx rgba(0, 0, 0, 0.4)',
    }"
    min-top="0"
    :max-top="touchMaxTop"
    @finish-end="touchboxFinishEnd"
  >
    <carDetailsTools ref="carDetailsToolsRef" />
  </you-touchbox>
</template>

<style lang="scss" scoped>
.header {
  width: 100%;
  background-color: #2c91fb;

  .title_bar {
    width: 100%;
    padding: 0 20rpx;
    display: flex;
    align-items: center;

    .title {
      font-family: SourceHanSansCN-Medium;
      font-size: 34rpx;
      color: #ffffff;
      font-weight: 500;
    }

    .area {
      margin-left: 27rpx;
      display: flex;
      align-items: center;

      .text {
        margin: 0 10rpx;
        font-family: SourceHanSansCN-Medium;
        font-size: 24rpx;
        color: white;
        font-weight: 500;
        max-width: 180rpx;
        //文字溢出显示省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .tab_bar {
    padding-bottom: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .filtrate {
      padding-right: 20rpx;
    }
  }
}

.map_container {
  width: 100%;
  position: relative;
}

.broadside_icon {
  position: fixed;
  z-index: 999;
  left: 20rpx;
  width: 80rpx;
  height: 80rpx;
  overflow: hidden;
}
</style>
