<script setup>
import {
  getElevatorInfoDetailApi,
  getWorkDataInfoApi,
  postWorkDataReceiveApi,
  putWorkDataApi
} from '@/api/elevator'
import { useCdn } from '@/composables/use-cdn'
import { useUniApi } from '@/composables/use-uni-api'
const { cdnUrl } = useCdn('/elevator/2024/11/images')
import { Qs } from '@/utils/common'

const instance = getCurrentInstance().proxy
const eventChannel = instance.getOpenerEventChannel()
const { navigateTo } = useUniApi()

const noAgreeHandler = () => {
  uni.navigateBack({
    delta: 1
  })
}

const planTypeMap = {
  1: '半月',
  2: '季度',
  3: '半年',
  4: '年度'
}
const workDetail = ref({})
const getWorkDataInfo = async () => {
  const { error, data } = await getWorkDataInfoApi(options.value)
  if (!error) {
    workDetail.value = data
    const { maintenanceNum } = data
    timesModal.value.content = maintenanceNum
  }
}
onMounted(() => {
  getWorkDataInfo()
})

const timesModal = ref({
  show: false,
  content: '1'
})
const openTimesDialog = () => {
  timesModal.value.show = true
}
const confirmTimesDialog = async () => {
  const { content: maintenanceNum } = timesModal.value
  const { workType } = workDetail.value
  const urlParams = Qs.stringify({
    ...options.value,
    maintenanceNum,
    workType
  })
  navigateTo({
    url: `/pages/views/choose-worker/index?${urlParams}`,
    events: {
      done: () => eventChannel.emit('done', {})
    }
  })
}

const agreeHandler = async () => {
  uni.showModal({
    title: '提示',
    content: '确认要接单吗？',
    showCancel: true,
    success: ({ confirm }) => {
      if (confirm) {
        openTimesDialog()
      }
    }
  })
  // const { id: workId } = options.value
  // const { latitude: lat, longitude: lng } = locations.value
  // const { error, result } = await postWorkDataReceiveApi({
  //   workId,
  //   lat,
  //   lng
  // })
  // if (error) {
  //   return uni.$u.toast(result.msg)
  // }
  // uni.$u.toast('接单成功')
  // eventChannel.emit('done', {})
  // setTimeout(() => {
  //   uni.navigateBack({
  //     delta: 1
  //   })
  // }, 1500)
}
const options = ref({})
onLoad(async (e) => {
  options.value = e
})

const locations = ref({
  latitude: 30.59276,
  longitude: 114.30525
})
const getLocation = () => {
  uni.getLocation({
    type: 'gcj02',
    success: ({ latitude, longitude }) => {
      locations.value = {
        latitude,
        longitude
      }
    }
  })
}
onMounted(() => {
  getLocation()
})

const dataDetail = ref({})
const getElevatorInfoDetail = async () => {
  const { error, data } = await getElevatorInfoDetailApi(options.value)
  if (!error) {
    dataDetail.value = data
  }
}
onMounted(() => {
  getElevatorInfoDetail()
})

const marker = ref({
  id: 1,
  latitude: 30.59276,
  longitude: 114.30525,
  iconPath: `${cdnUrl}/position.png`,
  width: 35,
  height: 35,
  callout: {
    height: 50,
    padding: 5,
    fontSize: 20,
    borderWidth: 1,
    borderRadius: 10,
    bgColor: '#ffffff',
    display: 'ALWAYS',
    textAlign: 'center',
    anchorX: 0,
    anchorY: 0,
    content: ''
  }
})
watchEffect(() => {
  const { latitude, longitude } = locations.value
  marker.value.latitude = latitude
  marker.value.longitude = longitude

  const { elevatorName } = dataDetail.value
  marker.value.callout.content = elevatorName
})
</script>

<template>
  <view w-full h-100vh relative bg="#FFFFFF">
    <map
      id="map"
      class="map"
      style="width: 100%; height: 100%"
      :markers="[marker]"
      :show-location="true"
      :latitude="locations.latitude"
      :longitude="locations.longitude"
    ></map>

    <cover-view
      absolute
      w-200
      h-80
      lh-80
      text-center
      bottom-150
      left-80
      rounded-40
      border-solid
      border-1
      border-gray
      bg="#FFF"
      @tap="noAgreeHandler"
    >
      不接单
    </cover-view>
    <cover-view
      absolute
      w-200
      h-80
      lh-80
      text-center
      bottom-150
      rounded-40
      border-solid
      border-1
      border-gray
      bg="#4395D5"
      color="#FFFFFF"
      right-80
      @tap="agreeHandler"
    >
      接单
    </cover-view>
  </view>

  <up-modal
    title="维保记录"
    :show="timesModal.show"
    close-on-click-overlay
    :show-cancel-button="true"
    @close="timesModal.show = false"
    @cancel="timesModal.show = false"
    @confirm="confirmTimesDialog"
  >
    <view f-s-c>
      <view text-28>
        本次维保为{{ planTypeMap[workDetail.planType] }}维保，维保次数为
      </view>
      <up-input
        v-model="timesModal.content"
        type="number"
        placeholder="请输入"
      />
    </view>
  </up-modal>
</template>
