<template>
  <div id="shipingjiankong">
    <div class="leftSub">
      <div class="leftTabs">
        <div class="tab" :class="serchParms.groupId==i.id?'active':''" v-for="i in tabsArray" :key="i" @click="changeCamera(i)">{{i.name}}</div>
      </div>
      <!-- 一级分类 -->
      <el-form :model="serchParms" class="serchForm">
        <el-form-item label="类型">
          <el-select
            v-model="serchParms.accessType"
            placeholder="请选择类型"
            style="width: 100%"
          >
            <el-option :label="i.label" :value="i.value" v-for="i in accessType" :key="i"/>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="serchParms.name" placeholder="请输入名字" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="GetcameraList">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="onLine flex">
        <div class="flex-1" :class="cameraStatus==i.cameraStatusName?'active':''" @click="cameraStatus=i.cameraStatusName,serchCamera(i.cameraStatus)" v-for="i in state" :key="i">{{i.cameraStatusName}}({{i.number}})</div>
      </div>
      <div class="cameraTable">
        <el-table :data="cameraList" style="height: 100%" class="dispatchTable" stripe>
          <el-table-column label="摄像头名称" show-overflow-tooltip>
            <template #default="{row}">
              <span @click="tableActive=row.id,tableSelect(row)" class="blue" :class="tableActive==row.id?'active':''">{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型" width="50">
            <template #default="{row}">
              <svg-icon icon-class="qiangj" class="el-input__icon input-icon" v-if="row.cameraType==1"/>
              <svg-icon icon-class="qiuj" class="el-input__icon input-icon"  v-if="row.cameraType==2"/>
            </template>
          </el-table-column>
          <el-table-column label="类型" width="50">
            <template #default="{row}">
              {{row.accessType=='owner'?'自建':'共享'}}
            </template>
          </el-table-column>
          <el-table-column label="收藏" width="50">
            <template #default="{row}">
              <span class="pointer" @click="setLike(row)"><el-icon><StarFilled v-if="row.collectFlag"/><Star v-else/></el-icon></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- <div class="leftbox" v-if="!videoList.includes(dataCode)">
      <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="videoList.includes(dataCode) ? 'onebox' : 'rightbox'"> -->
    <div class="rightbox">
      <videoDHone :channelId="AllData.cameraIndexCode"></videoDHone>
    </div>
  </div>
</template>

<script setup name="shipingjiankong">
import { getdataCamera , groupList,listCameraStatus,pageCameraInfoByCameraStatus,collect_uncollect} from '@/api/MonitorAssetsOnMap';
import videoDHone from '@/components/videoDHone/index.vue'; //实时视频
import useUserStore from "@/store/modules/user";

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,
  },
  videoList: {
    type: Array,
  },
});

const AllData = reactive({
  
  tabsArray:[],
  serchParms:{
    cameraUserId: useUserStore().userInfo.userId,
    groupId:'',
    pageNum:1,
    pageSize:999,
    cameraStatus:'',
  },
  cameraStatus:'全部',

  cameraIndexCode: '',
  layout: '1x1',
  defaultList: [
    // { cameraIndexCode: "f8b48c890c054ac190c124bb190a7007", wndId: 7 },
    // { cameraIndexCode: "09aa2a2694744cb8b188442b0b2af9b7", wndId: 6 },
  ],
});

const { serchParms,cameraStatus,tabsArray} = toRefs(AllData)


const accessType=[
  {
    label:'自建',
    value:'owner',
  },
  {
    label:'接入',
    value:'access',
  }
]

const cameraName = ref('');
const leftList = ref([]);
const cameraList = ref([]);
const state = ref([]);
const tableActive = ref('');

function getOneLevel(){
  groupList({cameraUserId:serchParms.value.cameraUserId}).then(res=>{
    tabsArray.value=res.data
    serchParms.value.groupId=tabsArray.value[1]?.id
    GetcameraList()
  })
}

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

// 获取监控视频列表
function GetcameraList() {
  
  pageCamera()

  console.log('props.videoList', props.videoList);
  // 如果是单独视频站点的类型 就没有多个 不用查询 直接赋值点击地图获取到的stcode
  if (props.videoList.includes(props.dataCode)) {
    AllData.cameraIndexCode = props.dataID;
    return;
  }

  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;
  });
}
function pageCamera(){
  let parms={
    groupId:serchParms.value.groupId,
    cameraUserId:serchParms.value.cameraUserId
  }
  listCameraStatus(parms).then(res=>{
    state.value=res.data
  })
  pageCameraInfoByCameraStatus(serchParms.value).then(res=>{
    cameraList.value=res.data
  })
}

function changeCamera(data){
  serchParms.value.groupId=data.id
  pageCamera()
}
function serchCamera(num){
  serchParms.value.cameraStatus=num
  pageCamera()
}

function setLike(row){
  let parms={
    cameraId:row.id,
    userId:serchParms.value.cameraUserId
  }
  collect_uncollect(parms).then(res=>{
    pageCamera()
  })
  
}
onMounted(() => {
  console.log('搞什么啊', props, props.dataId);
  getOneLevel()
  // GetcameraList();
});

function tableSelect(row){
  AllData.cameraIndexCode=row.indexCode
}

onBeforeUnmount(() => {
  if (AllData.myVideoPlayer) {
    hideDHPlayer();
    AllData.myVideoPlayer.destroy();
  }
});
</script>

<style lang="scss" scoped>
#shipingjiankong {
  width: 100%;
  height: 100%;
  display: flex;
  color: #ccefff;
  padding: 0 10px 10px 10px;
  overflow: hidden;
}
.leftSub{
  width:360px;
  height: 100%;
  position: relative;
  padding-left:50px;
  padding-right: 10px;
  .leftTabs{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width:40px;
    .tab{
      padding:10px;
      text-align: center;
      cursor: pointer;
      &.active{
        background: #1fa9f6;
      }
    }
  }
  .onLine{
    font-size: 14px;
    margin-bottom:10px;
    border: 1px solid #53a7ff;
    line-height:32px;
    cursor: pointer;
    text-align: center;
    div.active{
      background: #c5e1ff;
      color: #53a7ff;
    }
  }
  .cameraTable{
    width: 100%;
    height: calc(100% - 200px);
  }
}
.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);
  height: 100%;
}

.onebox {
  width: 100%;
}
.blue{
  color: #1fa9f6;
  cursor: pointer;
  &.active{
    color: green;
  }
}
.pointer{
  
  cursor: pointer;
}
:deep(.el-form-item__label){
  color: #ccefff;
}
:deep(.el-input__inner){
  color: #ccefff;
}
</style>