<template>
  <div class="detail-real-box">
    <div class="realbox-left">
      <div class="gw-item"
           v-for="(item,index) in props.list.List"
           :key="index">
        <div class="item-name">{{item.name}}</div>
        <div class="item-value"
             v-if="item.type=='src'">
          <el-image style=" height: 40px"
                    :src="item.value"
                    :zoom-rate="1.2"
                    :preview-src-list="allData.srcList"
                    :initial-index="0"
                    fit="cover" />
        </div>
        <div class="item-value"
             v-else
             :title="item.value">{{item.value}}</div>
      </div>
    </div>

    <div class="box-bottom">
      <div class="btn-box">
        <div class="btn-item"
             :class="activeditem==item.name?'activedcss':''"
             v-for="(item,index) in allData.buttonList"
             :key="index+99"
             @click="FXbtn(item)">
          {{item.name}}
        </div>
      </div>
    </div>

    <!-- <div class="realbox-right">
      <video controls
             preload="none"
             poster="@/assets/images/cockpit/video.png">
        <source src="@/assets/images/oneMap/JK4.mp4"
                type="video/mp4" />
      </video>
    </div> -->

  </div>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Object,
  },
})

import { getImageUrl } from "@/utils/ruoyi";
import { downStreamAnalyse, upStreamAnalyse } from '@/api/drainager/pipelineInfo';
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment"
import useUserStore from '@/store/modules/user'
const appStore = useUserStore()
const activeditem = ref('')

const weatherpop = ref(false)
const allData = reactive({
  buttonList: [
    {
      name: '上游',
      value: '1',
    },
    {
      name: '下游',
      value: '2',
    },
    {
      name: '上下游',
      value: '3',
    },
  ],
  yuqingicon: getImageUrl('yujing_icon', 'cockpit'),
  jsdList: [
    {
      name: '站点名称',
      value: 'XXX积水点',
    },
    {
      name: '站点编号',
      value: '039600001',
    },
    {
      name: '观测时间',
      value: '2023-04-23 18:00',
    },
    {
      name: '积水深度',
      value: '0.18m',
    },
    {
      name: '责任部门',
      value: '市政管理处',
    },
    {
      name: ' 责  任  人',
      value: '张三 136****8659',
    },
    {
      name: '通行状态',
      value: '缓慢通行',
    },
    {
      name: '报警信息',
      value: '通行正常通行正常通行正常通行正常',
    },
    {
      name: '安装照片',
      type: 'src',
      value: getImageUrl('install', 'cockpit'),
    },


  ],
  url: getImageUrl('install', 'cockpit'),
  srcList: [getImageUrl('install', 'cockpit')],
})

function showpic () {
};

async function FXbtn (item) {
  // console.log(item);
  activeditem.value = item.name
  let key = 'ephemeraldata';
  newfiberMapUtils._nmObjects.map.removeByIds([key]);
  let indexs = item.value == 3 ? [1, 2] : [item.value];
  //分别对应 上游，下游，上下游需调用的方法
  let params = [null, { endPointNumber: props.list.List[1].value }, { startPointNumber: props.list.List[0].value }];
  let methods = [null, upStreamAnalyse, downStreamAnalyse];
  let results = await Promise.all(indexs.map(i => methods[i](params[i])));

  let colors = {
    Mix: {
      color: 'rgba(248,186,2,1)',
      pointUrl: getImageUrl('12-hlj', 'Layercontrol'),
    },
    Rain: {
      color: 'rgba(56,132,192,1)',
      pointUrl: getImageUrl('10-ysj', 'Layercontrol'),
    },
    Sewage: {
      color: 'rgba(255,0,0,1)',
      pointUrl: getImageUrl('11-wsj', 'Layercontrol'),
    }
  }
  let pipelineInfoList = results.map(i => i.data.pipelineInfoList).flat();
  let pipelinePointList = results.map(i => i.data.pipelinePointList).flat();
  let pipelines = pipelineInfoList.map(item => {
    let { flowDirection, pipelineType, geometrys, id } = item;
    return {
      id,
      layerKey: key,
      geometrys,
      type: NewFiberMap.Enum.VectorType.POLYLINE,
      style: {
        width: 5,
        material: new NewFiberMap.Material[flowDirection == 'positive' ? "PolylineTrailAntiMaterialProperty" : "PolylineTrailMaterialProperty"]({
          color: Cesium.Color.fromCssColorString(colors[pipelineType].color),
          speed: 20,
        }),
        clampToGround: true
      },
    }
  })
  let points = pipelinePointList.map(item => {
    let { pointType, geometrys, id } = item;
    return {
      id,
      geometrys,
      layerKey: key,
      type: NewFiberMap.Enum.VectorType.ICON,
      style: {
        url: colors[pointType].pointUrl,
        width: 30,
        height: 30,
        distanceDisplayCondition: [Number.MIN_VALUE, 15000],
        scaleByDistance: {
          near: 5000,
          nearValue: 1,
          far: 10000,
          farValue: 0.5,
        }
      },
    }
  })
  newfiberMapUtils._nmObjects.map.geojsonToMap(NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([pipelines, points].flat(), { id: 'layerKey' }))
}

onMounted(() => {
  console.log('list', props.list);
})

</script>
<style lang="scss" scoped>
@import "@/assets/styles/map-detail.scss";

.realbox-left {
  width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.detail-real-box {
  display: block;
}

.gw-item {
  width: 45% !important;
  display: flex;
  padding: 3px 0 !important;

  .item-name {
    width: 60%;
    // text-align: right;
  }

  .item-value {
    width: 40%;
    text-align: right;
  }
}

.box-bottom {
  width: 100%;
  height: calc(100% - 144px);
  padding: 10px 0;
  border-top: 1px solid #0b5395;
  // padding: 10px 20px;
  display: flex;
  align-items: center;

  .btn-box {
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: 0 20px;
  }

  .btn-item {
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #1cb2ff;
    color: #1cb2ff;
    background: linear-gradient(
      0deg,
      rgba(28, 178, 255, 0.2) 0%,
      rgba(28, 178, 255, 0.1) 100%
    );
    border-radius: 2px;
  }
}

.activedcss {
  color: #fff !important;
  background: linear-gradient(
    0deg,
    rgba(28, 178, 255, 0.1) 0%,
    rgba(28, 178, 255, 0.2) 100%
  ) !important;
}
</style>