<template>
  <div style="display: block" :style="{ height: newHeight }">
    <div class="earlyEducation">
      <div class="earlyEducation-show" :style="{ backgroundImage: 'url(' + currentImg + ')', height: newHeight }"></div>
      <div class="earlyEducation-box" style="width: 50%; overflow-y: auto; height: 100%">
        <div v-for="(item, index) in list" :key="index" class="earlyEducation-item" @click="handleChangeImg(item.url)">
          <div class="title">{{ item.title }}</div>
          <div class="time">{{ item.time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { px2rem } from '@/utils'
export default {
  name: 'EarlyEducation',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 300
    }
  },
  computed: {
    newHeight() {
      return px2rem(this.height)
    }
  },
  data() {
    return {
      currentImg: ''
    }
  },
  methods: {
    handleChangeImg(url) {
      this.currentImg = url
    }
  },

  mounted() {
    if (this.list.length > 0) {
      this.currentImg = this.list[0].url
    }
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        if (oldVal && oldVal.length == 0 && newVal.length > 0) {
          this.currentImg = newVal[0].url
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.earlyEducation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.earlyEducation-box::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: transparent;
  border-radius: 3px;
}
.earlyEducation-box::-webkit-scrollbar-thumb {
  background-color: #057dd9;
  border-radius: 3px;
}
.earlyEducation-show {
  width: 50%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  overflow: hidden;

  margin-right: px2rem(10);
}

.earlyEducation-row {
  cursor: pointer;
}

.earlyEducation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: px2rem(58);
  cursor: pointer;
  border-bottom: 1px solid #057dd9;
  font-size: px2rem(14);
  & > div {
    width: 50%;
  }
  .title {
    margin-left: px2rem(10);
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    text-overflow: ellipsis; /* 用省略号表示被裁剪的文本 */
  }
  .time {
    margin-left: px2rem(10);
    width: px2rem(100);
  }
}
</style>
