<template>
  <div id="shipingjiankong">
    <div class="leftbox">
      <div
        class="boxitem"
        :class="item.cameraId == AllData.cameraIndexCode ? 'actived' : ''"
        v-for="item in leftList"
        :key="item"
        :title="item.cameraName"
        @click="leftclick(item)"
      >
        {{ item.cameraName }}
      </div>
    </div>
    <div class="rightbox">
      <HKVideo
        ref="video"
        :appkey="videoConfig.appKey"
        :secret="videoConfig.appSecret"
        :ip="videoConfig.ip"
        :port="videoConfig.port"
        :cameraIndexCode="AllData.cameraIndexCode"
        :layout="AllData.layout"
        :defaultList="AllData.defaultList"
      ></HKVideo>
    </div>
  </div>
</template>

<script setup name="shipingjiankong">
import HKVideo from '@/components/videoHK/index.vue';
import { HKconfig } from '@/utils/HKConfig';
import { getdataCamera } from '@/api/MonitorAssetsOnMap';

const props = defineProps({
  // 数据id
  dataID: {
    type: String,
  },
  dataCode: {
    type: String,
  },
  // 默认打开tabs的key
  RefreshName: {
    type: String,
  },
  tabsType: {
    type: String,
  },
  typeName: {
    type: String,
  },
  arrstcode: {
    type: Array,
  },
  arrid: {
    type: Array,
  },
});

const AllData = reactive({
  cameraIndexCode: '0030845749854a8186d43306256112e7',
  layout: '1x1',
  defaultList: [
    // { cameraIndexCode: "f8b48c890c054ac190c124bb190a7007", wndId: 7 },
    // { cameraIndexCode: "09aa2a2694744cb8b188442b0b2af9b7", wndId: 6 },
  ],
});
const cameraName = ref('');
const videoConfig = reactive({
  appKey: HKconfig.appkey,
  appSecret: HKconfig.secret,
  ip: HKconfig.ip,
  port: HKconfig.port,
});
const leftList = ref([
  {
    name: '视频1',
    value: '1',
  },
  {
    name: '视频2',
    value: '2',
  },
  {
    name: '视频3',
    value: '3',
  },
]);

// 左侧点击
function leftclick(item) {
  AllData.cameraIndexCode = item.cameraId;
}

// 获取监控视频列表
function GetcameraList() {
  let params = {};
  // 站点的参数
  if (props.arrstcode.includes(props.dataCode)) {
    params.stCode = props.dataID;
    params.dataCode = 'site';
  }

  // 基础数据的参数
  if (props.arrid.includes(props.dataCode)) {
    params.dataId = props.dataID;
    params.dataCode = props.dataCode;
  }

  let data = {
    ...params,
    cameraName: cameraName.value,
  };
  getdataCamera(data).then(res => {
    console.log('res', res);
    leftList.value = res.data;
    // leftclick(res.data[0]);
    AllData.cameraIndexCode = res.data[0].cameraId;
  });
}

onMounted(() => {
  GetcameraList();
  console.log('props', props);
});
</script>

<style lang="scss" scoped>
#shipingjiankong {
  width: 100%;
  height: 100%;
  display: flex;
  color: #ccefff;
}

.leftbox {
  width: 200px;
  padding: 0 5px;

  .boxitem {
    cursor: pointer;
    width: 100%;
    text-align: center;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 超出部分省略号 */
    word-break: break-all;
    /* break-all(允许在单词内换行。) */
    display: -webkit-box;
    /* 对象作为伸缩盒子模型显示 */
    -webkit-box-orient: vertical;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-line-clamp: 1;

    &.actived {
      color: #1fa9f6;
      border: 1px solid #1fa9f6;
    }
  }
}
.rightbox {
  width: calc(100% - 200px);
}
</style>