<template>
  <div class="app-container">
    <div class="container">
      <h1 class="title">{{ t("home.memberServiceContent") }}</h1>
      <div class="compare-plan">
        <div
          class="service-content"
          v-for="(item, index) in serviceContent"
          :key="index"
          :style="`background:${index == 0 ? '#f2f2f2' : '#fff'}`"
        >
          {{ item.value }}
        </div>
        <div
          class="ordinary-member"
          v-for="(item, index) in ordinaryMember"
          :key="index"
          :style="`background:${index == 0 ? '#f2f2f2' : '#fff'}`"
        >
          <span v-if="index == 0">
            {{ item.value }}
          </span>
          <el-icon v-else>
            <Select v-if="item" />
            <CloseBold v-else />
          </el-icon>
        </div>
        <div
          class="vip-member"
          v-for="(item, index) in vipMember"
          :key="index"
          :style="`background:${index == 0 ? '#f2f2f2' : '#fff'}`"
        >
          <span v-if="index == 0">
            {{ item.value }}
          </span>
          <el-icon v-else>
            <Select v-if="item" />
            <CloseBold v-else />
          </el-icon>
        </div>
        <div
          class="advance-vip-member"
          v-for="(item, index) in advanceVipMember"
          :key="index"
          :style="`background:${index == 0 ? '#f2f2f2' : '#fff'}`"
        >
          <span v-if="index == 0">
            {{ item.value }}
          </span>
          <el-icon v-else>
            <Select v-if="item" />
            <CloseBold v-else />
          </el-icon>
        </div>
      </div>
      <div class="contact">
        {{ t("webContact.phone") }}：<a href="tel:18156053255">18156053255</a>
        ({{ t("webSearch.wechat") }})
      </div>
    </div>
  </div>
</template>
<script setup name="JoinMembership">
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const serviceContent = ref([
  computed(() => t("home.serviceContent")),
  computed(() => t("home.anyRetrieval")),
  computed(() => t("home.innovationTechnology")),
  computed(() => t("home.listedCompany")),
  computed(() => t("home.generalEnterprise")),
]);
const ordinaryMember = ref([
  computed(() => t("home.ordinaryMember")),
  true,
  false,
  false,
  false,
]);
const vipMember = ref([
  computed(() => t("home.VIPMemberService")),
  true,
  true,
  false,
  true,
]);
const advanceVipMember = ref([
  computed(() => t("home.advancedVIPMemberService")),
  true,
  true,
  true,
  true,
]);
</script>
<style lang="scss" scoped>
.container {
  width: 80%;
  margin: 0 auto;

  .title {
    text-align: center;
    font-weight: 700;
  }

  .compare-plan {
    display: grid;
    grid-template-rows: 100px repeat(4, 42px);
    grid-auto-flow: column;
    column-gap: 20px;
    row-gap: 12px;

    .service-content {
      word-break: break-all;
    }

    > div {
      border: 1px solid #797979;
      display: flex;
      justify-content: center;
      align-items: center;
      // height: 60px;
      // background-color: salmon;
    }
  }

  .contact {
    margin-top: 10px;
    text-align: end;
  }
}
</style>
