<template>
  <div class="data-entry-page">
    <h1 class="page-main-title">资料填写</h1>

    <!-- 申请单信息 -->
    <section class="content-block">
      <h2 class="section-head">
        <span class="section-bar" aria-hidden="true" />
        申请单信息
      </h2>
      <div class="app-info-row">
        <div class="app-info-item">
          <span class="label">已选主体类型</span>
          <span class="value">{{ entityTypeLabel }}</span>
          <el-link type="primary" :underline="false" class="modify-link" @click="onModifyEntityType"> 修改 </el-link>
        </div>
        <div class="app-info-item">
          <span class="label">创建时间</span>
          <span class="value mono">{{ applicationMeta.createdAt }}</span>
        </div>
        <div class="app-info-item">
          <span class="label">申请单编号</span>
          <span class="value mono">{{ applicationMeta.applicationNo }}</span>
        </div>
      </div>
    </section>

    <!-- 必填信息 -->
    <section class="content-block">
      <h2 class="section-head">
        <span class="section-bar" aria-hidden="true" />
        必填信息
      </h2>
      <ul class="step-list" role="list">
        <li v-for="step in requiredSteps" :key="step.key" class="step-item">
          <div class="step-indicator" :class="{ 'is-current': step.active }" aria-hidden="true">
            <span v-if="step.active" class="dot-inner" />
          </div>
          <div class="step-main">
            <div class="step-title-row">
              <span class="step-title">{{ step.title }}</span>
              <el-link v-if="step.showAction" type="info" :underline="false" class="step-action" @click="onGoFill(step.key)">
                去填写 &gt;
              </el-link>
            </div>
            <p class="step-desc">
              {{ step.desc }}
            </p>
          </div>
        </li>
      </ul>
    </section>

    <!-- 选填信息 -->
    <section class="content-block">
      <h2 class="section-head">
        <span class="section-bar" aria-hidden="true" />
        选填信息
      </h2>
      <div class="optional-block">
        <div class="optional-title">补充材料</div>
        <p class="optional-desc">根据实际审核情况，额外要求商家提供指定的补充资料</p>
      </div>
    </section>

    <!-- 协议 -->
    <div class="agreement-block">
      <el-checkbox v-model="agreementChecked" class="agreement-checkbox">
        <span class="agreement-text">
          商户自愿申请微信支付商户号，以上申请单资料由商户整理并委托本机构代为填写；最终提交资料以商户确认信息为准。
        </span>
      </el-checkbox>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

/** 与 createApply 主体类型 key 对齐，便于路由 query 传入 */
export type EntityTypeKey = "individual" | "enterprise" | "publicInstitution" | "socialOrganization" | "government";

const ENTITY_LABEL: Record<EntityTypeKey, string> = {
  individual: "个体工商户",
  enterprise: "企业",
  publicInstitution: "事业单位",
  socialOrganization: "社会组织",
  government: "政府机关"
};

const props = withDefaults(
  defineProps<{
    /** 路由或父组件传入的主体类型 */
    entityType?: EntityTypeKey | string;
  }>(),
  {
    entityType: undefined
  }
);

const route = useRoute();
const router = useRouter();

const entityTypeLabel = computed(() => {
  const k = (props.entityType ?? route.query.entityType ?? "individual") as EntityTypeKey;
  return ENTITY_LABEL[k] ?? "个体工商户";
});

const applicationMeta = reactive({
  createdAt: "2026-03-30 16:59:12",
  applicationNo: "2000002773599273"
});

interface RequiredStep {
  key: string;
  title: string;
  desc: string;
  active: boolean;
  showAction: boolean;
}

const requiredSteps = ref<RequiredStep[]>([
  {
    key: "entity",
    title: "主体信息",
    desc: "请填写商家的营业执照/登记证书、经营者/法人的证件等信息",
    active: true,
    showAction: true
  },
  {
    key: "business",
    title: "经营信息",
    desc: "请填写商家的经营业务信息、售卖商品/提供服务场景信息",
    active: false,
    showAction: false
  },
  {
    key: "industry",
    title: "行业资质",
    desc: "请填写商家所属行业、特殊资质等信息",
    active: false,
    showAction: false
  },
  {
    key: "settlement",
    title: "结算账户",
    desc: "请填写商家提现收款的银行账户信息",
    active: false,
    showAction: false
  },
  {
    key: "admin",
    title: "超级管理员",
    desc: "请填写商家的超级管理员信息，超级管理员需在开户后进行签约，并接收日常重要管理信息和进行资金操作，请确定其为商户法定代表人或负责人",
    active: false,
    showAction: false
  }
]);

const agreementChecked = ref(true);

function onModifyEntityType() {
  router.push({
    path: "/businessInfo/weChartIndex"
  });
}

function onGoFill(stepKey: string) {
  if (stepKey === "entity") {
    router.push({
      path: "/businessInfo/subjectInfo",
      query: { ...route.query }
    });
    return;
  }
  ElMessage.info(`进入填写：${stepKey}（可接路由）`);
}
</script>

<style scoped lang="scss">
$wechat-green: #07c160;
.data-entry-page {
  box-sizing: border-box;
  min-height: 100%;
  padding: 24px 32px 48px;
  margin: 0 auto;
  background: #ffffff;
}
.page-main-title {
  margin: 0 0 28px;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}
.content-block {
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid #ebeef5;
  &:last-of-type {
    padding-bottom: 0;
    margin-bottom: 24px;
    border-bottom: none;
  }
}
.section-head {
  display: flex;
  align-items: center;
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}
.section-bar {
  display: inline-block;
  flex-shrink: 0;
  width: 4px;
  height: 16px;
  margin-right: 8px;
  background: $wechat-green;
  border-radius: 2px;
}
.app-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
}
.app-info-item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}
.app-info-item .label {
  color: #909399;
}
.app-info-item .value {
  color: #303133;
}
.app-info-item .value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
}
.modify-link {
  margin-left: 4px;
  font-size: 14px;
}
.step-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.step-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f2f5;
  &:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}
.step-indicator {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border: 2px solid #dcdfe6;
  border-radius: 50%;
  &.is-current {
    display: flex;
    align-items: center;
    justify-content: center;
    background: $wechat-green;
    border-color: $wechat-green;
  }
}
.dot-inner {
  width: 5px;
  height: 5px;
  background: #ffffff;
  border-radius: 50%;
}
.step-main {
  flex: 1;
  min-width: 0;
}
.step-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.step-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}
.step-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #909399;
}
.step-action {
  flex-shrink: 0;
  font-size: 13px;
  color: #909399 !important;
  &:hover {
    color: #606266 !important;
  }
}
.optional-block {
  padding: 4px 0 0;
}
.optional-title {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}
.optional-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #909399;
}
.agreement-block {
  padding-top: 8px;
}
.agreement-checkbox {
  align-items: flex-start;
  :deep(.el-checkbox__label) {
    line-height: 1.65;
    white-space: normal;
  }
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: $wechat-green;
    border-color: $wechat-green;
  }
  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #606266;
  }
}
.agreement-text {
  font-size: 13px;
  color: #606266;
}
</style>
