<!--
  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 { getDictByCode } from '@/api/system/dict'
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(['confirm'])
const dialogFormVisible = ref(false) // 对话框是否显示
const activeName = ref('新建点位')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
}
const disabledBtn = ref(false)
// 新建点位
const dataFormRef = ref()
const dataForm = ref({
  tagNumber: '', // 安装位号
  longitude: '', // 经度
  latitude: '', // 纬度
  position: '', // 详细位置
  deptid: '', // 管理单位
  pipeCode: '', // 关联管线
  locationCategory: '',
}) // 表单
const rules: FormRules = {
  tagNumber: [{ required: true, message: '安装位号不能为空', trigger: ['blur', 'change'] }],
  longitude: [{ required: true, message: '经度不能为空', trigger: ['blur', 'change'] }],
  latitude: [{ 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'] }],
} // 前端校验规则

const mapRef = ref()
// 地图中心点
const mapCenter = ref<string[]>(['116.397428', '39.90923'])
// if (sessionStorage.getItem('longitude')) {
//   mapCenter.value = [sessionStorage.getItem('longitude') as string, sessionStorage.getItem('latitude') as string]
// }
// else {
//   mapCenter.value = ['116.397428', '39.90923']
// }

// 地图加载完成
const completeMap = () => {
  if (dataForm.value.longitude && dataForm.value.latitude) {
    mapRef.value.map?.setCenter([dataForm.value.longitude, dataForm.value.latitude])
    mapRef.value.addMarker({
      position: [dataForm.value.longitude, dataForm.value.latitude],
      content: '',
      label: '',
    })
  }
  // 加载中心点marker
  // mapRef.value.addMarker({
  //   position: mapCenter.value,
  //   content: '',
  //   label: '',
  // })
  // mapRef.value.getPosition(mapCenter.value, (data: string) => {
  //   dataForm.value.position = data
  // })
  // dataForm.value.longitude = mapCenter.value[0]
  // dataForm.value.latitude = mapCenter.value[1]
}
// 点击地图
const mapClick = (e: any) => {
  const location = [e.lnglat.getLng(), e.lnglat.getLat()]
  // console.log(location, e, 'location')
  mapRef.value.removeMarker()
  mapRef.value.addMarker({
    position: location,
    content: '',
    label: '',
  })
  // 填充坐标信息
  dataForm.value.longitude = e.lnglat.getLng()
  dataForm.value.latitude = e.lnglat.getLat()
  // console.log(mapRef.value.getPosition)
  mapRef.value.getPosition(location, (data: string) => {
    dataForm.value.position = data
  })
}
// 既有位置 -- 管线列表
// 表格数据
const list = ref([])
const total = ref(0)
const select = ref(-1) // 单选选中
// 初始展示列
const columns = ref<any>([
  { text: '安装位号', value: 'tagNumber', align: 'center' },
  { text: '管线编号', value: 'pipeCode', isRequired: true, align: 'center' },
  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
  { text: '详细位置', value: 'position', align: 'center' },
])
const loadingTable = ref(true)
//  查询条件
const listQuery = ref({
  limit: 5,
  offset: 1,
  tagNumber: '', // 位号
  pipeCode: '', // 编号
  deptId: '', // 管理单位
  position: '', // 详细位置
} as { [key: string]: string | number })
// 查询数据
const fetchData = () => {
  loadingTable.value = true
  getPositionListPage(listQuery.value).then((res) => {
    list.value = res.data.rows
    total.value = res.data.total
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}
fetchData()
// 重置查询条件f
const reset = () => {
  listQuery.value = {
    limit: 5,
    offset: 1,
    tagNumber: '', // 位号
    pipeCode: '', // 编号
    deptId: '', // 管理单位
    position: '', // 详细位置
  }
  fetchData()
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size: number; page: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  fetchData()
}
// 初始化对话框
const loading = ref(false)
const initDialog = (row: any) => {
  dialogFormVisible.value = true
  disabledBtn.value = false
  select.value = -1
  activeName.value === '新建点位'
  // mapRef.value.removeMarker()
  if (row.tagNumber && row.deptid) {
    // console.log('找到绑定关系')
    loading.value = true
    getPositionListPage({ tagNumber: row.tagNumber, deptid: row.deptid, offset: 1, limit: 1 }).then(res => {
      if (res.data.rows.length) {
        if (Boolean(res.data.rows[0].lngGaode && res.data.rows[0].latGaode)) {
          const location = [res.data.rows[0].lngGaode, res.data.rows[0].latGaode]
          mapRef.value.removeMarker()
          mapRef.value.addMarker({
            position: location,
            content: '',
            label: '',
          })
          dataForm.value.longitude = res.data.rows[0].lngGaode
          dataForm.value.latitude = res.data.rows[0].latGaode
          mapRef.value.map.setCenter(location)
          // mapRef.value.map.setZoom(9)
          // setTimeout(() => {
          //   mapRef.value.map.setZoom(14)
          // }, 500)
        }
        else {
          mapRef.value.removeMarker()
          dataForm.value.longitude = ''
          dataForm.value.latitude = ''
          // mapRef.value.map.setCenter([])
          ElMessage.warning('该点位缺少坐标位置，请选择坐标位置')
        }
        dataForm.value.position = res.data.rows[0].position
        dataForm.value.deptid = row.deptid
        dataForm.value.tagNumber = row.tagNumber
        dataForm.value.pipeCode = res.data.rows[0].pipeCode
      }
      else {
        mapRef.value.removeMarker()
        dataForm.value.longitude = ''
        dataForm.value.latitude = ''
        dataForm.value.position = ''
        ElMessage.warning('该点位缺少坐标位置，请选择坐标位置')
      }
      loading.value = false
    }).catch(() => {
      loading.value = false
    })
  }
  else {
    loading.value = false
    // console.log('没有找到绑定关系')
    dataForm.value.longitude = ''
    dataForm.value.latitude = ''
    dataForm.value.position = ''
    dataForm.value.deptid = ''
    dataForm.value.tagNumber = ''
    dataForm.value.pipeCode = ''
    // 判断是否同意获取当前位置
    const setInfo = (longitude: string | number, latitude: string | number) => {
      mapRef.value.map.setCenter([longitude, latitude])
      // mapRef.value.map.setZoom(9)
      // setTimeout(() => {
      //   mapRef.value.map.setZoom(14)
      // }, 500)
      dataForm.value.longitude = longitude as string
      dataForm.value.latitude = latitude as string
      mapRef.value.getPosition([longitude, latitude], (data: string) => {
        dataForm.value.position = data
      })
      mapRef.value.removeMarker()
      mapRef.value.addMarker({
        position: [longitude, latitude],
        content: '',
        label: '',
      })
    }
    setTimeout(() => {
      mapRef.value.getLocation((position: any) => {
        // console.log(position, 'positon')
        // console.log(position.position.lng, 'positon.positon.lng')
        setTimeout(() => {
          setInfo(position.position.lng, position.position.lat)
        })
      }, () => {
        if (!sessionStorage.getItem('longitude')) {
          getLocation()
          setTimeout(() => {
            if (sessionStorage.getItem('longitude')) {
              setInfo(sessionStorage.getItem('longitude') as string, sessionStorage.getItem('latitude') as string)
            }
            else {
              mapRef.value.map.setCenter(['116.397428', '39.90923'])
              // mapRef.value.map.setZoom(9)
              // setTimeout(() => {
              //   mapRef.value.map.setZoom(14)
              // }, 500)
            }
          })
        }
        else {
          setInfo(sessionStorage.getItem('longitude') as string, sessionStorage.getItem('latitude') as string)
        }
      })
    })

  }

}
const dialogRef = ref()
defineExpose({
  initDialog,
})
// 保存数据
const deptRef = ref()
const saveData = () => {
  if (activeName.value === '新建点位') {
    dataFormRef.value.validate((valid: any) => {
      if (valid) {
        disabledBtn.value = true
        // 先查询是否含有该位号
        getPositionListPage({
          tagNumber: dataForm.value.tagNumber,
          deptid: dataForm.value.deptid,
          offset: 1, limit: 1
        }).then(res => {
          disabledBtn.value = false
          if (res.data.rows.length) {
            //  已经含有
            ElMessageBox.confirm(
              '该点位已经存在，确认编辑该点位信息?',
              '提示',
              {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
              }
            ).then(() => {
              loading.value = true
              const data = res.data.rows[0]
              const result = {
                deptName: data.deptName,
                latGaode: data.latGaode,
                lngGaode: data.lngGaode,
                // pipeCode: data.pipeCode,
                // deptid: data.deptid,
                // position: data.position,
                // tagNumber: data.tagNumber,
                // longitude: data.lngGaode, // 经度
                // latitude: data.latGaode, // 纬度
                id: data.id,
                ...dataForm.value,
              }
              disabledBtn.value = true
              editPosition({
                deptid: dataForm.value.deptid,
                latGaode: dataForm.value.latitude,
                lngGaode: dataForm.value.longitude,
                pipeCode: dataForm.value.pipeCode,
                position: dataForm.value.position,
                tagNumber: dataForm.value.tagNumber,
                id: data.id,
                type: '3',
                locationCategory: dataForm.value.locationCategory
              }).then(res => {
                ElMessage.success('编辑点位成功')
                emits('confirm', result, 'single')
                dialogFormVisible.value = false
                loading.value = false
                disabledBtn.value = false
              }).catch(() => {
                loading.value = false
                disabledBtn.value = false
              })
            })
          }
          else {
            loading.value = true
            disabledBtn.value = true
            addPosition({
              deptid: dataForm.value.deptid,
              latGaode: dataForm.value.latitude,
              lngGaode: dataForm.value.longitude,
              pipeCode: dataForm.value.pipeCode,
              position: dataForm.value.position,
              tagNumber: dataForm.value.tagNumber,
              type: '3',
              locationCategory: dataForm.value.locationCategory
            }).then((res) => {
              if (res.code === 200) {
                ElMessage.success('新建点位成功')
                emits('confirm', {
                  ...dataForm.value,
                  deptName: deptRef.value.fetchDeptTree().length ? deptRef.value.fetchDeptTree().filter((item: any) => item.id === dataForm.value.deptid).name : '',
                  latGaode: dataForm.value.latitude,
                  lngGaode: dataForm.value.longitude,
                  id: res.data,
                }, 'single')
                dialogFormVisible.value = false
                // dialogRef.value.close()
                loading.value = false
                disabledBtn.value = false
              }
            }).catch(() => {
              loading.value = false
              disabledBtn.value = false
            })
          }
        })
          .catch(() => {
            disabledBtn.value = false
          })

      }
    })
  }
  else {
    if (select.value === -1) {
      ElMessage.warning('请选择数据')
      return
    }
    emits('confirm', list.value[select.value], 'single')
    dialogFormVisible.value = false
    // dialogRef.value.close()
  }
}
const cancel = () => {
  dialogFormVisible.value = false
  // dialogRef.value.close()
}

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="选择安装位置" append-to-body width="70%">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-loading="loading" label="新建点位" name="新建点位">
        <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
          <el-row :gutter="24">
            <el-col :span="6">
              <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="6">
              <el-form-item label="位置类别">
                <el-select v-model="dataForm.locationCategory" placeholder="位置类别" style="width: 100%;" clearable 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 label="关联管线">
                <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="6">
              <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="longitude">
                <el-input v-model.trim="dataForm.longitude" type="text" placeholder="经度" style="width: 100%;"
                  clearable />
              </el-form-item>
              <el-form-item label="纬度" prop="latitude">
                <el-input v-model.trim="dataForm.latitude" type="text" placeholder="纬度" style="width: 100%;"
                  clearable />
              </el-form-item>
            </el-col>
            <el-col :span="16" v-if="dialogFormVisible && activeName === '新建点位'">
              <!-- 地图 -->
              <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>
      </el-tab-pane>
      <el-tab-pane label="既有位置" name="既有位置">
        <search-area :need-clear="true" @search="fetchData" @clear="reset">
          <search-item>
            <el-input v-model.trim="listQuery.tagNumber" placeholder="安装位号" clearable style="width: 162px;" />
          </search-item>
          <search-item>
            <el-input v-model.trim="listQuery.pipeCode" placeholder="管线编号" clearable style="width: 162px;" />
          </search-item>
          <search-item>
            <dept-select v-model="listQuery.deptId" placeholder="管理单位" :clearable="true" style="width: 162px;" />
          </search-item>
          <search-item>
            <el-input v-model.trim="listQuery.position" placeholder="详细位置" clearable style="width: 162px;" />
          </search-item>
        </search-area>
        <table-container>
          <!-- 查询结果Table显示 -->
          <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
            @change="changePage">
            <template #preColumns>
              <el-table-column label="选择" width="55" align="center">
                <template #default="scope">
                  <el-radio v-model="select" :label="scope.$index" class="radio" />
                </template>
              </el-table-column>
              <el-table-column label="序号" width="75" align="center">
                <template #default="scope">
                  {{ (listQuery.offset as number - 1) * (listQuery.limit as number) + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </table-container>
      </el-tab-pane>
    </el-tabs>
    <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>