<template> 
  <div class="jqItm"  :class="props.isDetail?'':'jqItmline'">
    <div class="time" v-if="!props.isDetail">
      <span>{{ props.data.bjsj }}</span>
      <span style="display:flex;align-items: center;">
        <el-popover placement="left" width="400" trigger="click">
          <template #reference>
            <span @click="get_cjd_detail" style="font-size:17px;cursor: pointer;margin-right:10px;"><el-icon style="margin-top:4px;" color="#58a4fa" ><WarningFilled/></el-icon></span>
          </template>
          <div class="detail_cnt_box">
            <el-timeline>
              <el-timeline-item color="#409eff" :timestamp="it.time" placement="top" v-for="(it,idx) in detailList" :key="idx">
                <el-card>
                  <div class="detailinfo">{{it.mode1}}</div>
                  <div class="detailinfo">{{it.units}}（{{it.jjyxm}}）</div>
                  <audio :id="'radius_' + it.id">
                    <source :src="it.lyh" />
                  </audio>
                  <div class="address">
                <div style="text-align:right;" v-if="it.lyh">
                  <img class="playImg" v-if="!it.isPlay" src="@/assets/my/play.png" @click.stop="playRadio(it)" />
                  <img class="playImg" v-else src="@/assets/my/pause.png" @click.stop="closeRadio(it)" />
                </div>
              </div>
                </el-card>
              </el-timeline-item>
           
            </el-timeline>
            <el-empty description="暂无数据" :image-size="0.1" v-if="detailList.length <= 0"/>
          </div>
        </el-popover>

        <span style="color: #58a4fa;cursor: pointer;" @click.stop="changePoint( props.data)">重新定位</span>
      </span>
    </div>
    <div class="card" :class="changeBorder(props.data.color)"  @click="getDetaill(props.data)">
      <div class="title">{{ props.data.bjnr }}</div>
      <div class="text">
        报警人：<span class="info">{{ props.data.bjrXm || '未知'}} <span v-if="!props.isDetail">({{props.data.bjrLxdh}})</span></span>
      </div>
      <div class="text">
        报警时间：<span class="info">{{ props.data.bjsj }}</span>
      </div>
      <div class="text">
        警情类别：<span class="info">{{ props.data.bjlbmc }}</span>
      </div>
      <div class="text">
        警情类型：<span class="info">{{ props.data.bjlxmc }}</span>
      </div>
      <div class="text">
        警情细类：<span class="info">{{ props.data.bjxlmc || "未知"}}</span>
      </div>
      <div class="text" v-if="props.isDetail">
        报警人电话：<span class="info">{{ props.data.bjrLxdh}}</span>
        <span class="checkInfo">核查身份</span>
      </div>
       <audio :id="'radius_' + props.data.id">
        <source :src="props.data.jjlyh" />
      </audio>
      <div class="address">
        <span>
          <img class="addImg" src="@/assets/images/situationPresentation/dingwei.png" />
          <span>{{ props.data.sfdz }}</span>
        </span>
        <span v-if="!props.isDetail">
          <img class="playImg" v-if="!props.data.isPlay" src="@/assets/my/play.png" @click.stop="playRadio(props.data)" />
          <img class="playImg" v-else src="@/assets/my/pause.png" @click.stop="closeRadio(props.data)" />
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { qcckGet } from "@/api/qcckApi.js";
import emitter from "@/utils/eventBus.js";
import { reactive, ref,defineProps,defineEmits } from "vue";
const props = defineProps({
  data: Object,
  isDetail:Boolean,
  dic:{
    type:Object,
    default:{} 
  }
});
const changeItemPoint = ref({}); //切换警情的经纬度
const detailList = ref([])
const isOpen = ref(false)
const emit = defineEmits(['lookDetail','changePoint'])

// 查看详情
function getDetaill(item){
  emit('lookDetail',item)
}
// 播放语音
function playRadio(item) {
  item.isPlay = true;
  let ID = "radius_"+item.id;
  let dom = document.getElementById(ID);
  dom.load();
  dom.play();
}

// 切换定位
function changePoint(item) {
  emit('changePoint',item)
  emitter.emit("removePlot", "PIOT");
  emitter.emit("drawShape", {flag:"PIOT" , type:'point' });
}

// 改变边框
function changeBorder(val){
  switch(val){
      case '1':
        return 'red'
        break;
      case '2':
        return 'orange'
        break;
      case '3':
        return 'yellow'
        break;
      case '4':
        return 'blue'
        break;
      default:
        return 'blue'
    }
  

}

// 关闭语音
function closeRadio(item) {
  item.isPlay = false;
  let ID = "radius_" + item.id;
  let dom = document.getElementById(ID);
  dom.pause();
}

// 获取详情
function get_cjd_detail(){
  isOpen.value = !isOpen.value;
  if(isOpen.value){
    qcckGet({jjdbh:props.data.gljjdbh},'/mosty-other/lzJq/getListCzxx').then(res=>{
      detailList.value = res || [];
      detailList.value.forEach(v=>{
        if(v.lyh) v.lyh = '/data/rec' + v.lyh;
        v.isPlay = false;
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.jqItm {
  position: relative;
  padding: 0 10px 10px 14px;
  box-sizing: border-box;
  .time {
    margin-bottom: 10px;
    padding-left: 10px;
    display: flex;
    justify-content: space-between;
  }
  .card {
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    line-height: 20px;
    font-size: 14px;
    background: #052955;
    .text {
      font-size: 12px;
      color: #6585af;
      span {
        color: #0093ed;
      }
      .checkInfo{
        padding: 4px 6px;
        color: #fff;
        border-radius: 4px;
        box-shadow: inset 0 0px 2px 2px #2B8BE5;
        margin-left: 10px;
        cursor: pointer;
      }
    }
    .address {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      padding-top: 4px;
      padding-bottom: 4px;
      box-sizing: border-box;
      border-top: 1px solid #2d2f4e;
      .addImg {
        margin-right: 4px;
        vertical-align: text-top;
      }
      .playImg{
        width: 20px;
      }
    }
  }
  .red{
    border-top: 2px solid #ff0526;
  }
  .orange{
    border-top: 2px solid #FF7E00;
  }
  .yellow{
    border-top: 2px solid #FFE21F;
  }
  .blue{
    border-top: 2px solid #1C97FF;
  }
  .time::before {
    position: absolute;
    content: "";
    width: 26px;
    height: 26px;
    background: url("~@/assets/my/icon.png") no-repeat;
    top: -7px;
    left: -14px;
    z-index: 22;
  }
}
.jqItmline{
  border-left: 1px solid rgb(46, 67, 116);
  margin-left: 10px;
}
.detail_cnt_box{
  max-width: 600px;
  max-height: 60vh;
  overflow: hidden;
  overflow-y: auto;
}
.detail_cnt_box .el-card{
  color: #ffffff;
  border: 1px solid #19408d;
  background-color: #052955;
}
::v-deep .el-timeline-item__timestamp{
  color: #fff;
}

</style>
<style>
.el-popper.is-light{
  background: #072b64;
  border: 1px solid #1e4eac;
}
.el-popper.is-light .el-popper__arrow::before{
  background: #072b64;
  border: 1px solid #1e4eac;
}
</style>