<template>
  <Card  title="信息播报">
    <div class="container">
      <vue-scroll style="height:100%">
     <div class="informationBox" v-for="(item,index) in workerList" :key="index" @click="openDialog(item,index)">
      <div class="dateTime">{{ item.updateTime }}</div>
      <div class="text">
        <i><img src="~@/assets/images/zjsj/Vector.png" alt=""></i>
        {{item.title}}
      </div>
     </div>
     <div class="tbody" v-if="workerList.length==0">
        <div class="dataImg">
          <img src="@/assets/images/noData3.png" alt srcset />
          <p>{{$t('message.dataBoard.nodata')}}</p>
        </div>
      </div>
    </vue-scroll>
    <!-- 信息播报弹框 -->
    <div class="informationDialog" v-show="isShow">
      <div class="titleText" >
        <p><i class="el-icon-circle-close" @click="closeDialog"></i></p>
        <p>  <span style="float:left;font-size:20px;margin: 35px 0 0 32px;">{{ itemVar.title }}</span> <span style="float:right;margin: 39px -12px 0px 0;">{{itemVar.updateTime }}</span></p>
        <div class="content" v-html="itemVar.content">
         <!-- {{  itemVar.content}} -->
      </div>
      </div>
      
    </div>
    </div>
    
  </Card>
  
</template>

<script>
import {
  getBroadcastingApi, //查询所有
} from "@/assets/js/api/broadcast.js";

import Card from "../components/Card";

export default {
  components: { Card },
  data() {
    return {
      isShow:false,
      workerList: [], //播报数据
      itemVar:[],
    };
  },
  created() {
  this.getData()
  },
  methods:{
    //打开弹框
    openDialog(item,index){
      // console.log('样式出来了嘛',JSON.stringify(item.content.innerHTML));
      this.isShow=true
      this.itemVar=this.workerList[index]
    },
    //关闭弹框
    closeDialog(){
      this.isShow=false
    },
    getData(){
      getBroadcastingApi({
        projectSn:this.$store.state.projectSn
      }).then(res=>{
          console.log('播报信息',res);
          this.workerList=res.result
      })
    }
  }
 
 
};
</script>

<style lang="less" scoped>


.container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  width: 100%;
  height: 100%;

 .informationBox{
  margin-bottom: 10px;

  .dateTime{
    font-size: 10px;
    margin-bottom: 10px;
    // margin-top: 10px;
  }
  .text{
    font-size: 16px;
    height: 45px;
    line-height: 30px;
    background: url('~@/assets/images/zjsj/orange.png');
    background-size: 100% 100%;
    overflow: hidden;
    img{
      width: 20px;
      height: 20px;
      margin: 12px 0 -3px 10px
    }
  }
 }

}
.informationDialog{
  width: 40%;
  height: 55%;
  background: url('~@/assets/images/zjsj/bgm.png');
  background-size: 100% 100%;
  position: absolute;
  margin: -35% 0px 0px -45%;
  .titleText{
    // position: absolute;
    p{

      i{
        float: right;
        margin: 14px 18px 0 0;
      }
    }
  }
  .content{
    position: absolute;
    width: 94%;
    height: 80%;
    margin: 119px 20px 0 20px;

  }
}
.dataImg {
  margin-top: 20px;
    margin-left: 170px;
}
    p{
        margin: 6px 0 0 13px;
        font-size: 16px;
    }
  
</style>
