<template>
  <VRModelList :params="params">
    <template v-slot:header>
      <el-form-item label="名称：" style="grid-area: 1 / 1 / 2 / 4">
        <el-input v-model="params.keyword" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="分组：" style="grid-area: 1 / 1 / 2 / 4">
        <el-input v-model="params.keyword" placeholder="请输入" />
      </el-form-item>
    </template>
    <template v-slot:content>
      <el-table
        :data="params.pagging.state.table.rows"
        tooltip-effect="dark"
        ref="tableRef"
        style="width: 100%"
        size="large"
        @selection-change="changeSelection"
      >
        <el-table-column type="selection" width="50" :selectable="selectable"/>
        <el-table-column label="名称" v-slot:default="{ row }">
          {{ params.isSwmx ? row.modelTitle : row.name }}
        </el-table-column>
        <el-table-column label="格式" prop="fileTypeStr"></el-table-column>
        <el-table-column label="大小" prop="modelDateType" v-if="params.isSwmx" />
        <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 }"
        :width="240"
      >
        <span
          class="oper-span"
          @click="del(row)"
          style="color: var(--primaryColor)"
          v-pdpath="['del']"
        >
          删除
        </span>
      </el-table-column>
      </el-table>
    </template>
  </VRModelList>
</template>

<script setup lang="ts">
import VRModelList from "./list.vue";
import { Scene } from "@/store/scene";
import { CaseScenes } from "@/store/case";
import { useScenePaggingParams } from "./pagging";
import { onMounted, ref, watch, watchEffect } from "vue";
import {
  getCaseSceneList,
  getCaseScenes,
  getSceneKey,
  replaceCaseScenes,
} from "@/store/case";
import { QuiskExpose } from "@/helper/mount";
import { ElTable } from "element-plus";

const props = defineProps<{ caseId: number, formats: Array<string> }>();
const params = useScenePaggingParams();
const caseScenes = ref([]);
const tableRef = ref<InstanceType<typeof ElTable>>();
// const 
watch(
  () => params.pagging.state.query,
  () => {
    params.pagging.state.query.status = 2;
    params.pagging.state.query.caseId = props.caseId;
  },
  { immediate: true, deep: true }
);
// 复选框同步
watchEffect(() => {
  if (!tableRef.value) return;
  const selectKeys = caseScenes.value.map((item) => item.id);
  console.log('caseScenes.value', caseScenes.value);
  // 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(scene.id));
  });
});

const selectable = (row) => {
  console.log("row", row);
  const fileType = row.fileUrl?.substring(row.fileUrl.lastIndexOf("."))
      .toLowerCase();
  return props.formats.includes(fileType);
}

const changeSelection = (selectScenes) => {
  if (params.pagging.loading) return;
  const pagScenes = params.pagging.state.table.rows;
  const type = params.pagging.state.query.type;
  caseScenes.value = selectScenes;
};
// 初始化数据
onMounted(async () => {
  // caseScenes.value = getCaseScenes(await getCaseSceneList(props.caseId));
});
const submit = () => {
  console.log(caseScenes.value);
  return caseScenes.value;
  // () => replaceCaseScenes(props.caseId, caseScenes.value)
};
defineExpose<QuiskExpose>({
  submit,
});
</script>
