<template>
  <!-- 顶部内容 -->
  <div class="TopWarning">
    <img :src="warn" class="img_box" v-if="gjimg" />
    <img :src="lsyj" class="img_lsyj" v-if="lsyjimg" />
  </div>

  <!-- 气象实况预报 -->
  <div class="meteorological">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">气象实况预报</div>
      <div class="flex flex-r button_boxA_list">
        <div
          class="button_boxA flex flex-justcontent-center flex-align-center"
          @click="handelFabu"
        >
          发布预警
        </div>
      </div>
    </div>

    <div class="qxyb">
      <div class="info flex flex-justcontent-start">
        <div class="weight">气象预报</div>
        <div class="text">未来24h中心城区累计降雨达19.8mm</div>
      </div>
      <div class="rainChartInfo flex">
        <div class="square"></div>
        <div style="margin-left: 5px">监测降雨</div>
        <div class="squareA"></div>
        <div style="margin-left: 5px">未来24h预报降雨</div>
      </div>
      <div class="echartBox">
        <BarChart
          :echartData="monitorData"
          :refresh="monitorData.refresh"
          :key="monitorKey"
        />
      </div>
    </div>
  </div>
  <!-- 城市易涝点监测 -->
  <div class="Urbanmonitoring">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">城市易涝点监测</div>
    </div>
    <div class="csyld">
      <div class="tabs flex flex-justcontent-spacebetween">
        <div class="tabItem" title="大于0.5m">高风险数</div>
        <div class="tabItem" title="0.3-0.5m">中风险数</div>
        <div class="tabItem" title="0.15m-0.3m">低风险数</div>
      </div>
      <div class="table_content">
        <div class="tableHeader">
          <span class="tableHeaderList tableList1">内涝监测点</span>
          <span class="tableHeaderList tableList2">风险等级</span>
          <span class="tableHeaderList tableList3">积水深度(cm)</span>
        </div>

        <Vue3SeamlessScroll
          :list="yldData"
          :singleHeight="33"
          :singleWaitTime="1500"
          :wheel="true"
          :hover="true"
          class="tableBody"
        >
          <div
            class="tableBodyList"
            v-for="item in yldData"
            @click="YLDshowMapDalog(item)"
          >
            <span class="tableBodyList_span1">{{ item.siteName }}</span>
            <span
              class="tableBodyList_span2"
              :class="
                item.riskLevel == '正常'
                  ? 'green'
                  : item.riskLevel == '中'
                  ? 'zhon'
                  : 'lan'
              "
              >{{ item.riskLevel }}
            </span>
            <span class="tableBodyList_span3">{{ item.z }}</span>
            <span class="tableBodyList_span4">
              <!--  @click="spshowMapDalog(item)" -->
              <img :src="monitor_icon" alt="" />
            </span>
          </div>
        </Vue3SeamlessScroll>
      </div>
    </div>
  </div>
  <!-- 延河洪水情监测 -->
  <div class="FloodMonitoring">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">延河洪水情监测</div>
    </div>
    <div class="yhhsqjc">
      <!-- <div class="flex flex-r button_box_list">
        <div
          class="button_box flex flex-1 flex-justcontent-center flex-align-center"
          v-for="(item, index) in munuList"
          :key="index"
          :class="[activeIndex == index ? 'activeClass' : '']"
          @click="activeIndex = index"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="img_box"></div> -->
      <yhhsqEch :data="YhList" :refresh="ryRefresh3" />
    </div>
  </div>

  <!-- 图例说明 -->
  <div class="LegendEx" v-show="LegendShow"></div>
  <!-- 发布预警弹框 -->
  <el-dialog
    id="dialogContent"
    v-model="yuJingVisible"
    title="发布应急响应通知"
    append-to-body
    :close-on-click-modal="false"
    width="900px"
  >
    <el-form class="form" ref="targetForm" :model="form" label-width="180px">
      <el-row :gutter="5">
        <el-col :span="12">
          <el-form-item label="选择模版预案:" prop="modelId">
            <el-select
              popper-class="dialogPopperClass"
              v-model="form.modelId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in modelList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="应急启动时间:" prop="rangeTime">
            <el-date-picker
              popper-class="dialogPopperClass"
              v-model="form.rangeTime"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择启动时间"
              :clearable="false"
              style="width: 235px"
            /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="大部降雨(mm):" prop="rain1">
            <el-input
              type="text"
              placeholder="请输入"
              v-model="form.rain1"
            /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="局最大部降雨(mm):" prop="rain2">
            <el-input
              type="text"
              placeholder="请输入"
              v-model="form.rain2"
            /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="最大小时雨强(mm):" prop="rain3">
            <el-input
              type="text"
              placeholder="请输入"
              v-model="form.rain3"
            /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="预计强降雨开始时间:" prop="rain4">
            <el-date-picker
              v-model="form.rain4"
              popper-class="dialogPopperClass"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择完成时间"
              :clearable="false"
              style="width: 245px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核设置:" prop="rain5">
            <el-select
              v-model="form.rain5"
              popper-class="dialogPopperClass"
              placeholder="请选择"
            >
              <el-option
                v-for="item in shenHeTypeList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              />
            </el-select> </el-form-item
        ></el-col>
      </el-row>
      <el-form-item label="通知描述:" prop="rain6">
        <el-input type="textarea" placeholder="请输入" v-model="form.rain6" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer flex flex-r">
        <div class="btns">
          <el-button type="primary" @click="yuJingVisible = false">取 消</el-button>
          <el-button type="primary" @click="noticeBtnClick">下 发</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import monitor_icon from "@/assets/images/fhpl/monitor_icon.png";
