<template>
  <div class="project-card">
    <section class="video" v-loading="loading">
      <div class="title">
        <el-select v-model="params.project" @change="projectChange" placeholder="选择项目" style="width: 300px">
          <el-option v-for="row in projectList" :key="row.id" :label="row.name" :value="row.code"></el-option>
        </el-select>
        <!-- <el-select v-model="params.type" placeholder="" style="width: 9vw; margin-left: 1.6vw">
				<el-option label="视频监控" value="1"></el-option>
				<el-option label="组态" value="2"></el-option>
			</el-select> -->
        <div class="full-screent-icon" @click="fullScreen = true">
          <el-icon color="#409eff" size="18px"><ele-FullScreen /></el-icon>
          <!-- <img src="/@/assets//project/full-screen.svg" style="height: 32px;" /> -->
        </div>
      </div>
      <div class="video-content">
        <template v-if="params.type === '2' && topoSrc">
          <iframe :src="topoSrc" frameborder="0"></iframe>
        </template>
      </div>
      <el-dialog v-model="fullScreen" class="video-screen-dialog" fullscreen append-to-body>
        <iframe v-if="fullScreen" :src="topoSrc" frameborder="0" style="height: calc(100vh - 75px)"></iframe>
      </el-dialog>
    </section>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, inject, watch, Ref } from "vue";
import api from "/@/api/projects";

const emit = defineEmits(["change"]);

const { projectList } = defineProps(["projectList"]);
const projectCode = inject<Ref<string>>("projectCode", ref(""));
const fullScreen = ref(false);
const loading = ref(false);
const topoSrc = ref("");

watch(() => projectCode.value, projectChange);

const params = reactive({
  project: projectCode,
  type: "2",
});

function projectChange(code: string) {
  topoSrc.value = "";
  loading.value = true;

  emit("change", code);

  api.screen
    .projectDevices(code)
    .then((res: any) => {
      const topoKey = (res || []).find((row: any) => row.resourcesTypes === 2)?.resourcesKey;
      topoSrc.value = topoKey ? "/plugin/topo/#/show/" + topoKey : "";
      // topoSrc.value = topoKey ? 'https://zhgy.sagoo.cn/plugin/topo/index.html#/show/' + topoKey : ''
    })
    .finally(() => (loading.value = false));
}
</script>
<style lang="scss" scoped>
iframe {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.project-card {
  flex: 1;
}

.video {
  height: 100%;
  pointer-events: all;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;

  .video-content {
    width: 100%;
    flex: 1;
    padding: 0 2px;
    position: relative;
  }

  .title {
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .full-screent-icon {
      color: var(--primary-color);
      cursor: pointer;
    }
    .label {
      font-weight: 500;
    }
  }
}
</style>
