<template>
  <div class="body-head">
    <!-- <h3 style="visibility: hidden">场景管理</h3> -->
  </div>

  <el-table
    class="mybody-head"
    :data="pagging.state.table.rows"
    ref="tableRef"
    tooltip-effect="dark"
    style="width: 100%;height: 250px;"
    :height="250"
    size="large"
    @selection-change="changeSelection"
  >
    <!-- -1 计算失败  0 计算中 1 计算成功并可以外网访问，不能编辑 2计算成功只能内网，能编辑 -->
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <!-- <el-table-column label="序号" width="70" v-slot:default="{ $index }">
      <div style="text-align: center">
        {{ pagging.state.pag.size * (pagging.state.pag.currentPage - 1) + $index + 1 }}
      </div>
    </el-table-column> -->
    <el-table-column label="场景标题" prop="sceneName"></el-table-column>
    <el-table-column label="S/N码" prop="snCode"></el-table-column>
    <!-- <el-table-column label="浏览数量" prop="viewCount"></el-table-column> -->
    <el-table-column label="拍摄时间" prop="createTime" v-slot:default="{ row }">
      {{ row.createTime.substr(0, 16) }}
    </el-table-column>
    <el-table-column label="状态" v-slot:default="{ row }: { row: QuoteScene }">
      {{ QuoteSceneStatusDesc[row.status] }}
    </el-table-column>
    <!-- <el-table-column label="所属架构" prop="deptName"></el-table-column> -->
    <!-- <el-table-column label="操作" v-slot:default="{ row }: { row: QuoteScene }">
      <span
        class="oper-span"
        v-pdpath="['view']"
        @click="openSceneUrl(row, OpenType.query)"
        v-if="row.status === QuoteSceneStatus.SUCCESS"
      >
        查看
      </span>
      <span
        class="oper-span"
        v-pdpath="['edit']"
        @click="openSceneUrl(row, OpenType.edit)"
        v-if="row.status === QuoteSceneStatus.SUCCESS"
      >
        编辑
      </span>
      <span
        v-if="
          [SceneType.SWSS, SceneType.SWYDSS].includes(row.type) &&
          [QuoteSceneStatus.SUCCESS].includes(row.status) &&
          row.location === LocationEnum.Scene_Location_PointCloud
        "
        v-pdpath="['gen']"
        class="oper-span"
        @click="genMeshScene(row)"
      >
        生成obj
      </span>

      <span
        v-if="
          ![SceneType.SWSSMX, SceneType.SWYDMX].includes(row.type) &&
          row.status !== QuoteSceneStatus.RUN
        "
        class="oper-span delBtn"
        v-pdscene="row"
        @click="delSceneHandler(row)"
        v-pdpath="'del'"
      >
        删除
      </span>
      <span
        class="oper-span"
        @click="sceneDownloadHandler(row)"
        v-pdpath="['download']"
        v-if="row.num && row.status === QuoteSceneStatus.SUCCESS"
      >
        下载
      </span>
    </el-table-column> -->
  </el-table>
</template>

<script setup lang="ts">
import {
  QuoteScene,
  QuoteSceneStatus,
  delQuoteScene,
  SceneType,
  genMeshScene,
  LocationEnum,
} from "@/store/scene";
import { ScenePagging } from "./pagging";
import { QuoteSceneStatusDesc } from "@/constant/scene";
import { OpenType, openSceneUrl } from "../case/help";
import { confirm } from "@/helper/message";
import { sceneDownload } from "./quisk";
import { useScenePaggingParams } from "./pagging";
import { QuiskExpose } from "@/helper/mount";
import { onMounted, ref, watch, watchEffect } from "vue";
import {
  getCaseSceneList,
  getCaseScenes,
  getSceneKey,
  replaceCaseScenes,
  setCaseaddOrUpdate,
} from "@/store/case";
const params = useScenePaggingParams();
const tableRef = ref(null);
const caseScenes = ref([
  {
    type: 0,
    numList: [],
  },
  {
    type: 1,
    numList: [],
  }
]);
const submit = async () => {
  const apiData = {
    caseTitle: props.caseId,
    sceneNumParam: caseScenes.value,
  };
  await setCaseaddOrUpdate(apiData)
  // params.pagging.queryReset()
  }
defineExpose<QuiskExpose>({
  submit
});
const props = defineProps<{ pagging: ScenePagging, numList: Array<string> }>();
const delSceneHandler = async (scene: QuoteScene) => {
  if (await confirm("确定要删除当前场景吗？")) {
    await delQuoteScene(scene);
    props.pagging.refresh();
  }
};
console.log('propsnumList', props.numList);
const selectable = (row) => {
  console.log('selectable', row.num);
  return !props.numList.includes(row.num)
}
// 复选框同步
watchEffect(() => {
  if (!tableRef.value) return;
  const selectKeys = caseScenes.value.find(
    (item) => item.type === params.pagging.state.query.type
  )!.numList;

  params.pagging.state.table.rows.forEach((scene) => {
    tableRef.value!.toggleRowSelection(scene, selectKeys.includes(getSceneKey(scene)));
  });
});
const changeSelection = (selectScenes) => {
  if (params.pagging.loading) return;
  const pagScenes = params.pagging.state.table.rows;
  const type = params.pagging.state.query.sceneType;
  console.log('changeSelection', params, type);
  const typeCaseScenes = caseScenes.value.find((item) => item.type == type)!;
  const oldKeys = caseScenes.value.find((item) => item.type == type)!.numList;
  const pagKeys = pagScenes.map(getSceneKey);
  const selectKeys = selectScenes.map(getSceneKey);
  console.log('changeSelection', oldKeys, pagKeys, selectKeys);
  let newlist = oldKeys
    // 保留其他页的key，剔除当前页的key
    .filter((key) => !pagKeys.includes(key))
    // 拼接上当前页选中的key
    .concat(selectKeys);
  typeCaseScenes.numList = [...new Set(newlist)];
  console.log('changeSelection', selectScenes, caseScenes.value);

};
const sceneDownloadHandler = (scene: QuoteScene) => {
  sceneDownload({ scene });
};
</script>
<style scoped lang="scss">
.mybody-head{
    flex: auto !important;
}
</style>
