<!--广播模块-->
<template>
  <div class="newRadioComponent">
    <p class="component-title-p">语音广播</p>
    <div class="iot-list-box">
      <p class="iot-for-p" :class="checkLoudspeaker == item.deviceNo?'iot-check-p':''"
        v-for="(item,index) in loudspeakerList" :key="index"
         @click="clickLoudspeaker(item)">{{item.deviceName}}</p>
      <p class="no-list-p" v-if="!loudspeakerList[0]">暂无数据</p>
    </div>
    <div class="text-list-box">
      <p v-for="(item,index) in loudspeakerTextList" :key="index">{{item.time}} 发送：{{item.value}}</p>
    </div>
    <div class="loudspeaker-for-input-box">
      <el-input placeholder="请输入内容" maxlength="30" v-model="loudspeakerInput" class="input-with-select">
        <p slot="append" @click="iotBigViewSpeakerPlayText">发送</p>
      </el-input>
    </div>
  </div>
</template>
<script>
  import {
    iotBigViewSpeakerPlayText,
    iotBigViewDeviceFindByType,
  } from "@/api/index";
  export default {
    name: 'newRadioComponent',
    data () {
      return {
        loudspeakerTextList:[],
        loudspeakerList:[],
        checkLoudspeaker:null,
        loudspeakerInput:'',
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(data){
        this.$set(this,'loudspeakerTextList',[]);
        this.$set(this,'loudspeakerList',[]);
        this.$set(this,'checkLoudspeaker',null);
        this.$set(this,'loudspeakerInput','');
        if(data){
          this.iotBigViewDeviceFindByType(data);
        }
      },
      //查询实验室喇叭
      iotBigViewDeviceFindByType(data){
        let floorObj = {
          passageway:data.floorId,
          typeKeyList:['horn']
        }
        iotBigViewDeviceFindByType(floorObj).then(floorResponse => {
          let subjectObj = {
            subjectId:data.subId,
            typeKeyList:['horn']
          }
          iotBigViewDeviceFindByType(subjectObj).then(subjectResponse => {
            this.$set(this,'loudspeakerList',floorResponse.data.concat(subjectResponse.data));
          })
        })
      },
      //选中喇叭
      clickLoudspeaker(item){
        if(this.checkLoudspeaker != item.deviceNo){
          this.$set(this,'checkLoudspeaker',item.deviceNo);
        }else{
          this.$set(this,'checkLoudspeaker',null);
        }
      },
      //喇叭播放文字
      iotBigViewSpeakerPlayText(){
        if(!this.loudspeakerInput){
          this.msgError('请输入内容')
          return
        }else if(!this.checkLoudspeaker){
          this.msgError('请选择喇叭')
          return
        }
        let obj = {
          text:this.loudspeakerInput,
          deviceNo:this.checkLoudspeaker,
        }
        iotBigViewSpeakerPlayText(obj).then(response => {
          let s = new Date().getHours()
          let f = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
          this.loudspeakerTextList.push({
            time:s+':'+f,
            value:this.loudspeakerInput,
          })
          this.$set(this,'loudspeakerInput','');
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  *{
    margin:0;
    padding:0;
  }
  .newRadioComponent{
    width:380px;
    height:290px;
    background-color: #052F48;
    margin-right:20px;
    padding:0 20px 0 30px;
    .component-title-p{
      height:50px;
      line-height:50px;
      font-size:18px;
      color:#24D1F9;
    }

    .iot-list-box::-webkit-scrollbar {
      width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    .iot-list-box::-webkit-scrollbar-thumb {
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #07B4C7;
      background: #07B4C7;
    }
    .iot-list-box::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px #052F48;
      border-radius: 0;
      background: #052F48;
    }
    .iot-list-box{
      height:72px;
      overflow-y: scroll;
      .no-list-p{
        text-align: center;
        color:#dedede;
        font-size:14px;
        line-height:70px;
      }
      .iot-for-p{
        padding:0 10px;
        display: inline-block;
        width:132px;
        height:28px;
        line-height:28px;
        margin-bottom:6px;
        border:1px solid #24D1F9;
        color:#fff;
        text-align: center;
        font-size:14px;
        border-radius:4px;
        /*单行省略号*/
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        cursor: pointer;
      }
      .iot-for-p:nth-child(odd) {
        margin-right:10px;
      }
      .iot-check-p{
        color:#24D1F9;
      }
    }
    .text-list-box::-webkit-scrollbar {
      width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    .text-list-box::-webkit-scrollbar-thumb {
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #07B4C7;
      background: #07B4C7;
    }
    .text-list-box::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px #052F48;
      border-radius: 0;
      background: #052F48;
    }
    .text-list-box{
      height: 92px;
      overflow-y: scroll;
      margin:10px 0;
      p{
        color:#fff;
        font-size:14px;
        margin-right:6px;
        margin-bottom:8px;
        border: 1px solid #24D1F9;
        padding: 10px;
        border-radius: 4px;
      }
    }
    ::v-deep .loudspeaker-for-input-box{
      margin-right:12px;
      .el-input__inner{
        background-color: rgba(0,0,0,0);
        border:1px solid #24D1F9;
        box-shadow:0 0 5px 1px #24D1F9 inset;
        color:#fff;
      }
      .el-input-group__append, .el-input-group__prepend{
        cursor: pointer;
        background-color: rgba(0,0,0,0);
        color:#FFFFFF;
        border:1px solid #24D1F9;
        box-shadow:0 0 5px 1px #24D1F9 inset;
      }
    }
  }
</style>
