<template>
  <VRModelList :params="params" :dictId="dictId" :uploadShow="true">
    <template v-slot:header>
      <el-form-item label="名称：" style="grid-area: 1 / 1 / 2 / 4">
        <el-input v-model="params.pagging.state.query.title" 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 width="620" label="标题" v-slot:default="{ row }">
          <span class="truncate" :title="row.title">{{ row.title || '-' }}</span>
        </el-table-column>
        <!-- <el-table-column label="来源" width="230" prop="resource"></el-table-column> -->
        <el-table-column class="truncate" width="170" label="时间" prop="dictName" v-slot:default="{ row }">
          <span :title="row.dictName" class="truncate">{{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm") }}</span>
        </el-table-column>
      </el-table>
    </template>
  </VRModelList>
</template>

<script setup lang="ts">
import VRModelList from "./newlist.vue";
import { Scene } from "@/store/scene";
import { CaseScenes, getDictFileLists, delDictFileLists } from "@/store/case";
import { useScenePaggingParams } from "./pagging";
import { onMounted, ref, watch, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getCaseSceneList,
  getCaseScenes,
  getSceneKey,
  replaceCaseScenes,
  caseExportImg,
} from "@/store/case";
import { QuiskExpose } from "@/helper/mount";
import { ElTable, useTransitionFallthroughEmits } from "element-plus";
import dayjs from "dayjs";
const options = ref([]);
const props = defineProps<{ caseId: number, dictId: number, type: number }>();
const params = useScenePaggingParams(true);
console.log("formats", params);
const caseScenes = ref([]);
const tableRef = ref<InstanceType<typeof ElTable>>();
// const 
watch(
  () => params.pagging.state.query,
  () => {
    params.pagging.state.query.type = props.type;
    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) => {
  return useTransitionFallthroughEmits;
} 

const del = async (row) => {
  ElMessageBox.confirm('确定要删除吗？', "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await delDictFileLists(row.id);
    params.pagging.queryReset()
  });
  // if (await confirm("确定要删除吗？")) {
  //   const res = await delDictFileLists(row.id);
  //   params.pagging.queryReset()
  // }
}
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;
};
function formatSizeUnits(bytes){
  if      (bytes >= 1073741824) { bytes = (bytes / 1073741824).toFixed(2) + " GB"; }
  else if (bytes >= 1048576)    { bytes = (bytes / 1048576).toFixed(2) + " MB"; }
  else if (bytes >= 1024)       { bytes = (bytes / 1024).toFixed(2) + " KB"; }
  else if (bytes > 1)           { bytes = bytes + " bytes"; }
  else if (bytes == 1)          { bytes = bytes + " byte"; }
  else                          { bytes = "0 bytes"; }
  return bytes;
}
// 初始化数据
onMounted(async () => {
  const res = await getDictFileLists(1);
  console.log('onMounted', res);
  options.value = res;
});
const submit = () => {
  console.log(caseScenes.value);
  if(caseScenes.value && caseScenes.value.length === 0){
      ElMessage.error("请至少选中一项数据！");
      throw "请至少选中一项数据！";
  };
  
  return caseScenes.value.map((item) => item.uploadId || item.id);
};
defineExpose<QuiskExpose>({
  submit,
});
</script>
