<template>
  <div>
    <div class="popupdefect" ref="marDom" id="marDom" v-show="SheShiShow">
      <div class="ol-popup-Title1">
        <a class="ol-popup-closer" @click="closepopupdefect()">
          <n-icon size="20" color="#7ec6e6">
            <CloseCircle />
          </n-icon>
        </a>
      </div>

      <div class="ol-popup-Title2">
        <span class="ShuSpan"></span> {{ currentLayerNamedefect }}
      </div>
      <div class="CoeLeft">
        <!-- <n-space>
                <div
                  class="CoeList"
                  :class="{ CoeListCheck: CoeListCheckIndex == 1 }"
                  @click="ChouPaiListCheck(1)"
                >
                  厂站简介
                </div>
                <div
                  class="CoeList"
                  :class="{ CoeListCheck: CoeListCheckIndex == 2 }"
                  @click="ChouPaiListCheck(2)"
                >
                  工艺组态
                </div>
                <div
                  class="CoeList"
                  :class="{ CoeListCheck: CoeListCheckIndex == 3 }"
                  @click="ChouPaiListCheck(3)"
                >
                  生产运行
                </div>
            </n-space> -->
        <div class="IfBox" v-if="CoeListCheckIndex == 1">
          <div class="divclass1">
            <div
              class="divclass"
              v-for="(value, key, index) in resPDatadefect"
              :key="index"
            >
              <div class="itemclasss">{{ key }}</div>
              <div class="itemclasss itemclasssValue">{{ value }}</div>
            </div>
          </div>

          <div class="divclass2">
            <img :src="imgSrc" class="divclass2Imgs" />
            <div class="divclass2Font">
              <p>简介</p>
              {{ currentLayerNamedefect_information }}
            </div>
          </div>

          <div class="GuanbiClass">
            <n-button type="tertiary" @click="closepopupdefect()">
              关闭
            </n-button>
          </div>
        </div>
        <div class="IfBox" v-else-if="CoeListCheckIndex == 2">
          <img
            src="@/assets/Imgs/LiuYuYiZhangTu/LiuChengTu.png"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="IfBox" v-else>
          <p>进出口流量监测</p>
          <BarChart />
        </div>
      </div>
      <!-- <div class="triangle common"></div> -->
    </div>
    <!-- 监测站弹窗 -->
    <div
      class="SiteDialog"
      ref="SiteDialog"
      id="SiteDialog"
      v-show="!SheShiShow"
    >
      <div class="ol-popup-Title1">
        <a class="ol-popup-closer" @click="closepopupdefect()">
          <n-icon size="20" color="#7ec6e6">
            <CloseCircle />
          </n-icon>
        </a>
      </div>
      <div class="ol-popup-Title2">
        <span class="ShuSpan"></span> {{ currentLayerNamedefect }}
      </div>
      <div class="CoeLeft">
        <n-space justify="space-around">
          <div
            class="CoeList"
            :class="{ CoeListCheck: CoeListCheckIndex == 1 }"
            @click="ChouPaiListCheck(1)"
          >
            站点基本信息
          </div>
          <div
            class="CoeList"
            :class="{ CoeListCheck: CoeListCheckIndex == 2 }"
            @click="ChouPaiListCheck(2)"
          >
            历史数据
          </div>
        </n-space>
        <div class="IfBox" v-if="CoeListCheckIndex == 1">
          <div class="divclass1">
            <div
              class="divclass"
              v-for="(value, key, index) in resPDatadefect"
              :key="index"
            >
              <div class="itemclasss">{{ key }}</div>
              <div class="itemclasss itemclasssValue">{{ value }}</div>
            </div>
          </div>
        </div>
        <div class="IfBox" v-else-if="CoeListCheckIndex == 2">
          <!-- <n-radio-group v-model:value="groupValue" name="radiogroup">
            <n-space>
              <n-radio
                v-for="song in SiteYinZiList"
                :key="song.itemNameEn"
                :value="song.itemNameEn"
              >
                {{ song.itemNameCn }}
              </n-radio>
            </n-space>
          </n-radio-group> -->
          <n-space justify="end">
            <span
              class="YinZiList"
              v-for="(item, index) in SiteYinZiList"
              :key="index"
              :class="{ YinZiListSle: YinZiListIndex == index }"
              @click="YinZilist(item, index)"
              >{{ item.itemNameCn }}</span
            >
          </n-space>
          <div style="width: 100%; height: calc(100% - 30px)">
            <!-- <n-spin :show="show"> -->
            <BarChart ref="BarChart" />
            <!-- </n-spin> -->
          </div>
        </div>
        <div class="GuanbiClass">
          <n-button type="tertiary" @click="closepopupdefect()">
            关闭
          </n-button>
        </div>
      </div>
      <!-- <div class="triangle common"></div> -->
    </div>
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  onMounted,
  watch,
  defineComponent,
  nextTick,
} from "vue";
import BarChart from "./barChart.vue";
import { CloseCircle } from "@vicons/ionicons5";
import BengZhanImg from "@/assets/Imgs/LiuYuYiZhangTu/ceshi.png";
import { NIcon, NSpace, NButton } from "naive-ui";

