<template>
  <div id="PointAndLine">
    <div class="items-content">
      <div class="contentitem" v-for="p in GXOBJ" :key="p" v-show="p.name != 'geometry'" :class="[p.type]">
        <el-tooltip class="item" effect="light" placement="top" :content="p.name">
          <div class="name gxname">{{ p.name }}</div>
        </el-tooltip>
        <div v-if="p.type == 'img'">
          <div class="">
            <el-image
              v-for="i in p.value.split(',')"
              :key="i"
              style="width: 100px; height: 100px; margin-left: 5px"
              :src="i"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="p.value.split(',')"
              :initial-index="4"
              fit="cover"
            />
          </div>
        </div>
        <el-tooltip
          v-else
          popper-class="custom-tooltip"
          class="item"
          effect="light"
          placement="top"
          :content="typeof p.value == 'number' ? p.value.toFixed(3) : p.value || '-'"
        >
          <div class="value gxvalue">：{{ typeof p.value == 'number' ? p.value.toFixed(3) : p.value || '-' }}</div>
        </el-tooltip>
      </div>

      <div class="buttoncss" v-if="typearr.includes(dataCode)">
        <el-button type="primary" @click="guanxianAnalysis('up')">上游分析</el-button>
        <el-button type="primary" @click="guanxianAnalysis('down')">下游分析</el-button>
        <!-- <el-button type="primary" @click="guanxianAnalysis('updown')" >上下游分析</el-button>
              <el-button type="primary" @click="guanxianAnalysis('connectivity')">连通性分析</el-button> -->
        <!-- <el-button type="primary"  @click="guanxianAnalysis('question')">问题分析</el-button> -->
      </div>
    </div>
  </div>
</template>

<script setup name="PointAndLine">
import bus from '@/bus';
import { downStreamAnalyse, upStreamAnalyse, connectAnalyse } from '@/api/MonitorAssetsOnMap';
const { proxy } = getCurrentInstance();

const props = defineProps({
  // 数据id
  dataID: {
    type: String,
  },
  dataCode: {
    type: String,
  },
  // 默认打开tabs的key
  RefreshName: {
    type: String,
  },
  tabsType: {
    type: String,
  },
  typeName: {
    type: String,
  },
  Getproperties: {
    type: Object,
  },
});

const typearr = ['pipeline_point', 'pipeline_info', 'pipeline_info_text'];

const setnamobj = ref([]);
const GXOBJ = ref();
// [
//   { name: '湖泊名称', value: '' },
//   { name: '湖泊类型', value: '' },
//   { name: '所属水系', value: '' },
//   { name: '境内面积km²', value: '' },
//   { name: '总面积km²', value: '' },
//   { name: '湖泊库容(万m³)', value: '' },
//   { name: '总库容(万m³)', value: '' },
//   { name: '岸线长度km', value: '' },
//   { name: '水质目标', value: '' },
//   { name: '常水位(m)', value: '' },
//   { name: '生态水位(m)', value: '' },
//   { name: '控制水位(m)', value: '' },
//   { name: '管理部门', value: '', type: '' },
//   { name: '描述', value: '', type: 'textarea' },
//   { name: '图片', value: '1,2', type: 'img' },
// ]
/**
 * 根据经纬度和属性区分名称
 * @param {Object} properties - 包含其他属性的对象
 */
