<template>
  <com-head
    :options="options"
    v-model="currentTypeId"
    notContent
    v-if="options.length"
  />

  <div class="body-layer media">
    <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">User</el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs> -->
    <div class="body-head media-head">
      <el-button type="primary" class="btn" @click="handleUploadClick">
        上传
      </el-button>

      <el-tabs
        v-if="isReady"
        v-model="subTabName"
        class="sub-tab"
        tab-position="top"
        :lazy="true"
        @tab-click="handleSubtabClick"
      >
        <el-tab-pane
          v-if="isReady"
          v-for="sub in subOptions"
          :label="sub.name"
          :name="sub.value"
        >
          <div class="media-list" v-if="files.length">
            <div v-for="file in files" class="cover">
              <div class="img">
                <img :src="file.filesUrl" />
                <div class="actions">
                  <el-button type="text" @click="query(file)"> 查看 </el-button>
                  <el-button type="text" @click="handerPhotoEdit(file)">
                    编辑
                  </el-button>
                  <el-button type="text" @click="handerPhotoDelete(file)">
                    删除
                  </el-button>
                </div>
              </div>
              <span class="title">{{ file.filesTitle }}</span>
            </div>
          </div>
          <el-empty v-else class="empty"></el-empty>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed, watchEffect, watch } from "vue";
import comHead from "@/components/head/index.vue";
import { title, desc } from "@/store/system";
import { confirm } from "@/helper/message";
import {
  CaseFile,
  CaseFileType,
  getCaseFileTypesQuery,
  getCaseFiles,
  delCaseFile,
  BoardType,
} from "@/store/caseFile";
import { getCaseInfo } from "@/store/case";
import { RouteName, router } from "@/router";
import { addCaseFile } from "../case/quisk";

import type { TabsPaneContext } from "element-plus";
const activeName = ref("first");
const isReady = ref(false);
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const caseId = computed(() => {
  const caseId = router.currentRoute.value.params.caseId;
  if (caseId) {
    return Number(caseId);
  }
});
const currentTypeId = ref<number>();
const options = ref<{ name: string; value: number; childKey?: string }[]>([]);
const subOptions = ref<{ name: string; value: number }[]>([]);
const files = ref<CaseFile[]>([]);
const subTabName = ref();

const handleSubtabClick = (value: number) => {
  // console.log("handleSubtabClick", value);
  // currentTypeId.value = value;
};
const handleUploadClick = async () => {
  console.log("handleUploadClick");
  await addCaseFile({ caseId: caseId.value!, fileType: subTabName.value! });
  refresh();
};

const handerPhotoEdit = (file: CaseFile) => {
  console.log("handerPhotoEdit", file);
  router.push({
    name: RouteName.drawCaseFile,
    params: { caseId: caseId.value!, type: 2, id: file.filesId },
    query: { filesTypeId: file.filesTypeId },
  });
};

const handerPhotoDelete = async (file: CaseFile) => {
  console.log("handerPhotoDelete", file);
  if (await confirm("确定要删除此数据？")) {
    await delCaseFile({ caseId: caseId.value!, filesId: file.filesId });
    refresh();
  }
};

const query = (file: CaseFile) =>
  window.open(file.filesUrl + "?time=" + Date.now());

const initDefaultData = async () => {
  const data = await getCaseFileTypesQuery("library");
  const rootList = data.map((item) => {
    return {
      name: item.filesTypeName,
      value: item.filesTypeId,
      childKey: item.childKey,
    };
  });
  options.value = rootList;
  currentTypeId.value = rootList[0].value;

  const secondData = rootList[0].childKey
    ? await getCaseFileTypesQuery(rootList[0].childKey)
    : [];
  const secondList = secondData.map((item) => {
    return {
      name: item.filesTypeName,
      value: item.filesTypeId,
    };
  });
  subTabName.value = secondList[0].value;
  subOptions.value = secondList;
  isReady.value = true;
};
watchEffect(() => caseId.value && subTabName.value && refresh());

watch(currentTypeId, async (nVal, oVal) => {
  if (oVal && nVal !== oVal) {
    //切换时
    const root = options.value.find((i) => i.value === nVal);
    if (root) {
      const secondData = root.childKey
        ? await getCaseFileTypesQuery(root.childKey)
        : [];
      const secondList = secondData.map((item) => {
        return {
          name: item.filesTypeName,
          value: item.filesTypeId,
        };
      });
      subTabName.value = secondList[0].value;
      subOptions.value = secondList;
    }
    //  const data = await getCaseFileTypesQuery("library");
  }
});
const refreshRoot = async () => {
  console.log("refreshRoot");
};
const refresh = async () => {
  files.value = await getCaseFiles({
    caseId: caseId.value!,
    filesTypeId: subTabName.value,
  });
};
onMounted(async () => {
  const caseInfo = await getCaseInfo(caseId.value!);
  if (caseInfo) {
    title.value = (await getCaseInfo(caseId.value!)).caseTitle + " | 媒体库";
    desc.value = "";
  } else {
    console.error("该案件不存在！");
    router.replace({ name: RouteName.vrmodel });
  }
  console.log("caseId", caseId.value);
  initDefaultData();
});
</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
