<template>
  <div id="ShiPingJianKong">
    <!-- <div id="LeftBox">
      <div class="LeftType">
        <div
          class="TypeBtn"
          :class="{ TypeBtnActive: AllData.ActiveKey == item.id }"
          v-for="item in AllData.leftTypeData"
          :key="item.id"
          @click="TypeBtnClick(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="RightConcent">
        <div class="SearchBox1">
          <div class="SelSearch1">
            <span class="SearchLabel">类型:</span>
            <el-select
              v-model="AllData.SelTypeValue"
              clearable
              placeholder="请选择"
              style="width: 80px"
              @change="getVideoListDataToPage(true)"
            >
              <el-option
                v-for="dict in camera_access_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </div>
          <div class="SelSearch2">
            <span class="SearchLabel">区域:</span>
            <el-select
              v-model="AllData.SelTypeValue2"
              clearable
              placeholder="请选择"
              style="width: 160px"
              @change="getVideoListDataToPage(true)"
            >
              <el-option
                v-for="item in AllData.SelTypeList2"
                :key="item.regionIndexCode"
                :label="item.name"
                :value="item.regionIndexCode"
              >
              </el-option>
            </el-select>
          </div>
          <div class="SelSearch3">
            <span class="SearchLabel">名称:</span>
            <el-input
              placeholder="请输入名称"
              v-model="AllData.inputTypeValue"
              clearable
              style="width: 220px; float: left"
            >
            </el-input>
            <el-button
              type="primary"
              style="margin-left: 15px; float: left; background-color: #00a4ff"
              @click="getVideoListDataToPage(true)"
              >搜索</el-button
            >
          </div>
        </div>
        <div class="TongJiBox">
          <div
            class="TongJiList"
            v-for="item in AllData.TongJiListData"
            :class="{ StatusActive: AllData.statusValue === item.cameraStatus }"
            @click="statusValueChange(item.cameraStatus)"
          >
            {{ item.cameraStatusName }}
            <span
              :class="
                item.cameraStatus === 1
                  ? 'TongJiList1'
                  : item.cameraStatus === 0
                  ? 'TongJiList2'
                  : 'TongJiList3'
              "
            >
              {{ item.number }}</span
            >
          </div>
        </div>
        <div class="TableBox">
          <div id="TableHtml">
            <div class="TableHeader">
              <span class="TableSpan1">视频名称</span>
              <span class="TableSpan2">视频类型</span>
              <span class="TableSpan3">接入方式</span>
              <span class="TableSpan4">收藏</span>
              <span class="TableSpan5">负责人</span>
              <span class="TableSpan6">权属单位</span>
            </div>
            <div
              class="TableBody"
              v-loading="AllData.loading2"
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
            >
              <div
                class="TableBodyList"
                v-for="(item, index) in AllData.bodyData"
                :key="index"
              >
                <span class="TableSpan1" @click="handleNodeClick(item)">
                  <span v-show="item.cameraStatus == 1" style="color: #6cd877">{{
                    item.name
                  }}</span>
                  <span v-show="item.cameraStatus == 0" style="color: #ff4254">{{
                    item.name
                  }}</span>
                </span>
                <span class="TableSpan2" @click="handleNodeClick(item)">
                  <img
                    v-show="item.cameraType == 1"
                    src="@/assets/images/Sponge_screen/qiangji.png"
                    alt=""
                    style="width: 18px; height: 16px; margin-top: 14px"
                  />
                  <img
                    v-show="item.cameraType == 2"
                    src="@/assets/images/Sponge_screen/qiuji.png"
                    alt=""
                    style="width: 18px; height: 16px; margin-top: 14px"
                  />
                </span>
                <span
                  class="TableSpan3"
                  style="color: #c7dfee"
                  @click="handleNodeClick(item)"
                >
                  <dict-tag :options="camera_access_type" :value="item.access_type"
                /></span>
                <span class="TableSpan4">
                  <el-button type="text" @click.stop="() => collectFun(item)">
                    <el-icon
                      v-if="item.collectFlag == '1'"
                      style="color: #00a4ff; font-size: 20px"
                    >
                      <StarFilled />
                    </el-icon>
                    <el-icon v-else style="color: #fff">
                      <Star />
                    </el-icon>
                  </el-button>
                </span>
                <span class="TableSpan5">{{ item.cameraUserName }}</span>
                <span class="TableSpan6">{{ item.ownershipUnit }}</span>
              </div>
            </div>
          </div>
        </div>
        <div id="paginationBox">
          <el-pagination
            layout="prev, pager, next"
            :pager-count="5"
            :total="AllData.TotalNum"
            @current-change="paginChange"
            v-model:current-page="AllData.current"
          />
        </div>
      </div>
    </div> -->
    <div
      id="VideoBox"
      class="grid0"
      :class="[
        { grid1: videoSrcList.length === 1 },
        { grid2: videoSrcList.length === 2 },
        { grid3: videoSrcList.length > 2 && videoSrcList.length < 5 },
        { grid4: videoSrcList.length >= 5 },
      ]"
    >
      <!-- <HKVideo
        v-if="AllData.DataOK"
        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 class="videoAll" v-for="(item, index) in videoSrcList" :key="index">
        <video :src="item" controls="controls" autoplay class="vbox" v-show="videoSrcList.length"></video>
      </div>
      <div class="noData" v-show="!videoSrcList.length">暂无视频数据</div>
    </div>
  </div>
