<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="tableSelect(row)" class="blue" :class="tableActive.includes(row.id)?'active':''">{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型" width="56">
            <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="58">
            <template #default="{row}">
              {{row.accessType=='owner'?'自建':'共享'}}
            </template>
          </el-table-column>
          <el-table-column label="收藏" width="56">
            <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" @ckNumber='ckNumber'></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: '1',
});

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


const accessType=[
  {
    label:'全部',
    value:null,
  },
  {
    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];
    tableActive.value=[props.dataCode]
    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];
    tableActive.value=[res.data[0].id]
  });
}
function pageCamera(){
  let parms={
    groupId:serchParms.value.groupId,
    cameraUserId:serchParms.value.cameraUserId,
    accessType:serchParms.value.accessType,
    name:serchParms.value.name,
  }
  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()
  })
  
}
function ckNumber(num){
  AllData.layout=num
  if(AllData.cameraIndexCode.length>num){
    AllData.cameraIndexCode=AllData.cameraIndexCode.slice(1,num)
    tableActive.value=tableActive.value.slice(1,num)
  }
  // debugger
}

onMounted(() => {
  console.log('搞什么啊', props, props.dataId);
  getOneLevel()
  // GetcameraList();
});

function tableSelect(row){
  if(AllData.cameraIndexCode.length == AllData.layout){
    AllData.cameraIndexCode=AllData.cameraIndexCode.slice(1,AllData.cameraIndexCode.length-1)
    tableActive.value=tableActive.value.slice(1,tableActive.value.length-1)
  }
  AllData.cameraIndexCode.push(row.indexCode)
  tableActive.value.push(row.id)
  // debugger
}

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>