import warn from "@/assets/images/fhpl/warn.png";
import lsyj from "@/assets/images/fhpl/lsyj.png";
import BarChart from "./barChart.vue";
import bus from "@/bus";
import yhhsqEch from "./yhhsqEch.vue";
import { selectBoxBySiteNo, selectSiteMonitorBySiteType } from "@/api/system/tanchuang";
import dialogTabsStore from "@/store/modules/dialogTabs";
const useDialogTabs = dialogTabsStore();
const yuJingVisible = ref(false);

const LegendShow = ref(false);
const gjimg = ref(true);
const lsyjimg = ref(false);
const monitorKey = ref(1);
const monitorData = ref({ refresh: "1" });
const form = ref({
  modelId: "",
  rangeTime: [],
});
const FXJCData = ref([
  {
    zb: "永安路",
    sz: "中",
    szzt: true,
    zt: 0.3,
  },
  {
    zb: "永昌路北口",
    sz: "低",
    szzt: false,
    zt: 0.15,
  },
  {
    zb: "桥儿沟隧道",
    sz: "正常",
    szzt: true,
    zt: 0,
  },
  {
    zb: "原水果市场",
    sz: "正常",
    szzt: true,
    zt: 0,
  },
  {
    zb: "王家坪旧址门口",
    sz: "正常",
    szzt: false,
    zt: 0,
  },
  {
    zb: "王家坪旧址门口",
    sz: "正常",
    szzt: true,
    zt: 0.12,
  },
]);
const yldData = ref([
  // { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险', siteNo: '2024101612' },
  // { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险', siteNo: '2024101613' },
  // // { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo}
]);
const modelList = ref([
  {
    name: "2024年Ⅳ级蓝色预警",
    id: "1",
  },
  {
    name: "2024年Ⅲ级黄色预警",
    id: "2",
  },
  {
    name: "2024年Ⅱ级程色预警",
    id: "3",
  },
  {
    name: "2024年Ⅰ级红色预警",
    id: "4",
  },
]);
const shenHeTypeList = ref([
  {
    name: "无需审核",
    id: "0",
  },
  {
    name: "线下审核",
    id: "1",
  },
]);
const activeIndex = ref(1);
const munuList = [
  {
    name: "监测1号位",
  },
  {
    name: "监测2号位",
  },
  {
    name: "监测3号位",
  },
  {
    name: "监测4号位",
  },
];
const YhList = ref({});
const ryRefresh3 = ref("");

//发布预警
const handelFabu = () => {
  yuJingVisible.value = true;
};
// 下发点击事件
function noticeBtnClick() {
  yuJingVisible.value = false;
  LegendShow.value = true;
  gjimg.value = false;
  lsyjimg.value = true;
}

// 气象假数据
function getRainTrend() {
  monitorData.value.history = ["0.50", "0.20", "0.30", "0.40", "0.60", "0.20", "0.40"];
  monitorData.value.forecast = [
    "0.50",
    "0.80",
    "0.50",
    "0.40",
    "0.30",
    "0.60",
    "0.70",
    "2.8",
    "1.0",
    "0.80",
    "0.30",
  ];
  monitorData.value.totalData = [
    ...monitorData.value.history,
    ...monitorData.value.forecast,
  ];
  monitorData.value.dateRange = [
    "2024-10-12 13:00:00",
    "2024-10-12 13:30:00",
    "2024-10-12 14:00:00",
    "2024-10-12 14:30:00",
    "2024-10-12 15:00:00",
    "2024-10-12 15:30:00",
    "2024-10-12 16:00:00",
    "2024-10-12 16:30:00",
    "2024-10-12 17:00:00",
    "2024-10-12 17:30:00",
    "2024-10-12 18:00:00",
    "2024-10-12 18:30:00",
    "2024-10-12 19:00:00",
    "2024-10-12 19:30:00",
    "2024-10-12 20:00:00",
    "2024-10-12 20:30:00",
    "2024-10-12 21:00:00",
    "2024-10-12 21:30:00",
  ];
  console.log(monitorData.value, "111111111");
  monitorData.value.refresh = Math.random();
}