import { findByStationId, findOriginalByStAndTime } from "@/services";
export default defineComponent({
  name: "Popup",
  components: {
    BarChart,
    CloseCircle,
    NIcon,
    NSpace,
    NButton,
  },
  props: {
    objs: {
      type: Object,
      default: () => new Object({}),
    },
  },
  setup(props) {
    const VueData = reactive({
      CoeListCheckIndex: 1,
      currentLayerNamedefect_information: "",
      resPDatadefect: {},
      currentLayerNamedefect: "",
      SheShiShow: true,
      imgSrc: null,
      SiteYinZiList: [],
      YinZiListIndex: 0,
      groupValue: null,
      XData: [],
      SData: [],
      DataName: null,
      DataUnit: null,
      BarChart: null,
      show: false,
    });
    // 抽排量站点点击切换
    function ChouPaiListCheck(index) {
      VueData.CoeListCheckIndex = index;
      if (index == 2) {
        nextTick(() => {
          loadSiteHistoryData(VueData.SiteYinZiList[0]);
        });
      }
    }
    const closepopupdefect = () => mapbox.closeMarkerPopup();

    const popupData = (object) => {
      console.log("点击的所有数据", object);
      // 处理数据图片
      if (object.imgPath && object.imgPath.length > 0) {
        VueData.imgSrc = object.imgPath;
      } else {
        VueData.imgSrc = BengZhanImg;
      }
      // 处理弹窗内容
      if (object.stationType) {
        // 站点弹窗
        VueData.SheShiShow = false;
        loadSiteNowData(object.code);
      } else {
        // 设施弹窗
        VueData.SheShiShow = true;
      }
      VueData.currentLayerNamedefect = object.name;
      var data = {
        "类型:": object.type || "",
        "名称:": object.name || "",
        "安装位置:": object.address || "",
        "供水区域:": object.watersupplyArea || "",
        "业主单位:": object.ownerUnit || "",
        "控制类型:": object.controlType || "",
        "建筑状态:": object.constructionState || "",
        "开口方式:": object.openingType || "",
        "服务日期:": object.serviceDate || "",
        "截面形状:": object.xsectionShape || "",
        "截面宽度:": object.xsectionWidth || "",
        "截面高度:": object.xsectionHeight || "",
      };
      //筛选data为空的不显示
      var lastresult = {};
      for (let key in data) {
        if (data[key] != "") {
          lastresult[key] = data[key];
        }
      }
      VueData.resPDatadefect = lastresult;
      VueData.currentLayerNamedefect_information = object.information || "";
    };

    // 获取站点的监测因子
    const loadSiteNowData = async (stationCode) => {
      let res = await findByStationId(`?stationCode=${stationCode}`);
      if (res && res.code == 200) {
        VueData.SiteYinZiList = res.data;
      }
    };

    // 加载因子历史数据
    const loadSiteHistoryData = async (item) => {
      VueData.BarChart.init([], [], "", "");
      let res = await findOriginalByStAndTime({
        stationId: item.stationCode,
        dataItems: [item.itemNameEn],
        start: new Date().Format("yyyy-MM-dd") + " 00:00:00",
        end: new Date().Format("yyyy-MM-dd hh:mm:ss"),
        collection: item.tableSource,
        ifOriginal: false,
      });
      if (res && res.code == 200) {
        let XData = [];
        let SData = [];
        res.data.forEach((element) => {
          XData.push(element.TT.trim().split(/\s+/)[1]);
          SData.push(element[item.itemNameEn]);
        });
        // VueData.XData = XData;
        // VueData.SData = SData;
        // VueData.DataName = item.itemNameCn;
        // VueData.DataUnit = item.itemUnit;
        VueData.BarChart.init(XData, SData, item.itemNameCn, item.itemUnit);
      }
    };
    const YinZilist = (item, index) => {
      VueData.YinZiListIndex = index;
      loadSiteHistoryData(item);
    };

    onMounted(() => {
      popupData(props.objs);
    });

    return {
      ...toRefs(VueData),
      closepopupdefect,
      ChouPaiListCheck,
      YinZilist,
    };
  },
});
</script>

