<template>
  <el-dialog
    v-model="visible"
    :title="tabs[tabActive]?.label || '上传数据'"
    width="80%"
  >
    <div v-show="tabActive < 0">
      <div
        v-for="(item, index) in tabs"
        :key="index"
        class="shadow rounded-md mb-4 p-4 hover:bg-gray-50 cursor-pointer flex items-center"
        :class="{ 'bg-gray-50': tabActive === index }"
        @click="changeTab(index)"
      >
        <img :src="item.icon" alt="" class="w-12 mr-1" />
        <div>
          <div
            class="text-base font-bold"
            :class="{
              'text-blue-500': tabActive === index
            }"
          >
            {{ item.label }}
          </div>
          <div class="text-sm text-gray-500">{{ item.tip }}</div>
        </div>
      </div>
    </div>
    <div v-show="tabActive >= 0">
      <el-button type="primary" link class="mb-4" @click="tabActive = -1"
        >返回重新选择</el-button
      >
      <component
        v-if="tabs[tabActive]?.component"
        :is="tabs[tabActive].component"
      ></component>
    </div>
    <!-- <el-tabs v-model="tabActive" type="card">
      <el-tab-pane
        v-for="(item, index) in tabs"
        :key="index"
        :label="item.label"
        lazy
        :name="index"
      >
        <component v-if="item.component" :is="item.component"></component>
        <el-empty v-else description="开发中"></el-empty>
      </el-tab-pane>
    </el-tabs> -->
  </el-dialog>
</template>

<script setup>
import {
  computed,
  ref,
  shallowRef,
  provide,
  inject,
  defineAsyncComponent
} from "vue";
import { request } from "@/utils";
import { usePermissionStoreHook } from "@/store/modules/permission";
import monitoring from "@/assets/icon-upload-monitoring.png";
import residents from "@/assets/icon-upload-residents.png";
import iconReturn from "@/assets/icon-upload-return.png";
import iconCheckData from "@/assets/icon-checkdata.png";
import visits from "@/assets/icon-upload-visits.png";
import physical from "@/assets/icon-upload-physical.png";
import { useRoute, useRouter } from "vue-router";
const [route, router] = [useRoute(), useRouter()];

const defaultArchivesId = inject("defaultArchivesId") || "";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:visible"]);
const visible = computed({
  get() {
    return props.visible;
  },
  set(v) {
    emits("update:visible", v);
  }
});
provide("closeUploadDialog", () => {
  visible.value = false;
});
const tabActive = ref(-1);
const tabs = ref([
  //   , {
  //   label: '门诊记录',
  //   component: null
  // }, {
  //   label: '住院记录',
  //   component: null
  // }, {
  //   label: '手动录入',
  //   component: null
  // }
]);
const changeTab = index => {
  if (tabs.value[index].externalLink) {
    return router.push({
      path: tabs.value[index].externalLink,
      query: {
        archivesId: defaultArchivesId.value
      }
    });
  }
  tabActive.value = index;
};
const permissions = shallowRef([]);
const getPermissions = async () => {
  const { data } = await request.get(`/mechanismService/mechanism/profile`);
  permissions.value = data.profile?.permissions || [];

  if (permissions.value.includes("data:upload:medicalReport")) {
    tabs.value.push({
      label: "检查报告",
      tip: "需要上传原始数据资料，原始数据资料支持PDF或图片(JPG、JPEG、PNG)格式",
      icon: physical,
      component: defineAsyncComponent(() => import("./MedicalReportUpload.vue"))
    });
  }
  if (permissions.value.includes("data:upload:visitRecord")) {
    tabs.value.push({
      label: "巡访数据",
      tip: "需要上传原始数据资料，原始数据资料支持PDF或图片(JPG、JPEG、PNG)格式",
      icon: visits,
      component: defineAsyncComponent(() => import("./VisitsDataUpload.vue"))
    });
  }
  if (permissions.value.includes("data:upload:inspectData")) {
    tabs.value.push({
      label: "检查数据",
      tip: "手动录入检查数据，可上传原始数据资料，原始数据资料支持PDF或图片（JPG、GPEG、PNG）格式",
      icon: iconCheckData,
      externalLink: "/data/uploadCheckData"
    });
  }
  if (permissions.value.includes("data:upload:demand")) {
    tabs.value.push({
      label: "居民需求",
      tip: "需要上传原始数据资料，原始数据资料支持PDF或图片(JPG、JPEG、PNG)格式",
      icon: residents,
      component: defineAsyncComponent(() => import("./NeedsUpload.vue"))
    });
  }

  if (permissions.value.includes("data:upload:dailyMonitor")) {
    tabs.value.push({
      label: "日常监测数据",
      tip: "如血压、血糖等数据。可上传原始数据资料，原始数据资料支持PDF或图片（JPG、JPEG、PNG）格式",
      icon: monitoring,
      component: defineAsyncComponent(() =>
        import("./MonitoringDataUpload.vue")
      )
    });
  }
  if (permissions.value.includes("data:upload:diseaseVisit")) {
    tabs.value.push({
      label: "回访数据",
      tip: "如疾病或者其他回访记录。可上传原始数据资料，原始数据资料支持PDF或图片(JPG、JPEG、PNG)格式",
      icon: iconReturn,
      component: defineAsyncComponent(() =>
        import("./DiseaseVisitDataUpload.vue")
      )
    });
  }
};
getPermissions();
</script>

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