<!-- 地下空洞详情 -->
<script lang="ts" setup name="GanDetail">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import uploadFile from './upload.vue'
import mapDialog from '@/views/main/database/mapDialog.vue'
import { getDictByCode } from '@/api/system/dict'
import { getLocation } from '@/api/map'
import { addHole, detailHole, editHole } from '@/api/page/undergroundCavity'
const emits = defineEmits(['refresh'])
const dataFormRef = ref()
const dialogFormVisible = ref(false) // 对话框是否显示
const dialogFormTyle = ref('create')
const typeDict = ref<{ [key: string]: string }>({
  create: '新建',
  update: '编辑',
  detail: '详情',
})
const areaForm = ref({
  abnormolWave: '', // 异常波形
  detectionDistance: '', // 探测距离
  holeSize: '', // 空洞大小
  holeType: '', // 空洞类型
  holePicture: '', // 空洞图片
  detectionTime: '', // 探测时间
  riskLevel: '', // 风险等级
  lnglat: '', // 经纬度
  longitude: '', // 经度
  latitude: '', // 纬度
  position: '', // 空洞位置
  isHandle: '', // 是否进行治理
}) // 表单
const rules: FormRules = {
  abnormolWave: [{ required: true, message: '异常波形必填', trigger: ['blur', 'change'] }],
  detectionDistance: [{ required: true, message: '探测距离必填', trigger: ['blur', 'change'] }],
  holeSize: [{ required: true, message: '空洞大小必填', trigger: ['blur', 'change'] }],
  holeType: [{ required: true, message: '空洞类型必填', trigger: ['blur', 'change'] }],
  // holePicture: [{ required: true, message: '空洞图片必须上传', trigger: ['blur', 'change'] }],
  detectionTime: [{ required: true, message: '探测时间必选', trigger: ['blur', 'change'] }],
  riskLevel: [{ required: true, message: '风险等级必选', trigger: ['blur', 'change'] }],
  position: [{ required: true, message: '空洞位置必填', trigger: ['blur', 'change'] }],
  lnglat: [{ required: true, message: '经纬度必选', trigger: ['blur', 'change'] }],
} // 前端校验规则
// 字典
const riskLevelList = ref<{ name: string;value: string;id: string }[]>() // 风险等级
const handlerList = ref<{ name: string;value: string;id: string }[]>([]) // 是否治理
const fetchDict = () => {
  getDictByCode('holeRiskLevel').then((res) => {
    riskLevelList.value = res.data
  })
  getDictByCode('isAlarm').then((response) => {
    handlerList.value = response.data
  })
}
fetchDict()
// 重置
const resetForm = () => {
  areaForm.value = {
    abnormolWave: '', // 异常波形
    detectionDistance: '', // 探测距离
    holeSize: '', // 空洞大小
    holeType: '', // 空洞类型
    holePicture: '', // 空洞图片
    detectionTime: '', // 探测时间
    riskLevel: '', // 风险等级
    lnglat: '', // 经纬度
    longitude: '', // 经度
    latitude: '', // 纬度
    position: '', // 空洞位置
    isHandle: '', // 是否进行治理
  }
  nextTick(() => {
    dataFormRef.value?.clearValidate()
  })
}
// 取消
const cancel = () => {
  resetForm()
  dialogFormVisible.value = false
}

