<template>
  <div class="lofty-school-panel">
    <template v-if="!showDetail">
      <div v-for="group in schoolGroups" v-show="showContent">
        <div class="group-title" @click="toggleOpen(group)">
          <span>{{group.label}} <span>{{group.data.length}}</span></span>
          <i class="lofty_iconfont lofty-icon-arrow_03_up" :class="{reverse: open !== group.label}"></i>
        </div>
        <div :class="[open === group.label ? 'show-school' : 'hide-school']">
          <div v-for="school in group.data" @mouseenter="mouseenter(school)" @click="showSchoolDetail(school)"
               :class="{active: model === school.id}" class="school-item" :key="school.id">
            <div class="score-circle">
              <span style="font-size: 24px">{{school.gsRating}}</span>
              <span class="small-number">/10</span>
            </div>
            <div class="school-info">
              <div class="school-name lofty-ellipsis">{{school.name}}</div>
              <div class="school-type">
                <span>{{school.type}}</span>
                <span style="margin: 0 6px">|</span>
                <span>{{school.gradeRange}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="lofty-school-detail" v-show="showContent">
        <div class="back-to-list" @click="showDetail = false">
          <span class="lofty_iconfont lofty-icon-prev"></span>Back To Previous
        </div>
        <div class="school-title">{{ detail.name }}</div>
        <div class="detail-info">
          <div>
            <div class="label">Admission</div>
            <div class="value">{{ detail.admission }}</div>
          </div>
          <div class="item">
            <div class="label">Level</div>
            <div class="value">{{ detail.gradeRange }}</div>
          </div>
          <div v-if="detail.gsRating" class="item">
            <div class="label">Rating</div>
            <div class="value">{{ detail.gsRating }}</div>
          </div>
          <div class="item">
            <div class="label">Library</div>
            <div class="value">{{ detail.library ? 'YES' : 'NO' }}</div>
          </div>
        </div>
        <div v-if="detail.phone" class="mt20">
          <div class="label">Phone</div>
          <div class="value">{{ detail.phone }}</div>
        </div>
        <div v-if="detail.expenditure" class="mt20">
          <div class="label">Expenditure</div>
          <div class="value">{{ numberFormat(detail.expenditure, null,2,'$') }}</div>
        </div>
        <div class="mt20">
          <div class="label">Address</div>
          <div class="value">{{ detail.address }}</div>
        </div>
        <div class="mt20">
          <div class="label">Ratio</div>
          <div class="value">{{ detail.ratio }}</div>
        </div>
      </div>
    </template>

    <div v-if="schoolGroups.length === 0" class="no-school-data">
      <div style="text-align: center">
        <div class="lofty_iconfont lofty-icon-school2"></div>
        <div>No School Data</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import store from '../store.js';
import numberFormat from "@/common/format/number-format.js";
const { showContent, id } = defineProps({ showContent: Boolean, id: String });
const { schoolGroups } = store[id]
const open = ref('')
const model = defineModel()
const emit = defineEmits(['mouseenter', 'changeSchoolType']);
function mouseenter(school) {
  model.value = school.id
  emit("mouseenter");
}
function toggleOpen(group) {
  open.value = open.value === group.label ? '' : group.label
  emit("changeSchoolType", open.value);
}
const detail = ref({})
const showDetail = ref(false)
function showSchoolDetail(school) {
  detail.value = school
  showDetail.value = true
}
</script>
<style lang="scss">
.lofty-school-panel {
  background: #fff;
  width: 400px;
  .group-title {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-family: var(--lofty-font-bold);
    padding: 20px 20px 10px 20px;
    cursor: pointer;
    align-items: center;
    @include media-600 {
      padding-left: 0;
    }
    .lofty_iconfont {
      font-size: 12px;
    }
    .reverse {
      transform: rotate(180deg);
    }
  }
  .show-school {
    height: auto;
    @include media-600 {
      max-height: 450px;
      overflow-y: scroll;
    }
  }
  .hide-school {
    display: none;
  }
  .school-item {
    height: 70px;
    padding-left: 20px;
    display: flex;
    padding-top: 10px;
    cursor: pointer;
    @include media-600 {
      padding-left: 0;
    }
    &:hover {
      background: rgba(218, 218, 218, 0.5);
    }
    .score-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(80, 80, 80, 1);
      color: #fff;
      line-height: 50px;
      text-align: center;
      flex-shrink: 0;
      .small-number {
        font-size: 12px;
        position: relative;
        bottom: 3px;
      }
    }
    .school-info {
      margin-left: 10px;
      padding-top: 5px;
      font-size: 14px;
      .school-name {
        color: rgba(80, 80, 80, 1);
        width: 300px;
        @include media-600 {
          width: 260px;
        }
      }
      .school-type {
        margin-top: 5px;
        color: rgba(168, 168, 168, 1);
      }
    }
  }
  .active {
    background: rgba(218, 218, 218, 0.5);
  }
}
.lofty-school-detail {
  padding: 30px 20px;
  @include media-600 {
    padding-left: 0;
    padding-top: 20px;
    padding-bottom: 0;
  }
  .back-to-list {
    cursor: pointer;
    .lofty_iconfont {
      font-size: 16px;
      margin-right: 10px;
    }
  }
  .school-title {
    margin-top: 30px;
    font-family: var(--lofty-font-bold);
  }
  .detail-info {
    margin-top: 20px;
    display: flex;
    .item {
      margin-left: 40px;
    }
  }
  .label {
    font-size: 14px;
    font-family: var(--lofty-font-regular);
    color: rgba(168, 168, 168, 1);
  }
  .value {
    font-size: 14px;
    font-family: var(--lofty-font-regular);
    color: rgba(80, 80, 80, 1);
    line-height: 24px;
  }
}
.no-school-data {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(168, 168, 168);
  .lofty-icon-school2 {
    font-size: 40px;
    margin-bottom: 20px;
  }
}
</style>