<template>
  <div class="app-container" v-if="identityList.length">
    <el-card shadow="always">
      <el-row :gutter="20" justify="center">
        <el-col
          :span="4"
          v-for="item in identityList.slice(0, 5)"
          v-show="item.id <= 2"
          :key="item.id"
          @click="handleStatus(item)"
        >
          <el-card style="text-align: center; height: 100%">
            <el-image
              style="height: 100px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              fit="cover"
            ></el-image>
            <h3>{{ `${item.title}入驻` }}</h3>
            <p v-if="item.status == 0">审核中</p>
            <div v-else-if="item.status == 2">
              <p class="text-danger">审核拒绝</p>
              <p
                class="text-navy"
                style="cursor: pointer"
                @click.stop="reason(item)"
              >
                查看拒绝原因
              </p>
            </div>
            <div v-else-if="item.status == 4">
              <el-link type="primary">申请</el-link>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="mt20" shadow="always">
      <el-row :gutter="20" justify="center">
        <el-col
          :span="4"
          v-for="item in identityList.slice(0, 5)"
          v-show="item.id <= 2"
          :key="item.id"
        >
          <el-card style="text-align: center; height: 100%">
            <el-image
              style="height: 100px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              fit="cover"
            ></el-image>
            <h3>{{ `${item.title}后台` }}</h3>
            <p v-if="item.status == 1">
              <!-- <p> -->
              <el-link type="primary" @click="handlePage(item)">进入</el-link>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script setup>
// import store from "@/store";
import { identity, settled, identitySwitch } from "@/api/identity/index";
import { useRouter } from "vue-router";
import usePermissionStore from "@/store/modules/permission";
import useUserStore from "@/store/modules/user";
import { ElMessageBox } from "element-plus";
const router = useRouter();

const permissionStore = usePermissionStore();
const userStore = useUserStore();
const identityList = ref([]);
const identityDict = {
  1: "企业",
  2: "专家",
  3: "研究机构",
  4: "实验室",
  5: "科技经纪人",
  // 6: "企业后台",
  // 7: "专家后台",
  // 8: "研究机构后台",
  // 9: "实验室后台",
  // 10: "科技经纪人后台",
};
onMounted(() => {
  identity().then((res) => {
    console.log(res.data);
    res.data.forEach((item) => {
      identityList.value.push({
        id: item.roleId,
        title: identityDict[item.roleId],
        status: item.status,
      });
    });
    // settled().then((ret) => {
    //   for (const key in res.data) {
    //     const obj = { id: key, title: res.data[key], status: -1, remark: "" };
    //     if (ret.data.examine_identity[key] !== undefined) {
    //       obj.status = ret.data.examine_identity[key].status;
    //       obj.remark = ret.data.examine_identity[key].remark;
    //     }
    //     if ((ret.data.identity & key) > 0) {
    //       obj.status = 1;
    //     }
    //     identityList.value.push(obj);
    //   }
    // });
  });
});
function reason(item) {
  alert("拒绝原因：\n" + item.remark);
}
function noClicking() {
  return identityList.value.some((item) => item.status == 0);
}
// item.status -1>未入驻 0>审核中 1>通过 2拒绝
function handleStatus(item) {
  console.log(item);
  if (noClicking()) return ElMessageBox.alert("您已有入驻申请");
  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/research" });
    } else if (item.id == 4) {
      // 实验室
      router.push({ path: "/identity/laboratory" });
    } 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: "/five" });
  }
  // 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>