function Distinguishnames() {
  console.log('props', props);
  let properties = cleanKeyNames(props.Getproperties);
  console.log('properties', properties);
  // 假设GXOBJ.value 与本函数无关，如果它也需要被清空或重置，可以取消下面这行的注释
  GXOBJ.value = [];
  // 清除现有的 setnamobj.value（如果需要的话）
  setnamobj.value = [];
  switch (props.dataCode) {
    case 'pipeline_info_text':
      setnamobj.value = [
        '管段编码',
        '起始井号',
        '终止井号',
        '管线材质',
        '管径',
        '起点埋深',
        '终点埋深',
        '起点高程',
        '终点高程',
        '管段类型',
        '道路名称',
        '管网归属',
        '测区',
        '维护管理单位',
        '管段长度',
      ];
      break;
    case 'pipeline_info':
      setnamobj.value = [
        '管段编码',
        '起始井号',
        '终止井号',
        '管线材质',
        '管径',
        '起点埋深',
        '终点埋深',
        '起点高程',
        '终点高程',
        '管段类型',
        '道路名称',
        '管网归属',
        '测区',
        '维护管理单位',
        '管段长度',
      ];
      break;
    case 'pipeline_point':
      let nameobj = [
        '设施编号',
        '地面高程',
        '井盖尺寸',
        '井盖材质',
        '井深',
        '井径',
        '特征',
        '类型',
        '附属物',
        '管网归属',
        '维护管理单位',
        '道路名称',
      ];

      let dmgc = '';
      let js = '';
      // 井底高程：地面高程-井深

      for (var k in properties) {
        if (nameobj.includes(k)) {
          GXOBJ.value.push({ name: k, value: properties[k] });
        } //
        if (k == '地面高程') {
          dmgc = properties[k];
        }
        if (k == '井深') {
          js = properties[k];
        }
      }
      GXOBJ.value.push({ name: '井底高程', value: dmgc - js || 0 });

      break;
    case '已建管网测点':
      setnamobj.value = ['站点名称', '站点编号'];

      GXOBJ.value = [
        { name: '站点名称', value: properties.st_name },
        { name: '站点编号', value: properties.st_code },
      ];

      break;
    case 'point':
      setnamobj.value = [
        '管段编码',
        '起始井号',
        '终止井号',
        '管线材质',
        '管径',
        '起点埋深',
        '终点埋深',
        '起点高程',
        '终点高程',
        '管段类型',
        '道路名称',
        '管网归属',
        '测区',
        '维护管理单位',
        '管段长度',
        '大管套小管',
        '断头管',
        '雨污混接',
        '管网逆坡',
      ];

      GXOBJ.value = [
        { name: '所在排水系统', value: properties.drainageSystem },
        { name: '起始井号', value: properties.startPointNumber },
        { name: '终止井号', value: properties.endPointNumber },
        { name: '管线材质', value: properties.pipelineTexture },
        { name: '管径', value: properties.pipelineDiameter },
        { name: '起点埋深', value: properties.startGroundDepth },
        { name: '终点埋深', value: properties.endGroundDepth },
        { name: '起点高程', value: properties.startCopNoseElevation },
        { name: '终点高程', value: properties.endCopNoseElevation },
        { name: '管段类型', value: properties.sectionType },
        { name: '道路名称', value: properties.roadName },
        { name: '管网归属', value: properties.ownershipUnits },
        { name: '管段长度', value: properties.pipelineLength },
        { name: '建设年代', value: properties.constructionDate },
        // { name: "大管套小管", value: properties.bigCoverSmallReason  },
        // { name: "断头管", value: properties.cutOffReason},
        // { name: "雨污混接",  value: properties.mixReason  },
        // { name: "管网逆坡",  value: properties.reverseSlopeReason },
        // { name: "流向错误", value: properties.flowDirectionWrongReason  },
      ];
      if (properties.bigCoverSmallReason) {
        GXOBJ.value = [...GXOBJ.value, { name: '大管套小管', value: properties.bigCoverSmallReason }];
      }
      if (properties.cutOffReason) {
        GXOBJ.value = [...GXOBJ.value, { name: '断头管', value: properties.cutOffReason }];
      }
      if (properties.mixReason) {
        GXOBJ.value = [...GXOBJ.value, { name: '雨污混接', value: properties.mixReason }];
      }
      if (properties.reverseSlopeReason) {
        GXOBJ.value = [...GXOBJ.value, { name: '管网逆坡', value: properties.reverseSlopeReason }];
      }
      // if (properties.flowDirectionWrongReason) {
      //   GXOBJ.value = [...GXOBJ.value, { name: '流向错误', value: properties.flowDirectionWrongReason }];
      // }
      // 流向错误
      break;
    default:
      // 如果没有匹配到任何id，可以设置默认值或空数组
      setnamobj.value = [];
      console.log('未知的id:', id);
      return;
  }

  setobj(properties);
}

function setobj(properties) {
  console.log('aaaa', properties, setnamobj.value);
  if (properties) {
    for (var k in properties) {
      if (setnamobj.value.includes(k)) {
        GXOBJ.value.push({ name: k, value: properties[k] });
      }
    }

    // 创建一个映射，用于快速查找setnamobj.value中元素的索引
    let indexMap = {};
    setnamobj.value.forEach((name, index) => {
      indexMap[name] = index;
    });

    // 使用sort方法和自定义比较函数来排序GXOBJ.value
    GXOBJ.value.sort((a, b) => {
      return indexMap[a.name] - indexMap[b.name];
    });
  }
}

function cleanKeyNames(obj) {
  let newObj = {};

  // 遍历输入对象的所有属性
  for (let key in obj) {
    // 假设“清理”过程就是去除键名中的换行符（尽管在标准情况下这是不必要的）
    let cleanKey = key.replace(/\n/g, ''); // 去除换行符

    // 将清理后的键名和原始属性值复制到新对象中
    newObj[cleanKey] = obj[key];
  }

  return newObj;
}

