<template>
  <div >
    <Title title="气象预警">
      <template v-slot:title-slot>
      </template>
    </Title>
    <div class="content-box bottom container yse-events" @mouseover="setPaused(true)" @mouseout="setPaused(false)" >
      <div class="scroll-list" :class="getPaused()" >
        <div  class="item" >
          <br/><br/>
          <p>
            <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <font v-for="(item,index) in reportDes" :key="index" :style="item.color ? 'color:'+item.color : ''">
              {{item.text}}
            </font>
          </p>
          <p>
            {{report.chSuggestTitle}}
          </p>
          <p>
            {{report.bhSuggestTitle}}
          </p>
        </div>

      </div>
      <div class="scroll-list2" :class="getPaused()" >
        <div  class="item" >
          <br/><br/>
          <p>
            <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <font v-for="(item,index) in reportDes" :key="index" :style="item.color ? 'color:'+item.color : ''">
            {{item.text}}
          </font>
          </p>
          <p>
            {{report.chSuggestTitle}}
          </p>
          <p>
            {{report.bhSuggestTitle}}
          </p>
        </div>

      </div>

    </div>
  </div>
</template>


<script setup>
import Title from "../../../components/title";
import {onMounted, ref} from "vue";
let props = defineProps({
  report:{
    type:Object,
    required:true
  }
})
const paused = ref(null);
const reportDes = ref({})
function setPaused(val){
  paused.value = val;
}
function getPaused(){
  return paused.value ? "paused" : ""
}

/**
 * 解析字符串为数组，并获取其中的关键字的颜色
 * @param {*} text
 */
function getTextArray(text){
  let res = []
  let cur = {text:""}
  //三种模式 0 读取普通字符串 1读取关键字 2读取关键字的颜色
  let status = 0;
  for(let i in text){
    if(text[i] == ']'){
      status = 0
      res.push(cur)
      cur = {text:""}
      continue
    }
    if(text[i] == '['){
      status = 1
      res.push(cur)
      cur = {text:""}
      continue
    }
    if(status == 1 && text[i] == ','){
      status = 2
      cur["color"] = ""
      continue
    }
    if(status == 0 || status == 1){
      cur["text"] +=text[i]
    }
    if(status == 2){
      cur["color"] +=text[i]
    }
  }
  res.push(cur)
  return res;
}
reportDes.value = getTextArray(props.report.weatherInfo)





</script>

<style lang="scss" scoped>
.content-box{
  position: absolute;
  width: 100%;
  height: calc(100% - 48px);
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}
.slot-unit{
  color: #f0f0f0;
  text-align: right;
  padding: 10px;
  width: 100%;
}

.container {
  position: relative;
  /* 父容器需要有明确的高度 */
  margin: auto;
  overflow: hidden;
}

.container > .scroll-list {
  position: absolute;
  top: 0;
  left: 0;
  height: 400px;
  width: 100%;
  animation: scroll 10s linear infinite normal;
}
.container > .scroll-list2 {
  position: absolute;
  top: 400px;
  height: 400px;
  left: 0;
  width: 100%;
  animation: scroll2 10s linear infinite normal;
}

.container > .paused{
  animation-play-state:paused;
}
.bottom{
  margin-top: 8px;
  width: 100%;
  height: 82%;
  overflow:hidden;
  .item{
    height: 100%;
    background-color: #032C3980;
    padding: 20px 20px 20px 20px;
    border-left: 1px solid rgba(81,233,240,0.3);
    border-right: 1px solid rgba(81,233,240,0.3);
    box-sizing: border-box;
    font-size: 20px;
    .frontIcon{
      width: 13%;
      padding: 0px 10px 0px 10px;
      box-sizing: border-box;
    }
    .endIcon{
      width: 17%;
      height: 100%;
      box-sizing: border-box;
      text-align: right;
    }
    .content{
      width: 70%;
      display: flex;
      flex-direction: column;
      .body{
        display: flex;
        justify-content: space-between;
      }
    }
    .text1{font-weight: 600;color: #00FFF0;}
    .text2{font-weight: 600;color: #D09C00;}
    .text3{color: #B4FFFB;}
  }
}


@keyframes scroll {
  100% {
    /* 需要滚动内容的总高度 */
    top: -400px;
  }
}
@keyframes scroll2 {
  100% {
    /* 需要滚动内容的总高度 */
    top: 0px;
  }
}

</style>

