<template>
  <div v-if="identityList.length" class="app-container">
    <el-row>
      <el-col :span="2">
        <el-button
          :icon="ArrowLeftBold"
          plain
          round
          size="small"
          type="primary"
          @click="backToHome"
          >{{ t("admin.identity.entrance.back") }}
        </el-button>
      </el-col>
      <el-col :span="22">
        <el-alert
          :style="{
            marginBottom: `10px`,
          }"
          show-icon
          :title="t('admin.identity.entrance.kindlyReminder')"
          type="warning"
        ></el-alert>
      </el-col>
    </el-row>
    <el-card shadow="always">
      <el-row :gutter="20" justify="center">
        <!--          v-show="item.id <= 2"-->
        <el-col
          v-for="item in identityList"
          :key="item.id"
          :span="4"
          @click="handleStatus(item)"
        >
          <el-card style="text-align: center; height: 100%">
            <el-image
              fit="cover"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              style="height: 100px"
            ></el-image>
            <h3>
              {{ t("admin.identity.entrance.settleIn", { type: item.title }) }}
            </h3>
            <p v-if="item.status === '0'">
              {{
                // 审核中
                t("admin.identity.entrance.underReview")
              }}
            </p>
            <div v-else-if="item.status === '2'">
              <p class="text-danger">
                <!--                审核拒绝-->
                {{ t("admin.identity.entrance.rejected") }}
              </p>
              <p
                class="text-navy"
                style="cursor: pointer"
                @click.stop="reason(item)"
              >
                <!--                查看拒绝原因-->
                {{ t("admin.identity.entrance.viewReasonsForRejection") }}
              </p>
            </div>
            <div v-else-if="item.status === '4'">
              <el-link type="primary">
                <!--                申请-->
                {{ t("admin.identity.entrance.apply") }}
              </el-link>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="mt20" shadow="always">
      <el-row :gutter="20" justify="center">
        <!--        v-show="item.id <= 2"-->
        <el-col v-for="item in identityList" :key="item.id" :span="4">
          <el-card style="text-align: center; height: 100%">
            <el-image
              fit="cover"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              style="height: 100px"
            ></el-image>
            <h3>
              {{ t("admin.identity.entrance.backstage", { type: item.title }) }}
            </h3>
            <p v-if="item.status === '1'">
              <!-- <p> -->
              <el-link type="primary" @click="handlePage(item)">
                <!--                进入-->
                {{ t("admin.identity.entrance.enter") }}
              </el-link>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script setup>
// import store from "@/store";
import { identity } from "@/api/identity";
import { useRouter } from "vue-router";
import usePermissionStore from "@/store/modules/permission";
import useUserStore from "@/store/modules/user";
import { ElMessageBox } from "element-plus";
import { ArrowLeftBold } from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";

const router = useRouter();
const { t } = useI18n();
const userStore = useUserStore();
const identityList = ref([]);
const identityDict = reactive({
  1: computed(() => t("admin.identity.entrance.company")),
  2: computed(() => t("admin.identity.entrance.expert")),
  3: computed(() => t("admin.identity.entrance.lab")),
  4: computed(() => t("admin.identity.entrance.research")),
  5: computed(() => t("admin.identity.entrance.broker")),
  // 6: "企业后台",
  // 7: "专家后台",
  // 8: "研究机构后台",
  // 9: "实验室后台",
  // 10: "科技经纪人后台",
});
onMounted(() => {
  identity().then((res) => {
    identityList.value = res.data
      .map((item) => ({
        id: item.roleId,
        title: identityDict[item.roleId],
        status: item.status,
      }))
      .slice(0, 5);
  });
});

function reason(item) {
  alert("拒绝原因：\n" + item.remark);
}

function noClicking() {
  return identityList.value.some(
    (item) => item.status === "0" || item.status === "1"
  );
}

const backToHome = () => {
  router.push({
    path: "/",
  });
};

// item.status -1>未入驻 0>审核中 1>通过 2拒绝
function handleStatus(item) {
  // console.log(item);
  const oneAccountAlert = t("admin.identity.entrance.oneAccount");
  if (noClicking()) return ElMessageBox.alert(oneAccountAlert);
  if (item.status === "4" || item.status === "2") {
    if (item.id === 1) {
      // 企业
      router.push({ path: "/identity/enterprise" });
    } else if (item.id === 2) {
      // 专家
      router.push({ path: "/identity/expert" });
    } else if (item.id === 3) {
      // 实验室
      router.push({ path: "/identity/laboratory" });
    } else if (item.id === 4) {
      // 研究机构
      router.push({ path: "/identity/research" });
    } else if (item.id === 5) {
      // 科技经纪人
      router.push({ path: "/identity/agent" });
    }
  } else if (item.status === 1) {
    alert("您已入驻，请进入后台");
  } else {
  }
}

const handlePage = async (item) => {
  let routeData = "";
  if (item.id === 1) {
    // 企业
    routeData = router.resolve({ path: "/admin" });
  } else if (item.id === 2) {
    // 专家
    routeData = router.resolve({ path: "/admin" });
  } else if (item.id === 3) {
    // 研究机构
    routeData = router.resolve({ path: "/admin" });
  } else if (item.id === 4) {
    // 实验室
    routeData = router.resolve({ path: "/admin" });
  } else if (item.id === 5) {
    // 科技经纪人
    routeData = router.resolve({ path: "/admin" });
  }
  // return window.open(routeData.href, "_blank");
  // TODO ...... 切换身份待处理
  // await permissionStore.generateRoutes(item.id);
  userStore.switchRole(item.id);
  // console.log(userStore.roleId);
  window.open(routeData.href, "_blank");
  // identitySwitch({ identity: item.id - 0 }).then((res) => {
  //   window.open(routeData.href, "_blank");
  //   console.log(res);
  // });
  // store.dispatch("GenerateRoutes", 1).then(() => {
  //   console.log(localStorage.getItem("select_identity"));
  //   window.open(routeData.href, "_blank");
  // });
};
</script>
