<template>
  <div class="issuewarning">
    <div class="top">
      <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>
    <ul class="current">
      <li v-if="keyIndex=='6-6'">当前预警建议等级 II</li>
      <li v-else>上次启动的预警等级</li>
      <li>橙色</li>
    </ul>
    <ul class="btn_box">
      <li v-if="keyIndex=='6-6'">预览</li>
      <li v-if="keyIndex=='6-6'">发布预警</li>
      <li v-if="keyIndex=='6-7'">解除预警</li>
    </ul>
    <div class="search_box">
      <n-form
        :label-width="100"
        label-placement="left"
        size="medium"
        ref="queryFormRef"
        :model="queryForm"
      >
        <n-space>
          <n-form-item label="市防汛指挥部:" path="selectValue1">
            <n-select
              v-model:value="queryForm.selectValue1"
              filterable
              :options="options"
              placeholder="请选择"
              style="width: 180px"
            />
          </n-form-item>
          <n-form-item label="排水管理处:" path="selectValue2">
            <n-select
              v-model:value="queryForm.selectValue2"
              filterable
              :options="options"
              placeholder="请选择"
              style="width: 180px"
            />
          </n-form-item>
          <n-form-item label="市水务局:" path="selectValue3">
            <n-select
              v-model:value="queryForm.selectValue3"
              filterable
              :options="options"
              placeholder="请选择"
              style="width: 180px"
            />
          </n-form-item>
          <n-form-item label="市水利局:" path="selectValue3">
            <n-select
              v-model:value="queryForm.selectValue4"
              filterable
              :options="options"
              placeholder="请选择"
              style="width: 180px"
            />
          </n-form-item>
        </n-space>
      </n-form>
    </div>
    <div class="icon_box">
      <div>
        <n-icon size="40" color="#549EF5">
          <Call />
        </n-icon>
      </div>
    <div>
        <n-icon size="40"  color="#549EF5">
        <MailOutline />
      </n-icon>
    </div>
      
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, h } from "vue";
import { Call,MailOutline } from "@vicons/ionicons5";

export default {
  name: "issuewarning",
  components:{
      Call,
      MailOutline
  },
 props: {
    keyIndex: String,
  },
  setup(props) {
    const state = reactive({
      key:props.keyIndex,
      infoList: [
        {
          id: 0,
          title: "蓝色预警",
          level: "IV",
          info: "预警信号通过防汛值班电话、传真、手机短信方式等",
        },
        {
          id: 1,
          title: "黄色预警",
          level: "IV",
          info: "预警信号通过防汛值班电话、传真、手机短信方式等",
        },
        {
          id: 2,
          title: "橙色预警",
          level: "IV",
          info: "预警信号通过防汛值班电话、传真、手机短信方式等",
        },
        {
          id: 3,
          title: "红色预警",
          level: "IV",
          info: "预警信号通过防汛值班电话、传真、手机短信方式等",
        },
      ],
      queryForm: {
        selectValue1: "",
        selectValue2: "",
        selectValue3: "",
        selectValue4: "",
      },
      options: [{ label: "全部", value: 0 }],
    });
    onMounted(()=>{
      console.log(state.key,'mmmmmmmm')
    })
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang='less' scoped>
.issuewarning {
  padding: 30px 10px 10px;
  .top {
    .body {
      li {
        display: flex;
        height: 80px;
        margin-bottom: 10px;
        box-shadow: 0px 4px 10px 3px rgba(119, 176, 214, 0.35);
        .title {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100px;
          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 {
          width: calc(100% - 100px);
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .current {
    margin-top: 25px;
    display: flex;
    justify-content: space-around;
    li {
      width: 260px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #189898;
      box-shadow: 0px 4px 12px 1px rgba(119, 176, 214, 0.49);
      &:last-child {
        color: #dd741f;
      }
    }
  }
  .btn_box {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    li {
      margin-right: 20px;
      width: 124px;
      height: 46px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #f8f9fb;
      background: linear-gradient(0deg, #4290f2 0%, #e5ca20 0%, #e1cb32 100%);
      border-radius: 5px;
      &:last-child {
        background: linear-gradient(0deg, #54dbef 0%, #4290f2 0%, #69b0fe 100%);
        border-radius: 5px;
      }
    }
  }
  .search_box {
    margin-top: 20px;
  }
  .icon_box{
      display: flex;
      justify-content: center;
      >div{
          margin-right: 10px;
          width: 40px;
          height: 40px;
      }
  }
}
</style>