<template>
  <div class="gradeFlood">
    <div class="top">
      <ul class="head">
        <li>防汛级别</li>
        <li>满足条件</li>
      </ul>
      <ul class="body">
        <li v-for="item in infoList" :key="item.id">
          <div
            class="title"
            :class="
              item.id === 0
                ? 'blue'
                : item.id === 1
                ? 'yellow'
                : item.id === 2
                ? 'orange'
                : 'red'
            "
          >
            <span>{{ item.title }}</span>
            <span>{{ item.level }}</span>
          </div>
          <div class="info">{{ item.info }}</div>
        </li>
      </ul>
    </div>
    <div class="bot">
      <h3>防汛预警</h3>
      <p>
        根据气象预报信息，未来12小时有大暴雨（预计时间2021年7月1日14点左右），根据防汛应急指挥部会议精神，贯彻以人为本、安全第一的方针做好汛期暴雨防洪工作并启动三级预案，汛期工作安排如下..
      </p>
      <img src="../../../../assets/Imgs/fangxunMap/zhang.png" alt="" />
      <div class="btn_list">
        <n-space>
         <n-button type="info" size="small">XX局XX科</n-button>
         <n-button type="info" size="small">污水处理厂</n-button>
         <n-button type="info" size="small">泵站处</n-button>
         <n-button type="info" size="small">河道管理科</n-button>
         <n-button type="info" size="small">提交副指挥长审核</n-button>
        </n-space>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "gradeFlood",
  setup() {
    const state = reactive({
      infoList: [
        {
          id: 0,
          title: "蓝色预警",
          level: "IV",
          info: "蓝色汛情预警(IV级), 预警未来2小时内市区部分城区道路、立交桥下、低洼地区出现积水影响通行。最大深度15厘米以下",
        },
        {
          id: 1,
          title: "黄色预警",
          level: "IV",
          info: "蓝色汛情预警(IV级), 预警未来2小时内市区部分城区道路、立交桥下、低洼地区出现积水影响通行。最大深度15厘米以下",
        },
        {
          id: 2,
          title: "橙色预警",
          level: "IV",
          info: "蓝色汛情预警(IV级), 预警未来2小时内市区部分城区道路、立交桥下、低洼地区出现积水影响通行。最大深度15厘米以下",
        },
        {
          id: 3,
          title: "红色预警",
          level: "IV",
          info: "蓝色汛情预警(IV级), 预警未来2小时内市区部分城区道路、立交桥下、低洼地区出现积水影响通行。最大深度15厘米以下",
        },
      ],
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang='less' scoped>
.gradeFlood {
  padding: 10px;
  .top {
    .head {
      display: flex;
      li {
        display: flex;
        justify-content: center;
        line-height: 30px;
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
        color: #4f596b;
        &:first-child {
          width: 90px;
        }
        &:last-child {
          width: calc(100% - 90px);
        }
      }
    }
    .body {
      li {
        display: flex;
        height: 80px;
        margin-bottom: 3px;
        .title {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 120px;
          color: #fff;
          &.blue {
            background: linear-gradient(90deg, #3078e5 0%, #61a0ff 100%);
          }
          &.yellow {
            background: linear-gradient(90deg, #d1b819 0%, #e5ce30 100%);
          }
          &.orange {
            background: linear-gradient(90deg, #da711c 0%, #ff953d 100%);
          }
          &.red {
            background: linear-gradient(90deg, #de3e3e 0%, #fe5b5b 100%);
          }
        }
        .info {
          padding: 10px;
        }
      }
    }
  }
  .bot {
    position: relative;
    margin-top: 15px;
    padding: 10px 25px;
    width: 100%;
    height: 380px;
    background: var(--bg-menu);
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.35);
    h3 {
      line-height: 30px;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      color: var(--color-Invert);
      text-align: center;
      border-bottom: 1px solid;
      border-color: var(--border-top);
    }
    p {
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: var(--color-Invert);
      text-indent: 2em;
    }
    img {
      position: absolute;
      right: 50px;
      top: 50%;
      width: 100px;
      height: 100px;
    }
    .btn_list{
      margin-top: 60px;
      display: flex;
      justify-content: center;

    }
  }
}
</style>