<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中心城区累计降雨达12mm</div>
      </div>
      <div class="echartBox"></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="FXJCData" :singleHeight="33" :singleWaitTime="1500" :hover="true" class="tableBody">
          <div class="tableBodyList" v-for="item in FXJCData">
            <span class="tableBodyList_span1">{{ item.zb }}</span>
            <span class="tableBodyList_span2" :class="item.sz == '正常' ? 'green' : ''">{{ item.sz }} </span>
            <span class="tableBodyList_span3">{{ item.zt }}</span>
            <span class="tableBodyList_span4">
              <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>
    </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';
const yuJingVisible = ref(false);
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';

const LegendShow = ref(false);
const gjimg = ref(true);
const lsyjimg = ref(false);

const form = ref({
  modelId: '',
  rangeTime: [],
});
const FXJCData = ref([
  {
    zb: '永安路',
    sz: '正常',
    szzt: true,
    zt: 32.1,
  },
  {
    zb: '永昌路北口',
    sz: '正常',
    szzt: false,
    zt: 16.1,
  },
  {
    zb: '桥儿沟隧道',
    sz: '正常',
    szzt: true,
    zt: 8.4,
  },
  {
    zb: '原水果市场',
    sz: '正常',
    szzt: true,
    zt: 1.5,
  },
  {
    zb: '王家坪旧址门口',
    sz: '正常',
    szzt: false,
    zt: 2.4,
  },
  {
    zb: '王家坪旧址门口',
    sz: '正常',
    szzt: true,
    zt: 1.5,
  },
]);

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 handelFabu = () => {
  yuJingVisible.value = true;
};
// 下发点击事件
function noticeBtnClick() {
  yuJingVisible.value = false;
  LegendShow.value = true;
  gjimg.value = false;
  lsyjimg.value = true;
}
</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%;
  // background: rgb(204, 184, 184);
  .qxyb {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 60px);
    .info {
      height: 34px;
      background: linear-gradient(0deg, #102755 0%, #009dab 0%, #034d66 100%);
      border-radius: 3px;
      border: 1px solid #1cf5fc;
      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;
      }
    }
    .echartBox {
      position: relative;
      top: 3px;
      width: 430px;
      height: calc(100% - 38px);
      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%, #420606 100%);
          border-image: linear-gradient(0deg, #fd4d62, #ac241a) 10 10;
        }
        &:nth-of-type(2) {
          background: linear-gradient(0deg, #f1b500 0%, #331e02 100%);

          border-image: linear-gradient(0deg, #ffb61a, #f5a100) 10 10;
        }
        &:nth-of-type(3) {
          background: linear-gradient(0deg, #0e91d5 0%, #0d1b32 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, #00fbffa3 0%, #00fbff00 100%);
        border-radius: 2px;
        border: 1px solid #74dde1;
        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;
          /* 选择偶数行 */
          &:nth-child(even) {
            background: linear-gradient(0deg, #008599 0%, #08596d 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%;
          }
          .YJClass {
            color: #ffe243;
          }
          .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);
    .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;
      background: url('@/assets/images/fhpl/sqjca.png') no-repeat;
      background-size: 100% 100%;
      height: calc(100% - 38px);
    }
  }
}
.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: #03b6a0ff;
      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>