<!-- 管线占压详情 -->
<script lang="ts" setup name="GanDetail">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import mapDialog from './mapDialog.vue'
import { getDictByCode } from '@/api/system/dict'
import { addOver, editOver } from '@/api/page/database'
import { getLocation } from '@/api/map'
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<{ [key: string]: string }>({
  serialNumber: '', // 序号
  hiddenDangerNumber: '', // 隐患标号
  primaryClassification: '', // 一级分类
  secondaryClassification: '', // 二级分类
  hiddenDangerDescription: '', // 隐患描述
  pipeNetworkType: '', // 管网类型
  equipmentNumber: '', // 编码
  location: '', // 地点
  longitude: '', // 经度
  latitude: '', // 纬度
  whetherItIsInTheCommunity: '', // 是否在小区内
  occupyingType: '', // 小区内占压类型
  communityName: '', // 小区名称
  discoveryTime: '', // 发现时间
  hiddenDangerLevel: '', // 隐患等级
  responsibleManagementEnterprise: '', // 责任管理企业
  personInCharge: '', // 责任人
  plannedEliminationTimeLimit: '', // 计划消除时限
  governanceSituation: '', // 治理情况
  eliminationTime: '', // 消除时间
  propertyRightNature: '', // 产权性质
  remark: '', // 备注
  occupiedEnterprisePersonalName: '', // 占压企业/个人名称
  occupationUnitProperty: '', // 占压单位性质
  dateOfConstructionOfTheOccupation: '', // 占压物建成年份
  anyApprovalDocumentsForTheConstruction: '', // 有无占压物批准文件
  useOfTheOccupation: '', // 占压物用途
  descriptionOfTheOccupation: '', // 占压物描述
  areThereRegularStaffActivities: '', // 有无经常性人员活动
  areaOfOccupation: '', // 占压物面积
  whetherThereAreConditionsForRelocation: '', // 占压物面积
  yearOfUse: '', // 年代类别
  yearOfCommencementOfOperation: '', // 年份
  isThereAnyPipelineConstructionApprovalDocument: '', // 有无建设批准文件
  pipelineDepth: '', // 管线埋深
  pipeDiameter: '', // 管径
  linePressure: '', // 管线压力
  pipelineLength: '', // 占压管线长度
  whetherItIsIncludedInTheTechnicalReformPlan: '', // 是否纳入技改计划
  technicalTransformationProjectNumber: '', // 技改项目号
  preventionAndControlMeasures: '', // 防控措施
  governancePlan: '', // 治理计划
  purchaseRestrictionOrGasShutdown: '', // 限购或停气情况
  nameOfTheDiversionProject: '', // 改线工程名称
  numberOfTheDiversionProject: '', // 改线工程编号
  progressStatisticsOfTheDiversionProject: '', // 改线进度统计
  contactPerson: '', // 与区县对接联系人
  superOccupyingPressureClassification: '', // 特级占压分类情况
}) // 表单
const rules: FormRules = {
  hiddenDangerNumber: [{ required: true, message: '隐患编号必填', trigger: ['blur', 'change'] }],
  primaryClassification: [{ required: true, message: '一级分类必填', trigger: ['blur', 'change'] }],
  secondaryClassification: [{ required: true, message: '二级分类必填', trigger: ['blur', 'change'] }],
  hiddenDangerDescription: [{ required: true, message: '隐患描述必填', trigger: ['blur', 'change'] }],
  pipeNetworkType: [{ required: true, message: '管网类型必填', trigger: ['blur', 'change'] }],
  equipmentNumber: [{ required: true, message: '编码必填', trigger: ['blur', 'change'] }],
  location: [{ required: true, message: '地点必填', trigger: ['blur', 'change'] }],
  discoveryTime: [{ required: true, message: '发现时间必选', trigger: ['blur', 'change'] }],
  hiddenDangerLevel: [{ required: true, message: '隐患等级必选', trigger: ['blur', 'change'] }],
  responsibleManagementEnterprise: [{ required: true, message: '责任管理企业必填', trigger: ['blur', 'change'] }],
  personInCharge: [{ required: true, message: '责任人必填', trigger: ['blur', 'change'] }],
  governanceSituation: [{ required: true, message: '治理情况必填', trigger: ['blur', 'change'] }],
  serialNumber: [{ required: true, message: '序号必填', trigger: ['blur', 'change'] }],
} // 前端校验规则
// 获取字典
const whetherItIsInTheCommunity = ref<{ name: string;value: string;id: string }[]>() // 是否在小区内
const hiddenDangerLevel = ref<{ name: string;value: string;id: string }[]>() // 隐患等级
const fetchDict = () => {
  getDictByCode('isAlarm').then((res) => {
    whetherItIsInTheCommunity.value = res.data
  })
  getDictByCode('hiddenDangerLevel').then((res) => {
    hiddenDangerLevel.value = res.data
  })
}
fetchDict()

