<template>
  <el-dialog
    title="请设置住宿范围"
    append-to-body
    :close-on-click-modal="false"
    v-model="visible"
    width="90%">
    <div style="height: 100%;width:100%">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"
               class="demo-ruleForm">

        <el-form-item label="住宿半径(米)" prop="raidus">
          <el-input-number v-model="form.raidus" :min="0" style="width: 100%"></el-input-number>
        </el-form-item>

      </el-form>
      <div id="container"></div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dataFormSubmit">确定</el-button>
        <el-button @click="visible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, nextTick } from 'vue'
import { useMessage, useMessageBox } from '/@/hooks/message'
import { BMPGL } from "@/api/recruit/recruitstudentsignup"
import { putItemObj } from "@/api/admin/dict"
import { getTypeValue } from "@/api/admin/dict"

// 消息提示 hooks
const message = useMessage()
const messageBox = useMessageBox()

// 表单引用
const formRef = ref()

// 响应式数据
const ak = "V0ooaf2RZyEGOkD8UzZB3gvw7pCb0Kx7" // 百度的地图密钥
const visible = ref(false)
const canSubmit = ref(false)
const circleShow = ref(false)
const circle = ref<any>(null)

// 地址信息
const address = ref(null)
const center = reactive({ lng: 0, lat: 0 })
const dictId = ref("")
const circleArr = ref<any[]>([])

const form = reactive({
  raidus: 0,
})

const rules = {
  raidus: [
    { required: true, message: '住宿半径不能为空', trigger: ["blur", "change"] }
  ],
}

// 监听半径变化
watch(() => form.raidus, (newVal) => {
  if (newVal != '' && newVal != undefined && circle.value) {
    circle.value.setRadius(newVal) // 设置圆形覆盖物的半径
  }
})

// 初始化
const init = () => {
  visible.value = true
  canSubmit.value = true
  circleShow.value = true
  nextTick(() => {
    getTypeValue("dorm_jw").then((data: any) => {
      const arr = data.data
      arr.forEach((e: any) => {
        if (e.label == 'bj') {
          form.raidus = e.value
          dictId.value = e.id
        } else if (e.label == 'lng') {
          center.lng = e.value
        } else if (e.label == 'lat') {
          center.lat = e.value
        }
      })
      BMPGL(ak).then((BMapGL: any) => {
        // 创建地图实例
        const map = new BMapGL.Map("container")
        // 创建点坐标
        const point = new BMapGL.Point(center.lng, center.lat)
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 13)
        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true)

        // 绘制圆
        circle.value = new BMapGL.Circle(new BMapGL.Point(center.lng, center.lat), form.raidus, {
          strokeColor: 'blue',
          strokeWeight: 2,
          strokeOpacity: 0.5,
          enableEditing: false
        })
        map.addOverlay(circle.value)
      })
    })
  })
}

// 表单提交
const dataFormSubmit = async () => {
  try {
    await messageBox.confirm('是否确认保存住宿半径')
    formRef.value?.validate((valid: boolean) => {
      if (valid) {
        canSubmit.value = false
        putItemObj({ id: dictId.value, value: form.raidus }).then(() => {
          message.success('修改成功')
          visible.value = false
          canSubmit.value = true
        }).catch(() => {
          canSubmit.value = true
        })
      }
    })
  } catch {
    // 用户取消
  }
}

// 暴露方法给父组件
defineExpose({
  init
})
</script>

<style scoped>
#container {
  overflow: hidden;
  width: 100%;
  height: 700px;
  margin: 0;
  font-family: "微软雅黑";
}

ul li {
  list-style: none;
}

.dialog-footer {
  text-align: right;
}
</style>
