<script setup lang="ts">
import { getImageUrl, imagePreview, limitLength, returnAppPage } from "@/utils";
import { useRoute, useRouter } from "vue-router";
import { useCustomizeStore } from "@/store";
// import { storeToRefs } from "pinia";
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { formatClassLevelCode, formatSemesterType } from "@/utils/filter";
import ShareModal from "@/views/customize/components/ShareModal.vue";

const {
  b: babyId,
  c: classId,
  l: classLevelCode,
  // g: gameType,
  s: semesterType,
  // r: recordType,
  p: isParent,
  o: isMyRoute,
} = useRoute().query;
const router = useRouter();
const customizeStore = useCustomizeStore();

// const { semesterReport } = storeToRefs(customizeStore);
const { getSemesterRecord, sendSemesterRecord } = customizeStore;

const isShow = ref(false);
const shareShow = ref(false);
const opacity = ref(0);

const semesterReport = computed(() => {
  return customizeStore.semesterReport;
});

watch(isShow, (val) => {
  if (val) {
    setTimeout(() => {
      document.addEventListener("click", handleClick);
    }, 10);
  } else {
    document.removeEventListener("click", handleClick);
  }
});

function getFieldLogo(title: string) {
  const arr = ["通用", "科学", "艺术", "语言", "社会"];
  let index = arr.findIndex((item) => title.includes(item));
  index = index === -1 ? 0 : index;
  return getImageUrl(`field_logo_0${index}`);
}

function isHas(content: string[]) {
  return Array.isArray(content) && content.length > 0;
}

function formatFamily(name: string) {
  let arr = name.split("\n");
  return arr[arr.length - 1] === "" ? arr.slice(0, arr.length - 1) : arr;
}

function send() {
  if (semesterReport.value.sendReport) return;
  if (
    typeof babyId === "string" &&
    typeof classId === "string" &&
    typeof classLevelCode === "string" &&
    typeof semesterType === "string"
  )
    sendSemesterRecord({
      babyId,
      classId,
      classLevelCode,
      semesterType,
      recordType: "1",
    });
}

function back() {
  isMyRoute === "1" ? router.go(-1) : returnAppPage();
}

function handleClick() {
  console.log("handleClick");
  if (isShow.value) isShow.value = false;
}

function share() {
  console.log("share");
  shareShow.value = true;
}

function handleScroll() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const opacityVal = scrollTop / 88;
  opacity.value = opacityVal > 1 ? 1 : opacityVal;
}

function getStyle(index: number, length: number) {
  return {
    borderRadius: `${
      length === 1 ? "17px" : index === length - 1 ? "0 0 17px 17px" : index === 0 ? "17px 17px 0 0" : "0"
    }`,
    borderTop: `${index === 0 ? "4px solid #b6dcff" : "none"}`,
    borderBottom: `${index === length - 1 ? "4px solid #b6dcff" : "none"}`,
    boxShadow: `${index === 0 ? "0 1px 6px 0 rgba(42, 105, 253, 0.16)" : "none"}`,
  };
}

function getTargetStyle(index: number) {
  const style = {
    borderRadius: "0 0 9px 9px",
  };
  if (index === 3) {
    style.borderRadius = "0 0 9px 9px";
  } else {
    style.borderRadius = "0";
  }
  return style;
}

onMounted(async () => {
  if (
    typeof babyId === "string" &&
    typeof classId === "string" &&
    typeof classLevelCode === "string" &&
    typeof semesterType === "string"
  )
    await getSemesterRecord({ babyId, classId, classLevelCode, semesterType });

  // setTimeout(() => {
  //   // todo
  //   downloadPDF("screenshot");
  //   downloadScreenshotFn("screenshot");
  // }, 1000);

  document.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  document.removeEventListener("click", handleClick);
  document.removeEventListener("scroll", handleScroll);
});

