<template>
  <Modal
    width="1200px"
    :title="title"
    @cancel="$emit('update:open', false)"
    :open="open"
    :footer="null"
  >
    <Info
      :title="$t('case.name')"
      :data="caseProject"
      :label-map="tmLabelMap1"
      v-if="caseProject"
    />
    <Info
      :title="$t('case.tmName')"
      :data="caseProject.tmProject"
      :label-map="tmLabelMap2"
      v-if="caseProject?.tmProject"
    />
  </Modal>
</template>

<script setup lang="ts">
import { Modal } from "ant-design-vue";
import Info from "./info.vue";
import { showRightPanoStack } from "@/env";
import { useViewStack } from "@/hook";
import router, { RoutesName } from "@/router";
import { title } from "@/store";
import { caseProject } from "@/store/case";
import { ref } from "vue";
import { lang } from "@/lang";

defineProps<{ open: boolean }>();
defineEmits<{ (e: "update:open", v: boolean): void }>();

type LabelMap = Record<string, string | [string, (v: any) => any]>;

const tmLabelMap1 = {
  ...lang.case.cols,
  homicideCase: [lang.case.cols.homicideCase, (v: any) => (v === null ? "" : v ? lang.case.yv : lang.case.nv)],
  criminalCase: [
    lang.case.cols.criminalCase,
    (v: any) => {
      console.error(v);
      return v === null ? "" : v ?lang.case.yv : lang.case.nv;
    },
  ],
  caseRegion: [lang.case.cols.caseRegion, (v: string[]) => v.join("-")],
  caseAddress: lang.case.cols.caseAddress,
  latAndLong: [lang.case.cols.latAndLong, (v: any) => (v ? v.split(",").reverse().join(",") : "")],
} as LabelMap;

const tmLabelMap2 = {
  ...lang.case.tmCols,
  times: [lang.case.tmCols.times, (v: string[]) => v.join("-")],
} as LabelMap;
</script>

<style lang="scss" scoped></style>