const key = '问题管线';
const isConnectivity = ref(false); //记录是否选择连通性分析
const oldConnectivityData = ref({}); //上一个择连通性分析数据
const guanxianAnalysis = async type => {
  let properties = props.Getproperties;

  // properties['起始外业点号'] = 'I2206PYS1010172';
  // properties['终止外业点号'] = 'I2206PYS1010221';
  console.log('properties123', properties);
  console.log('type123', type);
  let results = {};
  bus.emit('removeMapDatas', [key]);
  const methods = {
    up: upStreamAnalyse,
    down: downStreamAnalyse,
    connectivity: connectAnalyse,
    question: upStreamAnalyse,
  }[type];
  if (!isConnectivity.value && type == 'connectivity') {
    oldConnectivityData.value = properties;
    isConnectivity.value = true;
    proxy.$modal.msgWarning('请再次选择需要连通性分析的另一条管线或管点进行分析');
    bus.emit('closedia', [key]);

    return;
  } else if (isConnectivity.value) {
    //流通性分析 第二条管网
    proxy.$modal.msgSuccess('正在进行流通性分析······');

    isConnectivity.value = false;
    results = await methods({
      startPointNumber: oldConnectivityData.value['起始外业点号'] || properties['外业点号'],
      endPointNumber: properties['终止外业点号'] || properties['外业点号'],
    });
    oldConnectivityData.value = {};

    gx_DataFun(results, properties, type);
    bus.emit('closedia', [key]);
  } else if (type == 'updown') {
    let params = {
      startPointNumber: properties['起始外业点号'] || properties['外业点号'],
      endPointNumber: properties['终止外业点号'] || properties['外业点号'],
    };
    await upStreamAnalyse(params).then(res => {
      console.log('上下游1', res);
      gx_DataFun(res, properties, type);
    });
    await downStreamAnalyse(params).then(res => {
      console.log('上下游2', res);
      gx_DataFun(res, properties, type);
    });
  } else {
    oldConnectivityData.value = {};
    isConnectivity.value = false;
    proxy.$modal.msgSuccess('正在分析中······');
    results = await methods({
      startPointNumber: properties['起始外业点号'] || properties['外业点号'],
      endPointNumber: properties['终止外业点号'] || properties['外业点号'],
    });
    gx_DataFun(results, properties, type);
  }
};

