<script setup lang="ts">
import { ref } from "vue";
import { getImageUrl } from "@/utils";

const props = defineProps<{
  value: {
    education: string;
    tactics: string;
  };
}>();

const education = ref(props.value.education);
const tactics = ref(props.value.tactics);
</script>

<template>
  <div v-if="tactics || education" class="family-strategy fs grid_bgi">
    <img :src="getImageUrl('support_strategy')" alt="" class="fs-title" />
    <div class="fs-content">
      <div v-if="tactics" class="fs-content-title">
        <div class="dots"></div>
        <div class="text">一日活动</div>
      </div>
      <div v-if="tactics" class="fs-content-desc">{{ tactics }}</div>
      <div v-if="education" class="fs-content-title">
        <div class="dots"></div>
        <div class="text">家园共育</div>
      </div>
      <div v-if="education" class="fs-content-desc">{{ education }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.fs {
  padding: 20px 0 17px;
  margin: 16px auto;
  width: 343px;
  box-shadow: 0 1px 6px 0 rgba(42, 105, 253, 0.16);
  border-radius: 17px 17px 17px 17px;

  &-title {
    margin: 0 auto;
    width: 311px;
    height: 68px;
    object-fit: contain;
  }

  .education {
    padding-top: 16px;
    padding-bottom: 0;
    border-radius: 0;
  }

  &-content {
    padding-top: 16px;
    padding-left: 16px;
    padding-bottom: 20px;
    margin: 0 auto 0;
    width: 311px;
    background: #fff5f6;
    border-radius: 0 0 10px 10px;

    &-title {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .dots {
        margin-right: 8px;
        width: 6px;
        height: 6px;
        background: #e42f37;
        border-radius: 50%;
      }

      .text {
        width: 265px;
        font-size: 14px;
        font-family:
          PingFang SC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #1a2c5e;
        line-height: 20px;
      }
    }

    &-desc {
      margin-left: 14px;
      width: 265px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #1a2c5e;
    }

    &-desc + &-title {
      margin-top: 20px;
    }
  }
}
</style>
