<template>
  <div class="mv-dialog-detail-container" v-show="isDetailType">
    <!-- 重点车辆 -->
    <div
      class="mv-dialog-detail-zdcl-box"
      v-if="currentData && currentType === 'zdcl'"
    >
      <ul>
        <li @click="zdclClick(1)">
          实时<span>{{ currentData.out ? currentData.out : 0 }}</span>
        </li>
        <li @click="zdclClick(0)">
          累计<span>{{ currentData.inval ? currentData.inval : 0 }}</span>
        </li>
      </ul>
    </div>
    <!-- 摄像机 -->
    <div class="mv-dialog-detail-sxj-box" 
      v-if="currentData && currentType === 'sxt'">
      <MvVideoPlayer :url="detailData.url" :data="detailData" type="GDPlayer"/>
    </div>
  </div>
</template>

<script>
import MvVideoPlayer from './MvVideoPlayer'
import { defaultDetailConfig } from '../lib/config/business-config'
import Api from '../api/business-api'
/**
* 弹框详情
* @author 朱琦（zhuq@microvideo.cn）
* @date   时间：2022/3/31
*/
export default {
  name: 'MvDialogDetail',
  props: {
    // 详情内容配置
    detailConfig: {
      type: Array,
      default: () => defaultDetailConfig
    },
    // 当前详情类型
    currentType: {
      type: String,
      default: null
    },
    // 当前详情数据
    currentData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    MvVideoPlayer
  },
  data () {
    return {
      detailData:{}
    }
  },
  watch:{
    currentData(val) {
      this.detailData = {}
      if (!val || !this.isDetailType) return
      this.getDetail(this.currentType)
    }
  },
  computed: {
    isDetailType () {
      return this.detailConfig.includes(this.currentType)
    }
  },
  created () {
  },
  mounted () {

  },
  methods: {
    /**
     * 重点车辆点击事件
     * @param isCumulativeData 是否为24小时累计数据 0 为是 其它为不是
     */
    zdclClick (isCumulativeData) {
      this.detailClick({ ...this.currentData, isCumulativeData })
    },
    /**
     * 详情点击触发事件
     */
    detailClick (data) {
      this.$emit('detailClick', data, this.currentType)
    },
    /**
     * 获取详情
     * @param {String} type 详情类型
     */
    getDetail(type) {
      switch (type) {
        case 'sxt':
          this.getSXJDetail()
          break;
      
        default:
          break;
      }
    },
    /**
     * 获取摄像机详情
     */
    getSXJDetail() {
      Api.getSXJDetail({cameraId:17683}).then(res => {
        if (res.status !== 0 || !res.data) return
        this.detailData = {
          ...res.data,
          url:res.data.playUrl
        }
      })
    }
  }
}
</script>

<style scoped>
@import url('../static/css/dialog-detail.css');

.mv-dialog-detail-container {
  height: 100%;
}
.mv-dialog-detail-container >div {
  height: 100%;
  width: 100%;
}
</style>