</template>

<script setup name="ShiPingJianKong">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { cameraGroupList, listCameraStatus, pageCameraInfoByCameraStatus, collect_uncollect } from '@/api/videoApi/videoApi';
import HKVideo from '@/components/videoHK/index.vue';
import { HKconfig } from '@/utils/HKConfig';
import useUserStore from '@/store/modules/user';
import bus from '@/bus';
import { waterloggingArchiveList, selectByVideoUrls } from '@/api/system/tanchuang';
import dialogTabsStore from '@/store/modules/dialogTabs';

const useDialogTabs = dialogTabsStore();
const { proxy } = getCurrentInstance();
const videoSrcList = ref([]);

const props = defineProps({
  // 数据SiteNo
  SiteNo: {
    type: String,
  },
});
// const videoSrc = ref("https://server2.wh-nf.cn:8870/file/yanan_splx/jishui/1wangjiaping-menkou.mp4");
const AllData = reactive({
  leftTypeData: [], //左侧分类数据
  ActiveKey: '', //分类数据选中的key
  SelTypeValue: '', //顶部类型选择数据
  SelTypeValue2: '', //顶部区域选择数据
  SelTypeList2: [], //顶部区域的下拉数据集合
  inputTypeValue: '', //顶部区域名称输入框
  TongJiListData: [], //在线离线状态统计数据
  statusValue: '', //在线离线状态选中的key,
  loading2: false, //加载动画的状态
  bodyData: [], //摄像头列表数据
  current: 1,
  pageSize: 10,
  TotalNum: 100,
  DataOK: true,
  cameraIndexCode: '0030845749854a8186d43306256112e7',
  layout: '1x1',
  defaultList: [
    // { cameraIndexCode: "f8b48c890c054ac190c124bb190a7007", wndId: 7 },
    // { cameraIndexCode: "09aa2a2694744cb8b188442b0b2af9b7", wndId: 6 },
  ],
});
const videoConfig = reactive({
  appKey: HKconfig.appkey,
  appSecret: HKconfig.secret,
  ip: HKconfig.ip,
  port: HKconfig.port,
});
const { camera_access_type } = proxy.useDict('camera_access_type'); //获取接口返回字典数据
console.log(camera_access_type, `!!~~!!`);
// 初始化左侧分组数据
const initTypeList = () => {
  cameraGroupList().then(res => {
    if (res.code == 200) {
      AllData.leftTypeData = res.data;
    }
    console.log(AllData.leftTypeData);
    getCameraStatusData();
  });
};
// 左侧分组点击事件
const TypeBtnClick = item => {
  AllData.ActiveKey = item.id;
  AllData.SelTypeValue2 = '';
  AllData.SelTypeValue = '';
  AllData.inputTypeValue = '';

  getCameraStatusData();
  AllData.bodyData = [];
  AllData.TongJiListData = [];
};
// 选择视频类型或者区域
const getVideoListDataToPage = bol => {
  bol ? (AllData.current = 1) : '';
  getCamearListData();
};
// 根据类型获取子分类
const getVideoGroup = () => {
  AllData.SelTypeList2 = [];
  AllData.SelTypeList2.unshift({
    regionIndexCode: '',
    name: '全部',
  });
  AllData.SelTypeValue2 = AllData.SelTypeList2[0].regionIndexCode;
  // queryRegionChildrenList({
  //   treeCode: this.ActiveKey,
  // }).then((res) => {
  //   if (res.data.code == 200) {
  //     this.SelTypeList2 = res.data.data;
  //   }
  //   this.SelTypeList2.unshift({
  //     regionIndexCode: "",
  //     name: "全部",
  //   });
  //   this.SelTypeValue2 = this.SelTypeList2[0].regionIndexCode;
  // });
};
// 获取当前分组下在线以及离线等分类统计数据
const getCameraStatusData = () => {
  listCameraStatus({
    groupId: AllData.ActiveKey,
  }).then(res => {
    if (res.code == 200) {
      AllData.TongJiListData = res.data;
      AllData.statusValue = AllData.TongJiListData[0].cameraStatus;
      getCamearListData();
    }
  });
};
// 在线离线分组的点击切换事件
const statusValueChange = item => {
  AllData.statusValue = item;
  getCamearListData();
};
// 获取摄像头列表数据
const getCamearListData = () => {
  AllData.loading2 = true;
  pageCameraInfoByCameraStatus({
    groupId: AllData.ActiveKey,
    cameraStatus: AllData.statusValue,
    name: AllData.inputTypeValue,
    pageNum: AllData.current,
    pageSize: AllData.pageSize,
    accessType: AllData.SelTypeValue,
    cameraUserId: useUserStore().userInfo.userId,
  }).then(res => {
    AllData.loading2 = false;
    if (res.code == 200) {
      AllData.bodyData = res.data;
      AllData.TotalNum = res.total;
    }
  });
};
// 分页切换
const paginChange = () => {
  console.log(AllData.current, '~~');
  getVideoListDataToPage(false);
};
// 点击站点
const handleNodeClick = item => {
  AllData.cameraIndexCode = '';
  AllData.cameraIndexCode = item.indexCode;
};
// 收藏/取消收藏
const collectFun = item => {
  console.log(item);
  const userInfo = useUserStore().userInfo;
  console.log(userInfo);
  collect_uncollect({
    cameraId: item.id,
    userId: userInfo.userId,
  }).then(res => {
    if (res.code == 200 && res.data) {
      // 刷新
      getVideoListDataToPage(false);
    }
  });
};

