<template>
  <div class="scene flex justify-end content-center">
    <div class="scene-list" v-if="list.length">
      <div class="scene-title" v-if="!show ">
        <el-button class="newbut" @click="handleAdd">
          <i class="iconfont icon-import" style="margin-right: 5px"></i>
          导入
        </el-button>
      </div>
      <div
        class="list"
        v-if="active"
      >
        <div
          class="listItem py-4 "
          v-for="(item, index) in list"
          :key="index"
          :class="{active: item.num === sceneItem.num, disabled: !item.viewAuth}"
          @click="handleItem(item)"
        >
          <div class="anmc" :title="item.title">{{ item.title || item.sceneName }}</div>
          <div class="cursor-pointer" v-show="!show" v-if="item.num === sceneItem.num && (item.editAuth || caseInfoData.isAuthor)" quaternary type="primary">
            <el-icon v-if="item.editAuth" style="margin-right: 34px" title="编辑">
              <EditPen @click="handlegotoEdit(item)" />
            </el-icon>
            <el-icon title="移除">
              <CircleClose @click="handlegotoelT(item)" />
            </el-icon>
          </div>
          <div class="cursor-pointer" v-show="!show" v-else-if="!item.viewAuth && caseInfoData.isAuthor">
            <el-icon title="移除">
              <CircleClose @click.stop="handlegotoelT(item)" />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
      <div
        class="app-scene"
        ref="sceneRef"
        :style="{
          width: list.length == 0?'100%':'',

          height: '100%',
        }"
      >
      <iframe
        v-if="list && list.length && sceneURL"
        :src="sceneURL"
        frameborder="0"
        :style="{ width: '100%', height: '100%' }"
      ></iframe>
      <div class="import" v-else @click="handleAdd" v-show="!show">
        <el-icon size="26" color="#26559B">
          <i style="font-size: 26px; color: #26559B" class="iconfont icon-import"></i></el-icon>
        <div class="name">导入</div>
      <div class="noData" >
        <div class="name" style="margin-top: 25px;">暂无数据</div>
      </div>
      </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import {
  getCaseSceneList,
  getCaseList,
  getUrlSrc,
  getSceneListTree,
  setCaseaddOrUpdate,
  show,
  caseInfoData,
} from "@/store/case";
import { router } from "@/router";
import comSelect from "@/components/company-select/index.vue";
import List from "./list.vue";
import SceneContent from "./sceneContent.vue";
import { Plus, DocumentAdd, EditPen } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import ModelContent from "./modelContent.vue";
import { useScenePaggingParams } from "./pagging";
import { computed, ref, onMounted } from "vue";
import { tableModelScene } from "./quisk";
const active = ref(true);
const list = ref([]);
const isEdit = ref(false);
const showModal = ref(false);
const sceneURL = ref('');
const sceneNum = ref('');
const sceneItem = ref({
  id: '',
  num: '',
});
const params = useScenePaggingParams();
const caseId = computed(() => router.currentRoute.value?.params?.caseId);
onMounted(() => {
  geiList();
});
async function geiList(refresh) {
  list.value = await getCaseList({caseId: caseId.value, type: 'scene'}) || [];
  sceneItem.value = (list.value && list.value.find(ele => ele.viewAuth)) || {};
  console.log("sceneURL", sceneItem.value);
  sceneURL.value = getUrlSrc({...sceneItem.value, type: sceneItem.value.sceneType}, caseId.value);
  console.log("sceneURL", list.value, sceneURL.value);
}
function handlegotoEdit(record) {
  if (record.isLaser) return;

  let url =
    record.type == 2 || record.type == 5
      ? `/mega/index.html?m=${record.num}`
      : `/epg.html?m=${record.num}`;
  window.open(url.replace("spg", "epg"));
}
function handleAdddyrh(record) {
  let url = `/code/index.html?caseId=${caseId.value}#/fuseEdit/merge`;
  window.open(url);
}
async function handlegotoelT(record) {
  isEdit.value = true;
  if (record.inFusion) {
    list.value = list.value.filter((item) => item.num !== record.num);
    submitForm();
    return;
  }
  ElMessageBox.confirm('确定要移除当前场景吗？', "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    list.value = list.value.filter((item) => item.num !== record.num);
    sceneItem.value = (list.value && list.value.find(ele => ele.viewAuth)) || {};
    sceneURL.value = getUrlSrc({...sceneItem.value, type: sceneItem.value.sceneType}, caseId.value);
    submitForm();
  });
}
async function submitForm() {
  isEdit.value = false;
  let sublist = getSceneListTree(list.value);
  const apiData = {
    caseId: caseId.value,
    sceneNumParam: sublist,
  };
  setCaseaddOrUpdate(apiData)
    .then((res) => {
      geiList(true);
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    })
    .catch((errr) => {
      console.log("setCaseaddOrUpdateerrr", errr);
      return geiList(true);
    });
}
async function handleAdd() {
  let numList = [], noEditList = [];
  list.value.map((item) => {
    // item.num
    numList.push(item.num);
    if(!item.editAuth) {
      noEditList.push(item.num)
    }
  });
  let val = await tableModelScene({ numList: numList, noEditList });
  geiList(true);
  if (val) {
    console.log("刷新列表");
  }
}
function handleItem(item) {
  console.log("handleItem", item);
  if(!item.viewAuth) return ElMessage.error("您没有查看权限，请联系管理员开通");
  sceneItem.value = item;
  sceneURL.value = getUrlSrc({...sceneItem.value, type: sceneItem.value.sceneType}, caseId.value);
  
}
</script>

<style scoped lang="scss">
.scene {
  height: 100%;

  .scene-list {
    width: var(--leftwidth);
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    .scene-title{
      height: 64px;
      padding: 24px 48px 0 48px;
      .newbut{
        position: relative;
        left: -16px;
      }
    }
    .list{
      .listItem{
        width: calc(var(--leftwidth) - 0px);
        cursor: pointer;
        padding: 25px 48px;
        &:hover{
          background: rgba(69,144,255,0.1);;
        }
      }
      .active{
        background: rgba(69,144,255,0.1);;
      }
      .disabled{
        color: rgba(0,0,0,0.3);
        cursor:not-allowed;
      }
    }
  }
  .app-scene {
    background: #f5f5f5;
    width: calc(100% - var(--leftwidth));
    position: relative;
  border-right: 48px solid #fff;
  border-bottom: 48px solid #fff;
    .import {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      margin-right: 20px;
      padding-top: 40px;
      height: 148px;
      width: 148px;
      text-align: center;
      background: #fafafa;
      cursor: pointer;
      .noData{
        position: absolute;
        top: 140px;
        width: 100%;
        // transform: translate(50%, -50%);
      }
    }
  }
  .anmc {
    width: 100%;
    overflow: hidden;
    margin-bottom: 16px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-all;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
  }
  .cursor-pointer {
    color: var(--primaryColor);
    text-align: right;
  }
}
</style>
