<template>
  <div class="forecastArea">
    <n-radio-group v-model:value="selectedValue" size="small">
      <n-radio-button v-for="v in tongdaoList" :key="v.value" :value="v.value">
        {{ v.label }}
      </n-radio-button>
    </n-radio-group>
    <p>
      <span class="adress">{{ adress }}</span>
      <span class="timer">{{ timer }}</span>
      <span class="situation">{{ situation }} </span>
      <span class="estimate">{{ estimate }}</span>
      <span class="play" @click="play"></span>
    </p>
    <div class="video_box">
      <img src="../../../../assets/Imgs/weixiufenxi2.png" alt="" />
    </div>
    <ul class="table_box">
      <li v-for="item in tableList" :key="item.id">
        <span class="adress">{{ item.adress }}</span>
        <span class="name">{{ item.name }}</span>
        <span class="icon">
          <n-popover trigger="hover">
            <template #trigger>
              <img src="../../../../assets/Imgs/fangxunMap/phone.png" alt="" />
            </template>
            <span>{{ item.phone }}</span>
          </n-popover>
        </span>
        <span class="content">{{ item.content }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";

export default {
  name: "forecastArea",
  setup() {
    const state = reactive({
      selectedValue: 0,
      tongdaoList: [
        { label: "预测积水点1", value: 0 },
        { label: "预测积水点2", value: 1 },
        { label: "预测积水点3", value: 2 },
        { label: "预测积水点4", value: 3 },
        { label: "预测积水点5", value: 4 },
      ],
      adress: "巡司河出口处",
      timer: "预计2小时后（10：30）",
      situation: "出现内涝风险",
      estimate: "预计积水深度29cm",
      tableList: [],
    });
    //获取预报区域表格数据
    const getTableData = () => {
      state.tableList = Array.apply(null, { length: 10 }).map((v, j) => ({
        adress: `河${j+1}`,
        name: "陈先生",
        phone: "13567894532",
        content:
          "全长5.2km，流域面积约10.2km2，中心城区范围内长度为2.8km全长5.2km，流域面积约10.2km2，中心城区范围内长度为2.8km",
      }));
    };
    //点击查看监控
    const play = () => {
      alert("查看监控");
    };
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      getTableData,
      play,
    };
  },
};
</script>

<style  lang='less' scoped>
.forecastArea {
  padding: 10px;
  p {
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-right: 15px;
      font-size: 15px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #edbb06;
    }
    .situation {
      color: #d92c2c;
    }
    .estimate {
      color: #377ee9;
    }
    .play {
      width: 23px;
      height: 23px;
      background: url("../../../../assets/Imgs/fangxunMap/play.png") no-repeat
        center;
      cursor: pointer;
    }
  }
  .video_box {
    width: 100%;
    height: 370px;
    background: url("../../../../assets/Imgs/fangxunMap/video_border.png")
      no-repeat center;
      img{
        padding:15px;
        width: 100%;
        height: 100%;
      }
  }
  .table_box {
    margin-top: 10px;
    height: 310px;
    overflow: auto;
    li {
      height: 36px;
      display: flex;
      align-items: center;
      span {
        text-align: center;
      }
      .adress {
        width: 15%;
      }
      .name {
        width: 10%;
      }
      .icon {
        width: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .content {
        width: 65%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>