<template>
  <div class="scene">
    <span class="title1" style="line-height: 32px">{{$t('sceneHome.dyrh')}}</span>
    <el-button class="w-full my-4" @click="handleAdddyrh">{{$t('program.sceneDown.edit')}}</el-button>
    <div class="scene-list">
      <div class="scene-title flex justify-between content-center">
        <span class="title1" style="line-height: 32px">{{$t('sceneHome.sceneList')}}</span>
        <!-- <el-switch v-model="active" @change="handleActive" /> -->
      </div>
      <el-button
        class="w-full my-4"
        @click="handleAdd"
        style="margin-left: 0; margin-right: 0"
        >{{$t('common.add')}}</el-button
      >
      <div class="list" v-if="active" style="min-height: 630px">
        <div
          class="listItem flex justify-between py-2"
          v-for="(item, index) in list"
          :key="index"
        >
          <span class="anmc" :title="item.name">{{
            item.name || $t('sceneHome.dyrh')
          }}</span>
          <div class="cursor-pointer" quaternary type="primary">
            <span
              class="mr-4"
              @click="handlegotoelT(item)"
              :style="{ color: item.inFusion ? '#ccc' : '' }"
              >{{$t('sceneHome.yc')}}</span
            >
            <span @click="handlegotoEdit(item)">{{$t('program.sceneDown.edit')}}</span>
          </div>
          <!-- <div @click="handlegotoEdit(item)" class="cursor-pointer" quaternary type="primary">编辑</div> -->
        </div>
      </div>
      <!-- <el-button
                class="w-full"
                type="primary"
                @click="submitForm"
              >
                保存
              </el-button> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getCaseSceneList,
  getUrlSrc,
  getSceneListTree,
  setCaseaddOrUpdate,
} 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 { ElMessage } from "element-plus";
import ModelContent from "./modelContent.vue";
import { useScenePaggingParams } from "./pagging";
import { computed, ref, onMounted } from "vue";
import { tableModelScene } from "./quisk";
import { ui18n } from '@/i18n'
import { windowOpen } from "@/util";
const active = ref(true);
const locale = ui18n.locale
const list = ref([]);
const isEdit = ref(false);
const showModal = ref(false);
const params = useScenePaggingParams();
const caseId = computed(() => router.currentRoute.value?.params?.caseId);
onMounted(() => {
  geiList();
  console.log("router.currentRoute.value", caseId);
});
async function geiList() {
  list.value = await getCaseSceneList(caseId.value);
  console.log("res", list.value);
}
function handlegotoEdit(record) {
  let url = getUrlSrc(record, caseId.value)
    // record.type == 2 || record.type == 5
    //   ? `/mega/index.html?m=${record.num}`
    //   : `/epg.html?m=${record.num}`;
      windowOpen(url.replace("spg", "epg"));
}
function handleAdddyrh(record) {
  
  let url = getUrlSrc({ type: 100 }, caseId.value)
  windowOpen(url);
}
async function handlegotoelT(record) {
  isEdit.value = true;
  // if (record.inFusion) {
  //   ElMessage.error("无法移除，场景已加入多元融合，请进入多元融合移除场景后再试");
  //   return
  // }
  if (record.inFusion || (await confirm(ui18n.t('sceneHome.ycTips')))) {
    list.value = list.value.filter((item) => item.id !== record.id);
    submitForm();
  }
  // console.log("handleActive", params);
}
async function submitForm() {
  isEdit.value = false;
  let sublist = getSceneListTree(list.value);
  const apiData = {
    // caseTitle: caseId.value,
    caseId: caseId.value,
    sceneNumParam: sublist,
  };
  setCaseaddOrUpdate(apiData).then((res) => {
    geiList();
    ElMessage({
      message: ui18n.t('program.resStatus.200'),
      type: "success",
    });
  }).catch((errr) => {
    console.log("setCaseaddOrUpdateerrr", errr);
    return geiList();
  })
};
  // window.location.reload()
  // console.log("handleActive", params);
async function handleAdd() {
  // if(isEdit.value){
  //   await confirm("请先保存当前移除的场景信息！")
  //   return
  // }
  let numList = list.value.map((item) => item.num);
  console.log("handleAdd", numList);
  let val = await tableModelScene({ numList: numList });
  geiList();
  if (val) {
    console.log("刷新列表");
  }
}
</script>
<style scoped>
.anmc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 190px;
}
.cursor-pointer {
  color: var(--primaryColor);
}
</style>
