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

  <div class="body-layer">
    <div class="body-head">
      <h3 style="visibility: hidden">场景管理</h3>
      <div>
        <template v-if="isDraw">
          <el-button type="primary" @click="gotoDraw(BoardType.map, -1)">
            创建{{ BoardTypeDesc[BoardType.map] }}
          </el-button>
          <el-button type="primary" @click="gotoDraw(BoardType.scene, -1)">
            创建{{ BoardTypeDesc[BoardType.scene] }}
          </el-button>
        </template>
        <el-button type="primary" @click="addCaseFileHandler"> 上传 </el-button>
      </div>
    </div>

    <el-table :data="files" tooltip-effect="dark" style="width: 100%" size="large">
      <el-table-column label="序号" width="70" v-slot:default="{ $index }">
        <div style="text-align: center">
          {{ $index + 1 }}
        </div>
      </el-table-column>
      <el-table-column label="名称" v-slot:default="{ row }: { row: CaseFile }">
        <span v-if="!inputCaseTitles.includes(row)">
          {{ row.filesTitle }}
          <el-icon class="edit-title" @click="inputCaseTitles.push(row)">
            <EditPen />
          </el-icon>
        </span>
        <template v-else>
          <ElInput
            v-model="row.filesTitle"
            placeholder="请输入文件名"
            focus
            :maxlength="50"
            style="width: 280px"
          >
            <template #append>
              <el-button type="primary" plain @click="updateFileTitle(row)">
                确定
              </el-button>
            </template>
          </ElInput>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }: { row: CaseFile }">
        <span class="oper-span" @click="query(row)"> 查看 </span>
        <span
          class="oper-span"
          @click="gotoDraw(row.imgType!, row.filesId)"
          v-if="row.imgType !== null"
        >
          编辑
        </span>
        <span class="oper-span delBtn" @click="del(row)"> 删除 </span>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import comHead from "@/components/head/index.vue";
import { confirm } from "@/helper/message";
import { RouteName, router } from "@/router";
import { FileDrawType, BoardTypeDesc } from "@/constant/caseFile";
import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
import { addCaseFile } from "./quisk";
import { title, desc } from "@/store/system";
import {
  CaseFile,
  CaseFileType,
  getCaseFileTypes,
  getCaseFiles,
  delCaseFile,
  BoardType,
} from "@/store/caseFile";
import { getCaseInfo, updateCaseInfo } from "@/store/case";
import { appConstant } from "@/app";
import { ElIcon, ElInput, ElMessage } from "element-plus";

const caseId = computed(() => {
  const caseId = router.currentRoute.value.params.caseId;
  if (caseId) {
    return Number(caseId);
  }
});

const inputCaseTitles = ref<CaseFile[]>([]);

const updateFileTitle = async (caseFile: CaseFile) => {
  if (!caseFile.filesTitle.trim()) {
    return ElMessage.error("卷宗标题不能为空！");
  }
  await updateCaseInfo(caseFile);
  inputCaseTitles.value = inputCaseTitles.value.filter((item) => item !== caseFile);
};

const currentTypeId = ref<number>();
const types = ref<CaseFileType[]>([]);
const options = computed(() =>
  types.value.map((item) => ({ name: item.filesTypeName, value: item.filesTypeId }))
);
const isDraw = computed(() => currentTypeId.value === FileDrawType);

const files = ref<CaseFile[]>([]);
const refresh = async () => {
  files.value = await getCaseFiles({
    caseId: caseId.value!,
    filesTypeId: currentTypeId.value,
  });
};
watchEffect(() => caseId.value && currentTypeId.value && refresh());

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

const addCaseFileHandler = async () => {
  await addCaseFile({ caseId: caseId.value!, fileType: currentTypeId.value! });
  refresh();
};

const gotoDraw = (type: BoardType, id: number) => {
  router.push({
    name: RouteName.drawCaseFile,
    params: { caseId: caseId.value!, type, id },
  });
};

onMounted(async () => {
  types.value = await getCaseFileTypes();
  currentTypeId.value = types.value[0].filesTypeId;
  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 });
  }
});

onUnmounted(() => {
  title.value = appConstant.title;
  desc.value = appConstant.desc;
});
</script>

<style scoped lang="scss">
.edit-title {
  cursor: pointer;
  margin-left: 10px;
}
</style>
