<script setup>
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
import { onLoad, onShow, onTabItemTap } from "@dcloudio/uni-app";
import { getSubInfoList, getCameraList } from "@/api/work/video.js";
let subId = ref("");
let videoList = ref([]);
let openVideoUrl = ref("");

function list() {
  getCameraList({
    subId: subId.value,
  }).then(async (res) => {
    videoList.value = res.data.list;
    const item = res.data.list[0];
    openVideoUrl.value = item.code;
    title.value = item.subName;
  });
}
let selectedItem = ref({});
let activeIndex = ref(0);
const title = ref("");
function openUrl(item, index) {
  openVideoUrl.value = item.code;
  title.value = item.subName;
  activeIndex.value = index;
}

const screenWidth = ref(375);
const statusBarHeight = ref(22);
onLoad((option) => {
  const systemInfo = uni.getSystemInfoSync();
  screenWidth.value = systemInfo.screenWidth;
  statusBarHeight.value = systemInfo.statusBarHeight;
  selectedItem.value = option;
  subId.value = option.id;
  list();
});
const webviewStyles = computed(() => {
  const videoHeight = screenWidth.value * 0.5625;
  return {
    width: screenWidth.value + "px",
    height: videoHeight + "px",
    top: statusBarHeight.value + 50 + "px",
  };
});
const webviewBoxStyle = computed(() => {
  const style = webviewStyles.value;
  return {
    width: style.width,
    height: style.height,
    marginTop: style.top,
  };
});
</script>
<template>
  <view class="container">
    <page-title>现场影像</page-title>
    <view :style="webviewBoxStyle">
      <web-view
        :webview-styles="webviewStyles"
        :style="webviewBoxStyle"
        :src="`/hybrid/html/video.html?src=${openVideoUrl}&title=${title}`"
        :fullscreen="false"
      ></web-view>
    </view>
    <!-- <cover-view class="srceenBtn" @click="onScreenFull()">
      <cover-image
        class="iamge"
        src="@/static/images/fullWatch.png"
      ></cover-image>
      <cover-view class="full-watch">全屏观看</cover-view>
    </cover-view> -->
    <view class="video-pro-list">
      <view class="xmmc"> 项目名称 </view>
      <view class="video-bg">
        <view class="video-pro-title">
          {{ selectedItem.subName }}
        </view>
        <view class="line"> </view>
        <view class="video-pro-time">
          <view>
            开工日期：
            <text class="start-end">{{ selectedItem.beginDate }}</text>
          </view>
          <view>
            预计竣工日期：
            <text class="start-end">{{ selectedItem.endDate }}</text>
          </view>
        </view>
      </view>
      <view class="no-img-video" v-if="videoList.length === 0">
        <image src="@/static/images/noImgVideo.svg" mode=""></image>
        <text>暂无视频</text>
      </view>
      <view class="video-list" v-if="videoList.length > 0">
        <view
          class="video-item"
          :class="activeIndex === index ? 'item-active' : ''"
          v-for="(item, index) in videoList"
          :key="item.videoId"
          @click="openUrl(item, index)"
        >
          <!--       <view class="item-num" :class="activeIndex===index?'num-active':''">
            {{(1+index)<10?'0'+(1+index):(1+index)}}
          </view>
         <view class="item-num" :class="activeIndex===index?'num-active':''">
           {{(1+index)<10?'0'+(1+index):(1+index)}}
         </view> -->
          <view class="item-no"
            >{{ 1 + index < 10 ? "0" + (1 + index) : 1 + index }}
          </view>
          <view>{{ item.title }}</view>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="footer-word"> 新疆维吾尔自治区 </view>
      <view class="footer-word"> 哈密市发展和改革委员会 </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.no-img-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50rpx;

  image {
    width: 200rpx;
    height: 200rpx;
  }

  text {
    margin-top: 20rpx;
    font-size: 32rpx;
    color: #999999;
  }
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(var(--status-bar-height) + 50px);
  position: relative;
  overflow: scroll;
  background-color: #ffffff;

  .search-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: calc(var(--status-bar-height) + 50px);
    width: 100%;
    padding: 0 28rpx;
    background-color: #002f69;
    // background-color: #fff;
    height: 150rpx;

    .search-icon {
      position: absolute;
      top: 50%;
      left: 80rpx;
      z-index: 20;
      transform: translate(0, -50%);
      width: 40rpx;
      height: 40rpx;
      // background-image: url('@/static/images/search.png');
      // background-size: 100% 100%;

      .iamge {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .srceenBtn {
    position: relative;
    position: absolute;
    top: calc(var(--status-bar-height) + 420rpx);
    margin-top: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10rpx;
    width: 268rpx;
    height: 80rpx;
    background: #c2e1fb;
    border-radius: 40rpx;

    .full-watch {
      font-weight: 500;
      font-size: 28rpx;
      color: #002f69;
    }

    .video {
      position: absolute;
      z-index: 0 !important;
    }

    .iamge {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .xmmc {
    position: relative;
    top: 0rpx;
    left: 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 176rpx;
    height: 56rpx;
    background: #d3f4ff;
    border-radius: 0px 32rpx 0px 0px;
    font-weight: 500;
    font-size: 28rpx;
    color: #002f69;
  }

  .video-pro-list {
    width: 100%;
    padding: 10rpx 28rpx;
    .video-bg {
      padding: 34rpx;
      width: 100%;
      height: auto;
      background: #f5f5f5;
      border-radius: 0px 12rpx 0px 0px;
    }

    .video-pro-title {
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
      line-height: 40rpx;
      text-align: left;
    }

    .line {
      width: 100%;
      border-top: 2rpx dashed #b5b5b5;
      margin: 18rpx auto;
    }

    .video-pro-time {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      font-weight: 500;
      font-size: 24rpx;
      color: #999999;
    }

    .video-list {
      margin-top: 50rpx;
      width: 100%;
      display: grid;
      grid-template-columns: 100%;
      gap: 10rpx;

      .item-active {
        border: 4rpx solid #32c5ff !important;
      }

      .video-item {
        border: 4rpx solid transparent;
        box-sizing: border-box;
        height: 50rpx;
        display: flex;
        justify-content: left;
        uni-image {
          width: 100%;
          height: 100%;
        }
        .item-no {
          background-color: #c2e1fb;
          width: 42rpx;
          height: 42rpx;
          margin-right: 5px;
          text-align: center;
        }
        .num-active {
          background: #32c5ff !important;
        }

        .item-num {
          width: 20px;
          height: 16px;
          background: #0035a9;
          border-radius: 0px 0px 4px 0px;
          font-size: 10px;
          color: #ffffff;
          line-height: 16px;
          text-align: center;
          position: absolute;
          z-index: 1;
        }
      }
    }
  }

  .footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 32rpx;
    margin-top: 40rpx;

    .footer-word {
      font-weight: 500;
      font-size: 24rpx;
      color: #dddddd;
      line-height: 44rpx;
      letter-spacing: 4rpx;
    }
  }
}
</style>