// 重置
const resetForm = () => {
  areaForm.value
  for (const i in areaForm.value) {
    areaForm.value[i] = ''
  }
  nextTick(() => {
    dataFormRef.value?.clearValidate()
  })
}
// 取消
const cancel = () => {
  resetForm()
  dialogFormVisible.value = false
}
// 保存数据
const saveData = () => {
  // addHole
  // editHole
  (dialogFormTyle.value === 'create' ? addOver : editOver)(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]
  getLocation(location.join()).then((res) => {
    if (res.data.info === 'OK') {
      areaForm.value.location = res.data.regeocode.formatted_address
    }
    else {
      areaForm.value.location = '/'
    }
  })
}
// 初始化对话框
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="65%" top="10vh">
    <!-- 地图选点 -->
    <map-dialog ref="mapRef" @confirm="confirmMap" />
    <el-form ref="dataFormRef" :class="[dialogFormTyle === 'detail' ? 'isDetail' : '']" :disabled="dialogFormTyle === 'detail'" :rules="rules" :model="areaForm" label-position="right" label-width="160px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="序号" prop="serialNumber">
            <el-input v-model.trim="areaForm.serialNumber" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="隐患编号" prop="hiddenDangerNumber">
            <el-input v-model.trim="areaForm.hiddenDangerNumber" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="一级分类" prop="primaryClassification">
            <el-input v-model.trim="areaForm.primaryClassification" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="二级分类" prop="secondaryClassification">
            <el-input v-model.trim="areaForm.secondaryClassification" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="隐患描述" prop="hiddenDangerDescription">
            <el-input v-model.trim="areaForm.hiddenDangerDescription" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="管网类型" prop="pipeNetworkType">
            <el-input v-model.trim="areaForm.pipeNetworkType" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管网、设备编码" prop="equipmentNumber">
            <el-input v-model.trim="areaForm.equipmentNumber" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地点" prop="location">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="areaForm.location"
              placement="bottom"
            >
              <el-input v-model.trim="areaForm.location" type="text" />
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="所在街乡">
            <el-input v-model.trim="areaForm.holeLeve" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="地点">
            <el-input v-model.trim="areaForm.holeValue" type="text" />
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="经度">
            <el-input v-model.trim="areaForm.longitude" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="纬度">
            <el-input v-model.trim="areaForm.latitude" type="text" />
          </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="8">
          <el-form-item label="是否在小区内">
            <!-- <el-input v-model.trim="areaForm.whetherItIsInTheCommunity" type="text" /> -->
            <el-select v-model="areaForm.whetherItIsInTheCommunity" class="short-input" clearable style="width: 100%;">
              <el-option v-for="item in whetherItIsInTheCommunity" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="小区内占压类型">
            <el-input v-model.trim="areaForm.occupyingType" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="小区名称">
            <el-input v-model.trim="areaForm.communityName" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="发现时间" prop="discoveryTime">
            <el-date-picker
              v-model="areaForm.discoveryTime"
              type="datetime"
              style="width: 100%;"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="隐患等级" prop="hiddenDangerLevel">
            <!-- <el-input v-model.trim="areaForm.gasValue" type="text" /> -->
            <el-select v-model="areaForm.hiddenDangerLevel" class="short-input" clearable style="width: 100%;">
              <el-option v-for="item in hiddenDangerLevel" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管理责任企业" prop="responsibleManagementEnterprise">
            <el-input v-model.trim="areaForm.responsibleManagementEnterprise" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="责任人" prop="personInCharge">
            <el-input v-model.trim="areaForm.personInCharge" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划消除时限" prop="plannedEliminationTimeLimit">
            <el-input v-model.trim="areaForm.plannedEliminationTimeLimit" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="治理情况" prop="governanceSituation">
            <!-- <el-input v-model.trim="areaForm.governanceSituation" type="text" /> -->
            <el-select v-model="areaForm.governanceSituation" class="short-input" clearable style="width: 100%;">
              <el-option label="已治理" value="已治理" />
              <el-option label="未治理" value="未治理" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="消除时间">
            <el-date-picker
              v-model="areaForm.eliminationTime"
              type="datetime"
              style="width: 100%;"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产权性质">
            <el-input v-model.trim="areaForm.propertyRightNature" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注">
            <el-input v-model.trim="areaForm.remark" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="占压企业/个人名称">
            <el-input v-model.trim="areaForm.occupiedEnterprisePersonalName" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="占压单位性质">
            <el-input v-model.trim="areaForm.occupationUnitProperty" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="占压物建成年代">
            <el-input v-model.trim="areaForm.dateOfConstructionOfTheOccupation" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="有无占压物建设批准文件">
            <!-- <el-input v-model.trim="areaForm." type="text" /> -->
            <el-select v-model="areaForm.anyApprovalDocumentsForTheConstruction" class="short-input" clearable style="width: 100%;">
              <el-option label="有" value="1" />
              <el-option label="无" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="占压物用途">
            <el-input v-model.trim="areaForm.useOfTheOccupation" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="占压物描述">
            <el-input v-model.trim="areaForm.descriptionOfTheOccupation" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="有无经常性人员活动">
            <el-input v-model.trim="areaForm.areThereRegularStaffActivities" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="占压物面积(m²)">
            <el-input v-model.trim="areaForm.areaOfOccupation" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否具备改移条件">
            <!-- <el-input v-model.trim="areaForm.whetherThereAreConditionsForRelocation" type="text" /> -->
            <el-select v-model="areaForm.whetherThereAreConditionsForRelocation" class="short-input" clearable style="width: 100%;">
              <el-option v-for="item in whetherItIsInTheCommunity" :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="8">
          <el-form-item label="年代">
            <el-input v-model.trim="areaForm.yearOfCommencementOfOperation" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类别">
            <el-input v-model.trim="areaForm.yearOfUse" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有无管线建设批准文件">
            <!-- <el-input v-model.trim="areaForm.isThereAnyPipelineConstructionApprovalDocument" type="text" /> -->
            <el-select v-model="areaForm.isThereAnyPipelineConstructionApprovalDocument" class="short-input" clearable style="width: 100%;">
              <el-option label="有" value="1" />
              <el-option label="无" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="管线埋深(m)">
            <el-input v-model.trim="areaForm.pipelineDepth" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管径">
            <el-input v-model.trim="areaForm.pipeDiameter" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管线压力">
            <el-input v-model.trim="areaForm.linePressure" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="占压管线长度(m)">
            <el-input v-model.trim="areaForm.pipelineLength" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否纳入技改计划">
            <!-- <el-input v-model.trim="areaForm.whetherItIsIncludedInTheTechnicalReformPlan" type="text" /> -->
            <el-select v-model="areaForm.whetherItIsIncludedInTheTechnicalReformPlan" class="short-input" clearable style="width: 100%;">
              <el-option v-for="item in whetherItIsInTheCommunity" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="技改项目号">
            <el-input v-model.trim="areaForm.technicalTransformationProjectNumber" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="防控措施">
            <el-input v-model.trim="areaForm.preventionAndControlMeasures" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="治理计划">
            <el-input v-model.trim="areaForm.governancePlan" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="限购或停气情况">
            <el-input v-model.trim="areaForm.purchaseRestrictionOrGasShutdown" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="改线工程名称">
            <el-input v-model.trim="areaForm.nameOfTheDiversionProject" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="改线工程编号">
            <el-input v-model.trim="areaForm.numberOfTheDiversionProject" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="改线进展统计">
            <el-input v-model.trim="areaForm.progressStatisticsOfTheDiversionProject" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="与区县对接联系人">
            <el-input v-model.trim="areaForm.contactPerson" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="特级占压分类情况">
            <el-input v-model.trim="areaForm.superOccupyingPressureClassification" type="text" />
          </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>