// 延河
function getDataYh() {
  let obj = {
    listName: ["安塞水文站", "延安水文站", "甘谷驿水文站"],
    diduan: ["1200", "1600", "2000"],
    zhengzhi: ["100", "120", "130"],
  };
  YhList.value = obj;
  ryRefresh3.value = Math.random();
}

// 积水弹框
function spshowMapDalog(val) {
  let data = {
    title: val.zb,
    comIDs: ["spjk"],
  };
  bus.emit("publicDialog", data);
  // showPipe.value = true;
}

// 积水监测
const getWaterlogging = async () => {
  try {
    const res = await selectSiteMonitorBySiteType({
      monitorTargetType: "waterlogging",
      orderBy: "online_status asc",
      siteType: "water_level",
    });
    yldData.value = res.data;
    // console.log('🚀 ~ getWaterlogging ~ res:', res);
  } catch (error) {
    console.log("🚀 ~ getWaterlogging ~ error:", error);
  }
};

// 易涝点列表点击事件
function YLDshowMapDalog(val) {
  // console.log("🚀 ~ YLDshowMapDalog ~ val:", val);
  useDialogTabs.addPosition(val.position); // 添加全景位置
  let data = {
    title: val.siteName,
    // comIDs: ['gwpm', 'jcsj', 'danganInfo'], //满溢监测
    comIDs: [], //满溢监测
    SiteNo: val.siteNo,
  };

  getTabsList(val.siteNo).then((res) => {
    data.comIDs = res;
    bus.emit("publicDialog", data);
  });
}

// 获取站点弹窗 tab列表
const getTabsList = async (siteNo) => {
  try {
    const res = await selectBoxBySiteNo(siteNo);
    const tabsList = res.data.boxList.map((item) => item.boxId);
    return tabsList;
  } catch (error) {
    console.log(" ~ getTabsList ~ error:", error);
  }
};

onMounted(() => {
  getRainTrend();
  getDataYh();
  getWaterlogging();
});
</script>