// 保存数据
const saveData = () => {
  // addHole
  // editHole
  (dialogFormTyle.value === 'create' ? addHole : editHole)(areaForm.value).then((res) => {
    ElMessage.success('操作成功')
    emits('refresh')
    resetForm()
    dialogFormVisible.value = false
  })
}
// 确认
const confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (valid) {
        saveData()
      }
    }
  })
}
// 地图选点
const mapRef = ref()
const selectMap = () => {
  mapRef.value.initDialog([areaForm.value.longitude, areaForm.value.latitude])
}
const confirmMap = (location: any) => {
  console.log(location, '选择的位置')
  areaForm.value.longitude = location[0]
  areaForm.value.latitude = location[1]
  areaForm.value.lnglat = location.join()
  getLocation(areaForm.value.lnglat).then((res) => {
    if (res.data.info === 'OK') {
      areaForm.value.position = res.data.regeocode.formatted_address
    }
    else {
      areaForm.value.position = '/'
    }
  })
}
// 初始化对话框
const initDialog = (type: string, row: any) => {
  dialogFormVisible.value = true
  dialogFormTyle.value = type
  areaForm.value = JSON.parse(JSON.stringify(row))
  if (type === 'create') {
    resetForm()
  }
}
defineExpose({
  initDialog,
})
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :title="typeDict[dialogFormTyle]" append-to-body width="35%">
    <!-- 地图选点 -->
    <map-dialog ref="mapRef" @confirm="confirmMap" />
    <el-form ref="dataFormRef" :class="[dialogFormTyle === 'detail' ? 'isDetail' : '']" :rules="rules" :model="areaForm" label-position="right" label-width="120px" :disabled="dialogFormTyle === 'detail'">
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="异常波形" prop="abnormolWave">
            <el-input v-model.trim="areaForm.abnormolWave" type="text" placeholder="异常波形" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="探测距离" prop="detectionDistance">
            <el-input v-model.trim="areaForm.detectionDistance" type="text" placeholder="探测距离" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="空洞大小" prop="holeSize">
            <el-input v-model.trim="areaForm.holeSize" type="text" placeholder="空洞大小" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="空洞类型" prop="holeType">
            <el-input v-model.trim="areaForm.holeType" type="text" placeholder="空洞类型" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="空洞图片" prop="holePicture">
            <upload-file v-model.trim="areaForm.holePicture" />
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="探测时间" prop="detectionTime">
            <el-date-picker
              v-model="areaForm.detectionTime"
              type="date"
              placeholder="探测时间"
              style="width: 100%;"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="风险等级" prop="riskLevel">
            <el-select v-model="areaForm.riskLevel" class="short-input" placeholder="风险等级" clearable style="width: 100%;">
              <el-option v-for="item in riskLevelList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="空洞经纬度" prop="lnglat">
            <el-input v-model.trim="areaForm.lnglat" type="text" placeholder="空洞经纬度" />
          </el-form-item>
        </el-col>
        <el-col v-if="dialogFormTyle !== 'detail'" :span="4">
          <div style="margin-left: 15px;" class="icon-map" @click="selectMap">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="地图选点"
              placement="top"
            >
              <svg-icon name="icon-xunjian" style="width: 35px;height: 35px;" />
            </el-tooltip>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="空洞位置">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="areaForm.position"
              placement="bottom"
            >
              <el-input v-model.trim="areaForm.position" type="textarea" maxlength="100" show-word-limit :rows="2" placeholder="空洞位置" />
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="是否进行治理">
            <el-select v-model="areaForm.isHandle" class="short-input" placeholder="是否进行治理" clearable style="width: 100%;">
              <el-option v-for="item in handlerList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="治理描述">
            <el-input v-model.trim="areaForm.gasLevel" type="textarea" show-word-limit :rows="3" maxlength="100" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="20">
          <el-form-item label="备注">
            <el-input v-model.trim="areaForm.gasLevel" type="textarea" show-word-limit :rows="3" maxlength="100" />
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div v-if="dialogFormTyle !== 'detail'">
          <el-button type="primary" @click="confirm(dataFormRef)">
            确认
          </el-button>
          <el-button type="info" @click="cancel">
            取消
          </el-button>
        </div>
        <div v-else>
          <el-button type="primary" @click="cancel">
            确认
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.icon-map {
  &:hover {
    cursor: pointer;
  }
}

.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
// 样式
.isDetail {
  ::v-deep {
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
      content: "";
      display: none;
    }
  }
}
</style>