// 管线分析处理方法
const gx_DataFun = (results, properties, type) => {
  proxy.$modal.msgSuccess('分析完成！');

  // debugger;
  const properKs = [
    { key: 'bigCoverSmallFlag', value: '大管套小管' },
    { key: 'cutOffFlag', value: '断头管' },
    { key: 'mixFlag', value: '雨污混接' },
    { key: 'reverseSlopeFlag', value: '管网逆坡' },
    // { key: 'flowDirectionWrongFlag', value: '流向错误' },
  ];
  //问题管线
  // errorText(i.properties)
  const questionLinePoints = results.data.pipelineInfoList
    .filter(i => properKs.map(k => eval(i[k.key])).filter(Boolean)[0])
    .map(i => ({
      ...turf.center(turf.feature(Terraformer.WKT.parse(i.geometrys))),
      properties: i,
    }))
    .map(i => ({
      ...i,
      properties: {
        ...i.properties,
        name: `${key}:\n${properKs
          .map((k, o) => eval(i.properties[k.key]) && k.value)
          .filter(Boolean)
          .map((k, o) => o + 1 + '、' + k)
          .join('\n')}`,
        geometrys: Terraformer.WKT.convert(i.geometry),
      },
    }));
  const siteKey = 'rainwater_pipeline_water_level';
  results.data.siteList = [
    {
      id: '2',
      stCode: '0236190002',
      name: '管网（雨水）楚平路与康福路交叉口',
      geometry: 'POINT(114.38523754387444 30.481550658487215)',
      pointType: siteKey,
      recordTime: '',
      siteData: {
        siteType: 'flow',
        monitorTargetType: 'pipeline',
        stName: '管网（雨水）楚平路与康福路交叉口',
        stCode: '0236190002',
        tt: '2024-10-31 10:35:00',
        ut: '2024-10-31 10:35:21',
        installHeight: '',
        onlineStatus: 'online',
        faultStatus: 'normal',
        dynamicTableMonitor: 'cond,cq1,sbl1,va,z',
        monitorPropertyList: [
          {
            monitorCode: 'z',
            monitorName: '水位1',
            unit: '(米)',
          },
          {
            monitorCode: 'va',
            monitorName: '流速1',
            unit: '(米/秒)',
          },
          {
            monitorCode: 'sbl1',
            monitorName: '小时水量1',
            unit: '(立方米/小时)',
          },
          {
            monitorCode: 'cq1',
            monitorName: '累计流量1',
            unit: '(立方米)',
          },
          {
            monitorCode: 'cond',
            monitorName: '电导率',
            unit: '(微西门/厘米)',
          },
        ],
        monitorValueList: [
          {
            monitorCode: 'z',
            monitorValue: '0.092',
            tt: '2024-11-04 17:00:00',
          },
          {
            monitorCode: 'va',
            monitorValue: '0.0',
            tt: '2024-11-04 17:00:00',
          },
          {
            monitorCode: 'sbl1',
            monitorValue: '0.0',
            tt: '2024-11-04 17:00:00',
          },
          {
            monitorCode: 'cq1',
            monitorValue: '75483.58521',
            tt: '2024-11-04 17:00:00',
          },
          {
            monitorCode: 'cond',
            monitorValue: '408.0',
            tt: '2024-11-04 17:00:00',
          },
        ],
        z: '0.092',
        va: '0.0',
        sbl1: '0.0',
        cq1: '75483.58521',
        cond: '408.0',
      },
      pipeWarn: {
        id: '1',
        delFlag: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        remark: '',
        status: '',
        siteRuleId: '',
        siteCode: '0236190002',
        locationId: '',
        warnTypeCode: 'GWGSWYX',
        warnLevel: '',
        warnDatetime: '',
        warnFormula: '',
        warnFactor: '',
        warnFactorValue: '',
        triggerRecognizedFlag: false,
        triggerWarnFactor: '',
        timeThreshold: '',
        confirmStatus: 0,
        createDatetime: '',
        warnTypeName: '管网高水位运行',
        warnFactorName: '',
        warnFormulaName: '',
        siteName: '',
        siteId: '',
        warnFactorValueName: '',
        concernStatus: false,
        warnMessage: '',
        warnEndDatetime: '',
        facilityTypeCode: '',
        regionName: '',
        locationName: '',
        partitionNames: '',
        lonLat: '',
        siteAsName: '',
        facilityTypeId: '',
        facilityAttrTypeName: '',
      },
    },
  ];
  const siteList = (results.data.siteList || [])
    .filter(i => i.geometry)
    .map(i =>
      turf.feature(Terraformer.WKT.parse(i.geometry), {
        ...i,
        type: i.pointType + '_' + i.pipeWarn.warnTypeCode,
        name: [i.pipeWarn.warnTypeName, '持续时间:' + (i.pipeWarn.duration || 0)].join('\n'),
      })
    );
  // const siteList = (results.data.siteList || []).filter(i => i.geometry).map(i => turf.feature(Terraformer.WKT.parse(i.geometry),({...i,type:siteKey,name:[i.name,i.pipeWarn.warnTypeName].concat(i.siteData.monitorPropertyList.map((o,o_idx) => `${o.monitorName}${o.unit}：\t${i.siteData.monitorValueList[o_idx].monitorValue}`)).join('\n')})))
  //上下游管线
  let pipelines = results.data.pipelineInfoList
    .map(i =>
      turf.feature(Terraformer.WKT.parse(i.geometrys), {
        ...i,
        area: i.pipelineType == 'Rain' ? '雨水' : '污水',
      })
    )
    .map(i => (i.properties.flowDirection == 0 ? turf.lineString(turf.getCoords(i).reverse(), i.properties) : i));
  newfiberMap
    .getLayers()
    .filter(i => i.newfiberId == '水系流向')[0]
    .getSource()
    .setData(turf.featureCollection(pipelines));

  bus.emit('setGeoJSON', { json: turf.featureCollection(questionLinePoints), key });
  siteList.length && bus.emit('setGeoJSON', { json: turf.featureCollection(siteList), key: siteKey });
};

onMounted(() => {
  console.log('props', props);
  Distinguishnames();
});
</script>

<style lang="scss" scoped>
#PointAndLine {
  width: 100%;
  height: 100%;
  color: #ccefff;
}
.items-content {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 10px;
  flex-wrap: wrap;
  overflow: hidden;
  overflow-y: auto;

  .contentitem {
    min-height: 30px;
    line-height: 30px;
    width: 50%;
    display: flex;

    .name {
      width: 80px;
      color: #ccefff;
      text-align: right;
    }

    .value {
      width: calc(90% - 80px);
      font-size: 12px;
      font-weight: bold;
      color: #ccefff;
    }

    .gxname {
      text-align: right;
      width: 110px;
    }

    .gxvalue {
      width: calc(90% - 100px);
      white-space: nowrap; /* 确保文本在一行内显示 */
      overflow: hidden; /* 隐藏超出容器宽度的文本 */
      text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    }
  }
}

.img,
.textarea {
  width: 100% !important;
}

.buttoncss {
  width: 100%;
  margin-left: 55px;
}
</style>