<style lang="scss" scoped>
.TopWarning {
  position: absolute;
  top: 39px;
  left: 600px;
  // height: 35px;
  width: 750px;
  // background: rgb(221, 216, 216);
  .img_lsyj {
    position: relative;
    left: 150px;
  }
}
.meteorological {
  width: 450px;
  height: 33%;

  .qxyb {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 60px);
    .info {
      height: 34px;
      background: linear-gradient(
        0deg,
        rgba(74, 164, 255, 0.6392156863) 0%,
        rgba(0, 251, 255, 0) 100%
      );
      border-radius: 3px;
      border: 1px solid #004285;
      padding: 0 18px;
      align-items: center;
      .weight {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 16px;
        color: #09ffbc;
      }
      .text {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #d3f6ff;
        margin-left: 30px;
      }
    }
    .rainChartInfo {
      margin-top: 5px;
      height: 20px;
      width: 100%;
      color: #c6c6c6;
      justify-content: center;

      .square {
        width: 10px;
        height: 10px;
        display: inline-block;
        background-color: #48a0fb;
        margin-left: 50px;
        margin-top: 4px;
      }
      .squareA {
        width: 10px;
        height: 10px;
        background-color: #d3c60b;
        margin-left: 30px;
        margin-top: 4px;
      }
    }
    .echartBox {
      position: relative;
      top: 3px;
      width: 430px;
      height: calc(100% - 50px);

      // background: url('@/assets/images/fhpl/eachar.png') no-repeat;
      // background-size: 100% 100%;
    }
  }
}
.Urbanmonitoring {
  width: 450px;
  height: 32%;
  // background: rgb(128, 0, 0);
  margin-top: 3px;
  .csyld {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 55px);
    // background: rgb(204, 184, 184);
    .tabs {
      height: 36px;
      color: #fff;
      margin-bottom: 5px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 15px;
      color: #ffffff;
      // background: red;
      .tabItem {
        width: 134px;
        line-height: 36px;
        height: 100%;
        border-radius: 6px;
        text-align: center;
        cursor: pointer;
        // border: 1px solid;
        &:nth-of-type(1) {
          background: linear-gradient(0deg, #8e1e1e 0%, #ca5656 100%);
          border-image: linear-gradient(0deg, #fd4d62, #ac241a) 10 10;
        }
        &:nth-of-type(2) {
          background: linear-gradient(0deg, #f1b500 0%, #d6a564 100%);

          border-image: linear-gradient(0deg, #ffb61a, #f5a100) 10 10;
        }
        &:nth-of-type(3) {
          background: linear-gradient(0deg, #0e91d5 0%, #4b7bc9 100%);
          border-image: linear-gradient(0deg, #00fcff, #0f6dc1) 10 10;
        }
      }
    }
    .table_content {
      width: 430px;
      height: calc(100% - 43px);
      // background: rgb(160, 182, 109);
      .tableHeader {
        width: 100%;
        height: 34px;
        background: linear-gradient(
          0deg,
          rgba(74, 164, 255, 0.6392156863) 0%,
          rgba(0, 251, 255, 0) 100%
        );
        border-radius: 2px;
        border: 1px solid #004285;
        display: flex;

        .tableHeaderList {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          height: 34px;
          line-height: 34px;
          // padding-left: 5px;
          // text-align: center;
        }
        .tableList1 {
          width: 50%;
          padding-left: 15px;
        }
        .tableList2 {
          width: 15%;
          text-align: center;
        }
        .tableList3 {
          width: 25%;
          text-align: center;
        }
      }
      .tableBody {
        width: 100%;
        height: calc(100% - 35px);
        overflow: hidden;
        // background: red;
        .tableBodyList {
          height: 34px;
          line-height: 34px;
          width: 100%;
          display: flex;
          cursor: pointer;
          /* 选择偶数行 */
          &:nth-child(even) {
            background: linear-gradient(
              0deg,
              rgba(21, 141, 253, 0.2) 0%,
              rgba(21, 141, 253, 0.05) 100%
            );
          }

          .tableBodyList_span1 {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            height: 34px;
            line-height: 34px;
            // text-align: center;
            width: 50%;
            padding-left: 15px;
            // background: red;
            // padding-left: 5px;
          }
          .tableBodyList_span2 {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            height: 34px;
            line-height: 34px;
            text-align: center;
            width: 15%;
          }
          .tableBodyList_span3 {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            height: 34px;
            line-height: 34px;
            text-align: center;
            width: 24%;
          }
          .green {
            color: #00ff66ff;
          }
          .zhon {
            color: #e8b65fff;
          }
          .lan {
            color: #00f2ffff;
          }

          .tableBodyList_span4 {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            height: 34px;
            line-height: 43px;
            text-align: center;
            width: 10%;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.FloodMonitoring {
  width: 450px;
  height: 32%;
  margin-top: 3px;
  // background: #d2d7da;
  .yhhsqjc {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 62px);
    // background: red;
    .button_box_list {
      width: 100%;
      margin-bottom: 10px;
      .button_box {
        height: 26px;
        background: #00344f;
        border-radius: 6px;

        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        margin-right: 9px;
        cursor: pointer;
        // &:hover {
        //   background: linear-gradient(0deg, #d7c691 0%, #716b50 100%);
        //   border: 1px solid #d8be86;
        // }
      }
      .activeClass {
        border: 1px solid #2cfce9;
        color: #e4f5ff;
        background: #166f84;
      }
    }
    .img_box {
      margin: 0 auto;
      width: 420px;
      height: calc(100% - 38px);
      background: url("@/assets/images/fhpl/sqjca.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
.ListBoxHeader {
  height: 44px;
  line-height: 50px;
  width: 98%;
  background: url("@/assets/newImgs/partBg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 7px 0px 0px 8px;
  .ListBoxHeader_font {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 23px;
    color: #ebfeff;
    padding-left: 34px;
  }
  .button_boxA_list {
    z-index: 10000;

    .button_boxA {
      cursor: pointer;
      width: 86px;
      height: 35px;
      background: rgb(15, 73, 197);
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      margin-right: 9px;
    }
  }
}
.LegendEx {
  position: absolute;
  left: 470px;
  top: 90px;
  width: 150px;
  height: 200px;
  background: url("@/assets/images/fhpl/tlsm.png") no-repeat;
  background-size: 100% 100%;
}

::-webkit-scrollbar {
  width: 5px; /* 设置滚动条的宽度 */
}
</style>