<script setup>
import dayjs from 'dayjs'
import {
  getElevatorInfoDetailApi,
  postWorkDataReceiveApi
} from '@/api/elevator'
import { useCdn } from '@/composables/use-cdn'
const { cdnUrl } = useCdn('/elevator/2024/11/images')

const instance = getCurrentInstance().proxy
const eventChannel = instance.getOpenerEventChannel()

const noAgreeHandler = () => {
  uni.navigateBack({
    delta: 1
  })
}
const agreeHandler = async () => {
  const { id: workId } = options.value
  const { latitude: lat, longitude: lng } = locations.value
  const { error, result } = await postWorkDataReceiveApi({
    workId,
    receiveTime: receiveTime.value,
    lat,
    lng
  })
  if (error) {
    return uni.$u.toast(result.msg)
  }
  uni.$u.toast('接单成功')
  eventChannel.emit('done', {})
  setTimeout(() => {
    uni.navigateBack({
      delta: 1
    })
  }, 1500)
}
const showPicker = ref(false)
const receiveTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
const doPicker = () => {
  showPicker.value = true
  receiveTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
}
const confirmPicker = ({ value }) => {
  showPicker.value = false
  receiveTime.value = value
  uni.showModal({
    title: '提示',
    content: '已确认日期吗？',
    success: (res) => {
      if (res.confirm) {
        agreeHandler()
      }
    }
  })
}

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 getWorkDataInfo = async () => {
  const { error, data } = await getElevatorInfoDetailApi(options.value)
  if (!error) {
    dataDetail.value = data
  }
}
onMounted(() => {
  getWorkDataInfo()
})

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
  // elevatorAddress
  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="doPicker"
    >
      接单
    </cover-view>
  </view>

  <up-datetime-picker
    v-model="receiveTime"
    title="选择接单时间"
    :show="showPicker"
    mode="datetime"
    @confirm="confirmPicker"
  />
</template>
