<!--
  Description: 安装位置-管线
  Author: 李亚光
  Date: 2024-09-02
 -->
<script lang="ts" setup name="LocaltionForWell">
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormRules, TabsPaneContext } from 'element-plus'
import { addPosition, editPosition, getPositionListPage } from '@/api/home/device/device'
import { getPiePleListPage } from '@/api/home/ledger/pipeline'
import AMap from '@/components/map/index.vue'
import { getDictByCode } from '@/api/system/dict'
import { getLocation } from '@/utils/getLocation'
const emits = defineEmits(['refresh'])
const dialogFormVisible = ref(false) // 对话框是否显示
const disabledBtn = ref(false)
const dialogStatus = ref('') // 对话框类型：create,update
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新增',
} // 表头显示标题
// 新建点位
const dataFormRef = ref()
const dataForm = ref<{ [key: string]: string }>({
  tagNumber: '', // 安装位号
  lngGaode: '', // 经度
  latGaode: '', // 纬度
  position: '', // 详细位置
  deptid: '', // 管理单位
  pipeCode: '', // 关联管线
  ledgerName: '',
  type: '3',
  id: '',
  locationCategory: ''
}) // 表单
const rules: FormRules = {
  tagNumber: [{ required: true, message: '安装位号不能为空', trigger: ['blur', 'change'] }],
  lngGaode: [{ required: true, message: '经度不能为空', trigger: ['blur', 'change'] }],
  latGaode: [{ required: true, message: '纬度不能为空', trigger: ['blur', 'change'] }],
  position: [{ required: true, message: '详细位置不能为空', trigger: ['blur', 'change'] }],
  deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
  // pipeCode: [{ required: true, message: '关联管线不能为空', trigger: ['blur', 'change'] }],
  // ledgerName: [{ required: true, message: '闸井名称不能为空', trigger: ['blur', 'change'] }],
  locationCategory: [{ required: true, message: '位置类别不能为空', trigger: ['blur', 'change'] }],
} // 前端校验规则

const mapRef = ref()
// 地图中心点
const mapCenter = ref<string[]>(['116.397428', '39.90923'])
// 地图加载完成
const completeMap = () => {
  if (dataForm.value.lngGaode && dataForm.value.latGaode) {
    mapRef.value.map?.setCenter([dataForm.value.lngGaode, dataForm.value.latGaode])
    mapRef.value.addMarker({
      position: [dataForm.value.lngGaode, dataForm.value.latGaode],
      content: '',
      label: '',
    })
  }
}
// 点击地图
const mapClick = (e: any) => {
  const location = [e.lnglat.getLng(), e.lnglat.getLat()]
  mapRef.value.removeMarker()
  mapRef.value.addMarker({
    position: location,
    content: '',
    label: '',
  })
  // 填充坐标信息
  dataForm.value.lngGaode = e.lnglat.getLng()
  dataForm.value.latGaode = e.lnglat.getLat()
  mapRef.value.getPosition(location, (data: string) => {
    dataForm.value.position = data
  })
}

// 初始化对话框
const initDialog = (type: string, row: any) => {
  dialogFormVisible.value = true
  disabledBtn.value = false
  dialogStatus.value = type
  if (type === 'add') {
    dataForm.value = {
      tagNumber: '', // 安装位号
      lngGaode: '', // 经度
      latGaode: '', // 纬度
      position: '', // 详细位置
      deptid: '', // 管理单位
      pipeCode: '', // 关联管线
      ledgerName: '',
      type: '1',
      id: '',
      locationCategory: ''
    }
    dataFormRef.value?.resetFields()
  }
  else {
    dataFormRef.value?.resetFields()
    for (const i in dataForm.value) {
      dataForm.value[i] = row[i]
    }
  }

}
defineExpose({
  initDialog,
})
// 保存数据
const deptRef = ref()
const saveData = () => {
  if (dataFormRef) {
    dataFormRef.value?.validate((valid: boolean) => {
      if (valid) {
        disabledBtn.value = true;
        if (dataForm.value.type === '1') {
          dataForm.value.pipeCode = ''
        }
        else if (dataForm.value.type === '3') {
          dataForm.value.ledgerName = ''
        }
        (dialogStatus.value === 'add' ? addPosition : editPosition)(dataForm.value).then(res => {
          ElMessage.success('操作成功')
          emits('refresh')
          dialogFormVisible.value = false
          disabledBtn.value = false
        }).catch(() => {
          disabledBtn.value = false
        })
      }
    })
  }

}
const cancel = () => {
  dialogFormVisible.value = false
}

const pipeList = ref<{ id: string; name: string; value: string }[]>([]) // 管线列表
const locationTypeList = ref<{ id: string; name: string; value: string }[]>([])
// 获取字典
const fetchDict = () => {
  getPiePleListPage({ offset: 1, limit: 99999 }).then((res) => {
    pipeList.value = res.data.rows.map((item: any) => ({
      name: item.pipeCode,
      id: item.pipeCode,
      value: item.pipeCode,
    }))
  })
  getDictByCode('locationType').then((res) => {
    locationTypeList.value = res.data
  })
}
fetchDict()
</script>

<template>
  <el-dialog ref="dialogRef" v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}位置`" append-to-body
    width="70%">
    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="安装位号" prop="tagNumber">
            <el-input v-model.trim="dataForm.tagNumber" type="text" placeholder="安装位号" style="width: 100%;" clearable />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="5">
          <el-form-item label="监测类型" prop="type">
            <el-select v-model="dataForm.type" placeholder="监测类型" style="width: 100%;" filterable>
              <el-option label="管线监测点" value="3" />
              <el-option label="其他监测点" value="1" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="位置类别" prop="locationCategory">
            <el-select v-model="dataForm.locationCategory" placeholder="监测类型" style="width: 100%;" filterable>
              <el-option v-for="item in locationTypeList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <!--<el-col :span="6">
          <el-form-item v-if="dataForm.type === '1'" label="闸井名称" prop="ledgerName">
            <el-input v-model.trim="dataForm.ledgerName" type="text" placeholder="闸井名称" style="width: 100%;"
              clearable />
          </el-form-item>
          <el-form-item v-if="dataForm.type === '3'" label="关联管线" prop="pipeCode">
            <el-select v-model="dataForm.pipeCode" placeholder="关联管线" style="width: 100%;" clearable filterable>
              <el-option v-for="item in pipeList" :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="deptid">
            <dept-select ref="deptRef" v-model="dataForm.deptid" placeholder="管理单位" :clearable="true"
              style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="详细位置" prop="position">
            <el-input v-model.trim="dataForm.position" type="textarea" :rows="6" placeholder="详细位置" style="width: 100%;"
              clearable />
          </el-form-item>
          <el-form-item label="经度" prop="lngGaode">
            <el-input v-model.trim="dataForm.lngGaode" type="text" placeholder="经度" style="width: 100%;" clearable />
          </el-form-item>
          <el-form-item label="纬度" prop="latGaode">
            <el-input v-model.trim="dataForm.latGaode" type="text" placeholder="纬度" style="width: 100%;" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="16" v-if="dialogFormVisible">
          <!-- 地图 -->
          <a-map ref="mapRef" :show-pieple-layer="true" :center="mapCenter" :zoom="14" @complete="completeMap"
            @map-click="mapClick" style="width: 100%; height: 240px;" />
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="disabledBtn" :disabled="disabledBtn" type="primary" @click="saveData">
          确认
        </el-button>
        <el-button @click="cancel">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

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