<template>
  <div class="detail-real-box">
    <div class="toplist">
      <div class="btn"
           :class="click==item.planLevelTypeName?'clickbg':''"
           v-for="(item,index) in dialogList"
           :key="index"
           @click="changeclick(item)">
        <img :src="item.img">
        <span>{{item.planLevelTypeName}}</span>
      </div>
    </div>

    <div class="custom-button">
      <el-button type="primary"
                 class="cancel"
                 @click="closedia"
                 size="small">关闭
      </el-button>
      <el-button type="primary"
                 class="confirm"
                 @click="confirms2"
                 size="small">确认
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { getImageUrl } from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment";
import useUserStore from "@/store/modules/user";
import { onMounted } from "vue";
const appStore = useUserStore();
import bus from "@/utils";

import {
  listByGroup,
} from "@/api/cockpit";

const props = defineProps({
  yuanname: {
    type: String,
  },
  getpropsvalue: {
    type: String,
  },
})


const click = ref('')
const propsvalue = ref('')
const numbervalue = ref('')

const dialogList = ref([
  { name: '蓝色预警', img: getImageUrl("Alertblue", "cockpit"), value: 1, },
  { name: '黄色预警', img: getImageUrl("Alertyellow", "cockpit"), value: 2, },
  { name: '橙色预警', img: getImageUrl("Alertorange", "cockpit"), value: 3, },
  { name: '红色预警', img: getImageUrl("Alertred", "cockpit"), value: 4, },
])

function changeclick (item) {
  click.value = item.planLevelTypeName
  propsvalue.value = item.id
  numbervalue.value = item.number
}

function confirms2 () {
  console.log(propsvalue.value);
  if (propsvalue.value) {
    let data = {
      number: numbervalue.value,
      id: propsvalue.value,
    }
    bus.emit('changeshow', data)
  } else {
    proxy.$modal.msgWarning("请选择一个预案！");
  }
}

//查询防汛预案接口，同时返回这个预案是否有案件正在进行
function GetlistByGroup () {
  dialogList.value = []
  listByGroup().then(res => {
    console.log('listByGroup', res.data);
    res.data.map(item => {
      if (item.planTypeId == 1) {
        item.img = getImageUrl("Alertblue", "cockpit")
      }
      if (item.planTypeId == 2) {
        item.img = getImageUrl("Alertyellow", "cockpit")
      }
      if (item.planTypeId == 3) {
        item.img = getImageUrl("Alertorange", "cockpit")
      }
      if (item.planTypeId == 4) {
        item.img = getImageUrl("Alertred", "cockpit")
      }

      if (item.underway == 0 && props.yuanname == '启动预案') {
        dialogList.value.push(item)
      } else if (item.underway == 1 && props.yuanname == '解除预案') {
        dialogList.value.push(item)
      }
    })

    // dialogList.value = res.data

  })
}


function closedia () {
  bus.emit('closeyuan')
}

onMounted(() => {
  GetlistByGroup()
})

</script>
<style lang="scss" scoped>
//@import "@/assets/styles/floodControlDrainage.scss";
//@import "@/assets/styles/cockpit.scss";
@import "@/assets/styles/map-detail.scss";

.detail-real-box {
  flex-direction: column;
}

.toplist {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(11, 83, 149, 0.18);

  .btn {
    height: 140px;
    width: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 16px;
    background: #052754;
    border-radius: 2px;
    cursor: pointer;

    img {
      width: 68px;
    }
  }
}

.clickbg {
  // background: url("@/assets/images/cockpit/Alertglk.png") no-repeat !important;
  background-size: 100% 100% !important;
}
</style>