/**
 * 综合报告
 *
 * b: babyId
 * c: classId
 * l: classLevelCode
 * s: semesterType
 * o: isMyRoute
 *
 * http://192.168.1.17:8989/#/customize/SemesterReport?b=1304672468777553921&c=1304705777133330433&l=0&s=0&o=1
 */
</script>

<template>
  <div class="report-detail rd">
    <!--头部-->
    <div class="rd-white" :style="{ opacity: opacity }"></div>
    <div class="rd-back" @click="back">
      <img :src="getImageUrl('back_solid')" alt="" class="rd-back-img" />
    </div>
    <div class="rd-more" @click="isShow = true">
      <img :src="getImageUrl('more')" alt="" class="rd-more-img" />
    </div>
    <div class="rd-bgc"></div>

    <!--信息-->
    <div class="rd-info" :style="{ backgroundImage: `url(${getImageUrl('detail_info')})` }">
      <img :src="semesterReport.babyHeadImg" alt="" class="rd-info-avatar" />
      <div class="rd-info-name" :style="{ backgroundImage: `url(${getImageUrl('detail_name')})` }">
        {{ limitLength(semesterReport.babyName) }}
      </div>
      <div class="rd-info-garden">{{ semesterReport.schoolName }}</div>
      <div class="rd-info-class">{{ formatClassLevelCode(classLevelCode) }}{{ formatSemesterType(semesterType) }}</div>
      <div class="rd-info-time">
        <span>评估时段</span>
        <span> {{ semesterReport.startDate }}-{{ semesterReport.endDate }} </span>
      </div>
    </div>

    <!--学习维度-->
    <div class="rd-dimension grid_bgi">
      <img :src="getImageUrl('dimension_logo')" alt="" class="rd-dimension-logo" />
      <div class="rd-dimension-list">
        <div v-for="item in 6" :key="item" class="dimension">问题解决</div>
      </div>
    </div>

    <!--幼儿分领域评估概括-->
    <div class="rd-field grid_bgi">
      <div class="rd-field-title" :style="{ backgroundImage: `url(${getImageUrl('field_title')})` }">
        <p>{{ formatClassLevelCode(classLevelCode) }}幼儿分领域评估概括</p>
        <div></div>
      </div>
      <div v-for="(item, index) in semesterReport.domainAbilityNameList" :key="index" class="rd-field-item">
        <img :src="getFieldLogo(item.domainName)" alt="" class="logo" />
        <div class="info">
          <div class="info-title">{{ item.domainName }}</div>
          <div class="info-desc">
            评估了
            <div v-for="(a, aIndex) in item.abilityNameList.slice(0, 3)" :key="aIndex">
              <span>{{ a }}</span>
              <i v-if="aIndex !== item.abilityNameList.length - 1 && aIndex !== 2">、</i>
            </div>
            <span v-if="item.abilityNameList.length > 3">等{{ item.abilityNameList.length }}个能力</span>
          </div>
        </div>
      </div>
    </div>

    <div class="rd-logo">
      <img :src="getImageUrl('semester_record_logo')" alt="" class="rd-logo-img" />
      <div class="rd-logo-text">问题记录</div>
    </div>

    <!--高阶思维评估-->
    <div class="rd-evaluate">
      <img :src="getImageUrl('evaluate_logo')" alt="" class="rd-evaluate-logo" />
      <div v-for="index in 3" :key="index">
        <div class="rd-evaluate-target" :style="getTargetStyle(index)">
          <div class="object">
            <div class="label_triangle"></div>
            <div class="object-label">记录对象：</div>
            <div class="object-text">尚萍萍</div>
          </div>
          <div class="target">
            <div class="target-title">
              <div class="target-title-dot"></div>
              <div class="target-title-text">元认知（3-4岁目标）</div>
            </div>
            <div class="target-content">在成人引导下，能够有意识关注其他学生的作品，讨论喜欢或不喜欢什么。</div>
          </div>
          <div class="target">
            <div class="target-title">
              <div class="target-title-dot"></div>
              <div class="target-title-text">问题解决能力（4-5岁目标）</div>
            </div>
            <div class="target-content">在成人引导下，能够有意识关注其他学生的作品，讨论喜欢或不喜欢什么。</div>
          </div>
        </div>
        <div
          v-if="index !== 3"
          class="rd-evaluate-gap"
          :style="{ backgroundImage: `url(${getImageUrl('evaluate_gap')})` }"
        ></div>
      </div>
    </div>

    <div class="rd-content">
      <div class="rd-content-line">
        <div class="label_triangle"></div>
        <div class="label">记录日期：</div>
        <div class="value">2023-03-23</div>
      </div>
      <div class="rd-content-line">
        <div class="label_triangle"></div>
        <div class="label">层次：</div>
        <div class="value">记忆</div>
      </div>
      <div class="rd-content-line">
        <div class="label_triangle"></div>
        <div class="label">活动形式：</div>
        <div class="value">集体、小组、区角</div>
      </div>
      <img :src="getImageUrl('content_question_logo')" alt="" class="rd-content-logo" />
      <div class="rd-content-question">
        <div class="title flex-center">问题1</div>
        <div class="content">评估了观察、好奇和探索、模仿力与创造力等9个能力，其中3个是新晋观察技能</div>
      </div>
      <img :src="getImageUrl('inquiry_process_logo')" alt="" class="rd-content-logo" />
      <div class="rd-content-process">
        <div class="process">
          <div class="process-title">
            <div class="process-title-dot"></div>
            <div class="process-title-text">观察</div>
          </div>
          <div class="process-content">家长可以和幼儿一起发现生活中有简单模式的</div>
        </div>
      </div>
      <div class="rd-content-images"></div>
    </div>

    <div class="rd-logo">
      <img :src="getImageUrl('semester_record_logo')" alt="" class="rd-logo-img" />
      <div class="rd-logo-text">行为记录</div>
    </div>

    <!--行为记录-->
    <div v-for="(item, index) in semesterReport.domainDataList" :key="index" class="rd-part">
      <div class="domain">{{ item.domainName }}</div>
      <div
        v-for="(ability, abilityIndex) in item.recordList"
        :key="abilityIndex"
        class="ability grid_bgi"
        :style="getStyle(abilityIndex, item.recordList.length)"
      >
        <img v-if="abilityIndex !== 0" :src="getImageUrl('ability_gap')" alt="" class="ability-gap" />
        <div class="ability-title flex-center">
          <img :src="ability.abilityIconUrl" alt="" class="ability-title-logo" />
          <div class="ability-title-text">{{ ability.abilityName }}</div>
        </div>
        <div class="container">
          <div class="ability-time">
            <img :src="getImageUrl('clock_logo')" alt="" class="ability-time-logo" />
            <div class="ability-time-text">记录时间：{{ ability.recordDate }}</div>
          </div>
          <img :src="getImageUrl('observation_records')" alt="" class="ability-name" />
          <div class="ability-content">
            <div v-if="isHas(ability.story.images)" class="ability-content-images">
              <img
                v-for="(img, imgIndex) in ability.story.images"
                :key="imgIndex"
                :src="img"
                alt=""
                @click="imagePreview(ability.story.images, imgIndex)"
              />
            </div>
            <video
              v-if="isHas(ability.story.videos)"
              :src="ability.story.videos[0]"
              controls
              :poster="ability.story.videos[0] + '?vframe/jpg/offset/1'"
              class="ability-content-video"
            ></video>
            <div class="ability-content-text">
              {{ ability.story.content }}
            </div>
          </div>
          <img :src="getImageUrl('family_title')" alt="" class="ability-name" />
          <div class="ability-family">
            <div v-for="(f, fIndex) in formatFamily(ability.education)" :key="fIndex" class="ability-family-item">
              {{ f }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="isShow" class="rd-modal">
      <img :src="getImageUrl('small_triangle')" alt="" class="rd-modal-logo" />
      <div class="rd-modal-item flex-center" @click="share">分享</div>
      <div v-if="!semesterReport.sendReport && !isParent" class="rd-modal-item flex-center" @click="send">发送家长</div>
    </div>
  </div>

  <ShareModal :show="shareShow" @close="shareShow = false" />
</template>

<style scoped lang="scss">
.rd {
  position: relative;
  padding-top: 104px;
  padding-bottom: 46px;
  width: 100vw;
  min-height: 100vh;
  background-color: #a9cbff;

  &-back {
    position: fixed !important;
    top: 44px;
    left: 0;
    z-index: 10 !important;
    padding: 8px 19px;

    &-img {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }
  }

  &-more {
    position: fixed !important;
    top: 44px;
    right: 0;
    z-index: 10 !important;
    padding: 12px 16px;

    &-img {
      width: 20px;
      height: 20px;
    }
  }

  &-white {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 9 !important;
    width: 100vw;
    height: 88px;
    background: #ffffff;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
    opacity: 0;
  }

  &-send {
    position: fixed !important;
    top: 45px;
    right: 0;
    z-index: 10 !important;
    padding: 6px 19px;

    &-btn {
      width: 78px;
      height: 34px;
      background: #e9f8ff;
      box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2026);
      border-radius: 17px 17px 17px 17px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #233cd5;
    }
  }

  > div {
    position: relative;
    z-index: 2;
  }

  &-bgc {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 1 !important;
    width: 100%;
    height: 287px;
    background: #cbe0ff;
  }

  &-info {
    //padding-top: 98px;
    position: relative;
    width: 100%;
    height: 210px;
    background-size: contain;

    &-avatar {
      position: relative;
      top: -51px;
      margin: 0 auto 0;
      width: 60px;
      height: 60px;
      border: 8px solid #ffe082;
      background-color: #fff;
      border-radius: 50%;
      box-sizing: content-box;
      object-fit: cover;
    }

    &-name {
      position: relative;
      z-index: 2;
      margin: -62px auto 54px;
      width: 101px;
      height: 30px;
      line-height: 30px;
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center center;
      text-align: center;
      font-size: 14px;
      font-family:
        PingFang SC-Regular,
        PingFang SC;
      font-weight: 600;
      color: #ffffff;
      @include single-hide();
    }

    &-garden,
    &-class {
      height: 20px;
      font-size: 12px;
      font-family:
        PingFang SC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
      text-align: center;
      white-space: nowrap;
    }

    &-time {
      margin-top: 2px;
      text-align: center;

      span {
        height: 24px;
        font-size: 12px;
        font-family:
          PingFang SC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
      }

      span:nth-child(2) {
        margin-left: 14px;
        margin-right: 40px;
      }
    }
  }

  &-dimension {
    padding: 24px 0 20px 4px;
    margin: 24px auto 0;
    width: 343px;
    box-shadow: 0 1px 6px 0 rgba(42, 105, 253, 0.16);
    border-radius: 17px 17px 17px 17px;
    border: 4px solid #b6dcff;

    &-logo {
      margin-bottom: 10px;
      width: 162.5px;
      height: 30px;
    }

    &-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .dimension {
        margin-left: 12px;
        margin-top: 10px;
        padding: 9px 11px;
        width: fit-content;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background: #5f87f0;
        border-radius: 30px 30px 30px 30px;
      }
    }
  }

  &-field {
    padding: 24px 0 24px 16px;
    margin: 17px auto 0;
    width: 343px;
    box-shadow: 0 1px 6px 0 rgba(42, 105, 253, 0.16);
    border-radius: 17px 17px 17px 17px;

    &-title {
      position: relative;
      padding-left: 35px;
      width: fit-content;
      height: 30px;
      background-size: auto 100%;
      background-position: left center;
      background-repeat: no-repeat;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #1a2c5e;
      line-height: 30px;

      p {
        position: relative;
        z-index: 2;
        max-width: 280px;
        white-space: nowrap;
        @include single-hide();
      }

      div {
        position: absolute;
        bottom: 8px;
        right: 0;
        z-index: 1;
        width: calc(100% - 35px);
        height: 5px;
        background-color: #b6dcff;
      }
    }

    &-item {
      display: flex;
      align-items: center;
      margin-top: 20px;

      .logo {
        position: relative;
        z-index: 2;
        width: 40px;
        height: 40px;
        object-fit: cover;
      }

      .info {
        margin-left: -16px;
        padding: 8px 0 8px 32px;
        width: 287px;
        background: #eaf5ff;
        box-shadow: 0 1px 0 0 #a9cbff;
        border-radius: 10px;

        &-title {
          width: 250px;
          height: 16px;
          font-size: 14px;
          font-family: YouSheBiaoTiYuan-Regular, YouSheBiaoTiYuan;
          font-weight: 400;
          color: #2a69fd;
          line-height: 16px;
          @include single-hide();
        }

        &-desc {
          margin-top: 4px;
          width: 239px;
          font-size: 12px;
          font-family:
            PingFang SC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 16px;

          > div {
            display: inline-block;

            span {
              color: #2a69fd;
            }
          }
        }
      }
    }
  }

  &-evaluate {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
    margin: 24px auto 32px;
    width: 343px;
    background: #ffffff;
    box-shadow: 0 1px 6px 0 rgba(42, 105, 253, 0.16);
    border: 4px solid #b6dcff;
    border-radius: 17px;

    &-logo {
      width: 311px;
      height: 68px;
    }

    &-target {
      padding: 16px 0;
      width: 311px;
      background: #ecf9ff;
      border-radius: 0 0 9px 9px;

      .object {
        display: flex;
        align-items: center;
        margin-left: 16px;

        &-label {
          margin-right: 4px;
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #2a69fd;
          line-height: 20px;
        }

        &-text {
          font-size: 14px;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          color: #1a2c5e;
        }
      }

      .target {
        margin-top: 20px;

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

          &-dot {
            margin-right: 8px;
            width: 6px;
            height: 6px;
            background: #2a69fd;
            border-radius: 50%;
          }

          &-text {
            font-size: 14px;
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 600;
            color: #1a2c5e;
          }
        }

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

    &-gap {
      width: 311px;
      height: 24px;
      background-color: #ecf9ff;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }

  &-content {
    padding: 24px 16px;
    margin: 0 auto 32px;
    width: 343px;
    background: #ffffff;
    box-shadow: 0 1px 6px 0 rgba(42, 105, 253, 0.16);
    border: 4px solid #b6dcff;
    border-radius: 17px;

    &-line {
      display: flex;
      align-items: center;

      .label {
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 500;
        color: #2a69fd;
      }

      .value {
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }

    &-line + &-line {
      margin-top: 16px;
    }

    &-logo {
      margin: 20px auto 0;
      width: 311px;
      height: 68px;
    }

    &-question {
      padding: 14px 15px;
      margin: 0 auto;
      //width: 311px;
      background: #fff8f3;
      border-radius: 0 0 9px 9px;
      box-sizing: border-box;

      .title {
        padding: 2px 10px;
        margin-bottom: 8px;
        width: fit-content;
        background: #f08931;
        border-radius: 59px 59px 59px 59px;
        font-size: 12px;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

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

    &-process {
      background: #fff5f6;
      border-radius: 0 0 10px 10px;

      .process {
        padding: 16px 0 24px;
        &-title {
          display: flex;
          align-items: center;
          margin-left: 16px;
          margin-bottom: 8px;

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

          &-text {
            font-size: 14px;
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 600;
            color: #1a2c5e;
            line-height: 20px;
          }
        }

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

      .process + .process {
        margin-top: 27px;
      }
    }
  }

  &-logo {
    display: flex;
    align-items: center;
    margin: 32px auto 0;
    width: 343px;

    &-img {
      margin-right: 10px;
      width: 24px;
      height: 24px;
    }

    &-text {
      height: 32px;
      font-size: 24px;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 700;
      color: #ffffff;
      line-height: 32px;
    }
  }

  &-part {
    overflow: hidden;

    .domain {
      margin: 23px auto 0;
      padding: 7px 28px;
      width: fit-content;
      background: #70a8ff;
      border-radius: 16px 16px 0 0;
      font-size: 18px;
      font-family:
        PingFang SC-Semibold,
        PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }

    .ability {
      margin: 0 auto;
      width: 343px;
      border: 4px solid #b6dcff;
      box-shadow: 0 1px 6px 0 rgba(42, 105, 253, 0.16);
      border-radius: 17px 17px 17px 17px;
      box-sizing: border-box;
      overflow: hidden;

      &-title {
        margin-top: 20px;

        &-logo {
          width: 40px;
          height: 40px;
          object-fit: cover;
          border-radius: 50%;
        }

        &-text {
          margin-left: 7px;
          height: 16px;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 16px;
        }
      }

      .container {
        overflow: hidden;
      }

      &-time {
        display: flex;
        align-items: center;
        margin: 20px auto 0;
        width: 311px;

        &-logo {
          margin: 3px;
          width: 20px;
          height: 20px;
          object-fit: contain;
        }

        &-text {
          height: 16px;
          font-size: 16px;
          font-family:
            PingFang SC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 16px;
          white-space: nowrap;
        }
      }

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

      &-content {
        padding: 16px 0 16px 8px;
        margin: 0 auto;
        width: 311px;
        background: #ecf9ff;
        border-radius: 0 0 9px 9px;

        &-images {
          display: flex;
          flex-wrap: wrap;

          img {
            margin-left: 8px;
            margin-bottom: 8px;
            width: 88px;
            height: 88px;
            object-fit: cover;
            border-radius: 9px;
          }

          img:nth-last-child(-n + 3) {
            margin-bottom: 0;
          }
        }

        &-text {
          margin-left: 8px;
          width: 279px;
          font-size: 14px;
          font-family:
            PingFang SC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #1a2c5e;
          line-height: 20px;
        }

        &-video {
          display: block;
          margin-left: 8px;
          width: 279px;
          border-radius: 10px;
        }

        .ability-content-video + .ability-content-text {
          margin-top: 16px;
        }

        .ability-content-images + .ability-content-text {
          margin-top: 16px;
        }
      }

      &-family {
        margin: 0 auto 20px;
        padding: 16px 16px 16px 30px;
        width: 311px;
        background: #fff5f6;
        border-radius: 0 0 10px 10px;

        &-item {
          position: relative;
          width: 265px;
          font-size: 14px;
          font-family:
            PingFang SC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #1a2c5e;
          line-height: 20px;

          &::before {
            content: "";
            position: absolute;
            left: -14px;
            top: 7px;
            width: 6px;
            height: 6px;
            background: #e42f37;
            border-radius: 50%;
          }
        }

        .ability-family-item + .ability-family-item {
          margin-top: 10px;
        }
      }
    }
  }

  &-modal {
    position: fixed !important;
    top: 80px;
    right: 10px;
    z-index: 20 !important;
    padding: 5px 0;
    width: 91px;
    background: #ffffff;
    box-shadow: 0 2px 15px 0 rgba(104, 136, 176, 0.2);
    border-radius: 4px 4px 4px 4px;

    &-logo {
      position: absolute;
      top: -6px;
      right: 8px;
      width: 14px;
      height: 6px;
    }

    &-item {
      width: 91px;
      height: 30px;
      background: #ffffff;
      font-size: 14px;
      font-family:
        PingFang SC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #333333;
    }

    &-item + &-item {
      border-top: 1px solid rgba(182, 220, 255, 0.1);
    }
  }
}
</style>
