<template>
  <div class="create-apply-page">
    <div class="page-header">
      <h1 class="page-title">选择主体类型</h1>
    </div>

    <div class="card-grid">
      <div v-for="item in entityTypeList" :key="item.key" class="entity-card">
        <h3 class="card-title">
          {{ item.title }}
        </h3>
        <p class="card-desc">
          {{ item.desc }}
        </p>
        <el-button class="btn-select" @click="onSelectEntity(item)"> 选择 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { localSet } from "@/utils/index";

const router = useRouter();

const BUSINESS_DATA_CACHE_KEY = "businessData";

type EntityTypeKey = "individual" | "enterprise" | "publicInstitution" | "socialOrganization" | "government" | "type";

interface EntityTypeItem {
  key: EntityTypeKey;
  title: string;
  desc: string;
  type: "SUPER" | "LEGAL";
}

const entityTypeList: EntityTypeItem[] = [
  {
    key: "individual",
    type: "SUPER",
    title: "个体工商户",
    desc: "营业执照上的主体类型一般为个体户、个体工商户、个体经营"
  },
  {
    key: "enterprise",
    title: "企业",
    type: "LEGAL",
    desc: "营业执照上的主体类型一般为有限公司、有限责任公司"
  }
];

function openEntityGuide() {
  ElMessage.info("主体指引说明可在此接入文档或弹窗");
}

function onSelectEntity(item: EntityTypeItem) {
  const businessData = {
    entityType: item.key,
    contact_type: item.type
  };
  localSet(BUSINESS_DATA_CACHE_KEY, businessData);
  router.push({
    path: "/businessInfo/dataEntry",
    query: { entityType: item.key }
  });
}
</script>

<style scoped lang="scss">
.create-apply-page {
  box-sizing: border-box;
  min-height: 100%;
  padding: 24px 32px 48px;
  background: #ffffff;
}
.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 28px;
}
.page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  letter-spacing: 0.02em;
}
.guide-link {
  font-size: 14px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 auto;
}

@media (width <= 1100px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 640px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}
.entity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 220px;
  padding: 24px 20px 20px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}
.card-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #303133;
}
.card-desc {
  flex: 1;
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.65;
  color: #909399;
}
.btn-select {
  min-width: 120px;
  height: 34px;
  padding: 0 20px;
  font-size: 14px;
  color: #ffffff !important;
  background: #00c05b !important;
  border: none !important;
  border-radius: 4px;
  &:hover {
    background: #00a850 !important;
  }
}
</style>