<style scoped lang="less">
.popupdefect {
  position: absolute;
  width: 820px;
  left: -417px;
  bottom: 26px;

  background: #034259d5;
  z-index: 99999999;

  .ol-popup-Title1 {
    // background: linear-gradient(
    //   90deg,
    //   rgba(25, 255, 241, 0.2) 0%,
    //   rgba(25, 255, 241, 0) 100%
    // );
    text-align: right;
    height: 26px;
  }
  .ol-popup-closer {
    color: #fff;
    cursor: pointer;
    margin: 5px 15px;
    display: inline-block;
  }

  .ol-popup-Title2 {
    height: 30px;
    text-align: left;
    margin-left: 20px;
    font-size: 18px;
    margin-top: 10px;
    position: relative;
    box-sizing: border-box;
    padding-left: 20px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: #d5faf9;

    .ShuSpan {
      display: inline-block;
      width: 2px;
      height: 17px;
      background: #0199d9;
      position: absolute;
      left: 3px;
      top: 3px;
    }
  }

  .CoeLeft {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    .IfBox {
      width: 100%;
      height: 370px;
      margin-top: 20px;
    }

    .CoeList {
      width: 142px;
      height: 30px;
      background: #0c5c5f;
      border: 1px solid #313a3a;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #78828a;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }

    .CoeListCheck {
      background: #0c5c5f;
      border: 1px solid #dafffe;
      color: #dafffe;
    }
  }
}

.SiteDialog {
  position: absolute;
  width: 420px;
  left: -210px;
  bottom: 35px;
  background: #00364d;
  z-index: 99999999;

  .ol-popup-Title1 {
    // background: linear-gradient(
    //   90deg,
    //   rgba(25, 255, 241, 0.2) 0%,
    //   rgba(25, 255, 241, 0) 100%
    // );
    text-align: right;
    height: 26px;
  }
  .ol-popup-closer {
    color: #fff;
    cursor: pointer;
    margin: 5px 15px;
    display: inline-block;
  }

  .ol-popup-Title2 {
    height: 30px;
    text-align: left;
    margin-left: 20px;
    font-size: 18px;
    margin-top: 10px;
    position: relative;
    box-sizing: border-box;
    padding-left: 20px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: #d5faf9;

    .ShuSpan {
      display: inline-block;
      width: 2px;
      height: 17px;
      background: #0199d9;
      position: absolute;
      left: 3px;
      top: 3px;
    }
  }

  .CoeLeft {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    .IfBox {
      width: 100%;
      height: 370px;
      margin-top: 20px;
    }

    .CoeList {
      width: 142px;
      height: 30px;
      background: #22a8b9;
      border: 1px solid #313a3a;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #00364d;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }

    .CoeListCheck {
      background: #00475c;
      border: 1px solid #00e6e6;
      color: #00e6e6;
    }
  }
}

.bubble {
  width: 200px;
  height: 50px;
  border: 5px solid gray;
  position: relative;
}
.common {
  width: 0;
  height: 0;
  position: absolute; /* 使用绝对定位 */
  left: 50%;
  transform: translate(-50%, 0); /* 水平居中 */
}
.triangle {
  bottom: -10px;
  border-top: 10px solid gray;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.cover {
  bottom: -13px;
  border-top: 20px solid gray;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.divclass1 {
  width: 400px;
  display: inline-block;
  height: 330px;
  overflow: auto;

  .divclass {
    height: auto;
    min-height: 36px;
    width: 390px;
    color: #638899;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 20px;
  }

  .itemclasss {
    font-size: 14px;
    margin-top: 5px;
    font-size: 14px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: #dcf8ff;
  }

  .itemclasssValue {
    font-size: 18px;
    font-family: Adobe Heiti Std;
    font-weight: bold;
    color: #75bbda;
    padding-right: 20px;
    max-width: 270px;
    // text-align: right;
  }
}

.divclass2 {
  width: 390px;
  height: 330px;
  overflow: auto;
  display: inline-block;

  .divclass2Imgs {
    width: 320px;
    height: 200px;
    margin-left: 35px;
  }

  .divclass2Font {
    font-size: 12px;
    font-size: 12px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: #64a5c3;
  }
}

.GuanbiClass {
  width: 100%;
  text-align: right;
}

.YinZiList {
  cursor: pointer;
  display: inline-block;
  margin: 0 5px;
  // border-bottom: 1px solid;
  // width: 50px;
  text-align: center;

  &:hover {
    color: turquoise;
  }
}
.YinZiListSle {
  color: springgreen;
}
</style>