const getSrc = () => {
  selectByVideoUrls({ siteNo: props.SiteNo, moduleType: useDialogTabs.moduleType }).then(res => {
    console.log('🚀 ~ selectByVideoUrls ~ res:', res);
    videoSrcList.value = res.data || [];
  });
};

onMounted(() => {
  // initTypeList();
  getSrc();
});
</script>

<style lang="scss" scoped>
#ShiPingJianKong {
  width: 100%;
  height: 100%;
  #LeftBox {
    width: 415px;
    height: 100%;
    float: left;
    overflow: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    .LeftType {
      width: 50px;
      height: calc(100% - 5px);
      overflow: auto;
      background: #002b46;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;

      .TypeBtn {
        color: #77abcb;
        font-size: 18px;
        box-sizing: border-box;
        padding: 10px 10px;
        width: 42px;
        cursor: pointer;
        border-bottom: 1px solid #063959;
        display: inline-block;

        &:hover {
          background: #046da694;
        }
      }

      .TypeBtnActive {
        border-left: 3px solid #00a4ff;
        color: #00a4ff;
        font-weight: bold;
      }
    }
    .RightConcent {
      width: calc(100% - 50px);
      height: calc(100% - 5px);
      overflow: auto;

      .SearchBox1 {
        width: 100%;
        height: 70px;

        .SelSearch1 {
          width: calc(50% - 42px);
          height: 30px;
          float: left;
        }

        .SelSearch2 {
          width: calc(50% + 42px);
          height: 30px;
          float: left;
        }

        .SelSearch3 {
          width: 100%;
          height: 30px;
          float: left;
          margin-top: 10px;
        }

        .SearchLabel {
          width: 50px;
          text-align: center;
          height: 30px;
          line-height: 30px;
          color: #c7dfee;
          float: left;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
        }
      }

      .TongJiBox {
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        margin-top: 20px;

        .TongJiList {
          flex: 1;
          display: inline-block;
          height: 30px;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
          font-size: 16px;
          background: #002b46;
          border-radius: 2px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #ffffff;
          margin: 0 10px;
        }

        .TongJiList1 {
          color: #6cd877;
        }

        .TongJiList2 {
          color: #ff4254;
        }

        .TongJiList3 {
          color: #00a4ff;
        }

        .StatusActive {
          border: 1px solid #00a4ff;
        }
      }

      .TableBox {
        width: 100%;
        height: calc(100% - 165px);
        margin-top: 10px;
        overflow: auto;

        #TableHtml {
          width: 565px;
          height: calc(100% - 0px);
          margin-top: 10px;

          .TableHeader {
            width: 100%;
            height: 44px;
            line-height: 42px;
            color: #00a4ff;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #00a4ff;
            background: #082138;
          }

          .TableBody {
            width: 100%;
            height: calc(100% - 45px);
            // overflow: auto;
            color: white;

            .TableBodyList {
              width: 100%;
              height: 44px;
              cursor: pointer;
              border-bottom: 1px solid #002b46;
              box-sizing: border-box;
              background: #051b30;

              &:hover {
                background-color: #0490db63;
              }
            }
          }

          .TableSpan1 {
            float: left;
            width: 180px;
            height: 44px;
            text-align: center;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
          }

          .TableSpan2 {
            float: left;
            width: 70px;
            height: 44px;
            line-height: 42px;
            text-align: center;
            box-sizing: border-box;
          }

          .TableSpan3 {
            float: left;
            width: 70px;
            height: 44px;
            line-height: 42px;
            text-align: center;
            box-sizing: border-box;
          }

          .TableSpan4 {
            float: left;
            width: 50px;
            height: 44px;
            line-height: 42px;
            text-align: center;
            box-sizing: border-box;
          }
          .TableSpan5 {
            float: left;
            width: 60px;
            height: 44px;
            line-height: 42px;
            text-align: center;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
          }
          .TableSpan6 {
            float: left;
            width: 120px;
            height: 44px;
            text-align: center;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
          }
        }
      }

      #paginationBox {
        text-align: center;
        width: calc(100% - 10px);
        height: 32px;
        position: relative;
        .el-pagination {
          justify-content: center;
        }
      }
    }
  }
  #VideoBox {
    // width: calc(100% - 415px);
    width: 100%;
    height: 100%;
    float: left;

    &.grid0 {
      // border: 1px solid red;
      display: grid;
      grid-column-gap: 10px;
      grid-row-gap: 10px;
    }
    &.grid1 {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, 100%);
    }
    &.grid2 {
      grid-template-columns: repeat(2, 1fr);
    }
    &.grid3 {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 50%);
    }
    &.grid4 {
      grid-template-columns: repeat(3, 1fr);
      // grid-template-rows: repeat(auto-fill, 340px);
    }

    .videoAll {
      height: 100%;
      // height: 340px;
      // border: 1px solid #ccc;
      border-radius: 4px;
    }
    .vbox {
      width: 100%;
      height: 100%;
    }
    .noData {
      width: 100%;
      text-align: center;
      margin-top: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
  }
}
</style>