<template>
  <div class="app-container">
    <div class="container">
      <h1 class="title">会员服务内容</h1>
      <div class="compare-plan">
        <div
          class="service-content"
          v-for="(item, index) in serviceContent"
          :key="index"
          :style="`background:${index == 0 ? '#f2f2f2' : '#fff'}`"
        >
          {{ item }}
        </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 }}
          </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 }}
          </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 }}
          </span>
          <el-icon v-else>
            <Select v-if="item" />
            <CloseBold v-else />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="JoinMembership">
const serviceContent = ref([
  "服务内容",
  "任意检索",
  "创新科技资源自动匹配推送功能",
  "上市公司及优质客户的企业需求优先推送",
  "一般企业的需求匹配推送",
]);
const ordinaryMember = ref(["普通会员", true, false, false, false]);
const vipMember = ref(["VIP会员服务(2999/年)", true, true, false, true]);
const advanceVipMember = ref([
  "高级VIP会员服务(3999/年)",
  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, 30px);
    grid-auto-flow: column;
    column-gap: 20px;
    row-gap: 12px;
    > div {
      border: 1px solid #797979;
      display: flex;
      justify-content: center;
      align-items: center;
      // height: 60px;
      // background-color: salmon;
    }
  }
}
</style>
