<template>
  <div class="homework-feedback">
    <Row :gutter="30">
      <i-col :xs="24" :sm="24" :md="24" :lg="10">
        <div class="title-rect-group">
          <div class="title-rect" />
          <h2 class="title-rect-name">{{$t('studentWeb.homework.score')}}</h2>
        </div>
        <div class="dec">
          <div class="teacher-score animate__animated animate__fadeInDown">
            <span class="number">95</span>
            <span v-if="this.$store.getters.getCurrentLaguage=='tw'">分</span>
          </div>
          <div class="teacher-comment ">
            <img
              class="teacher-avatar"
              src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
            />
            <span class="teacher-name">{{RandomName()}}</span>

            <p>
              <strong>{{$t('studentWeb.homework.comment')}}</strong>{{itemRandomDesc()}}
            </p>
          </div>
        </div>
      </i-col>
      <i-col :xs="24" :sm="24" :md="24" :lg="14">
        <!--同學給分-->
        <div class="title-rect-group">
          <div class="title-rect" />
          <h2 class="title-rect-name">
            {{$t('studentWeb.homework.classmatesComments')}}
            <span class="feedbackNum">30</span>
          </h2>
        </div>
        <div class="dec classmates-area">
          <div class="classmates-score animate__animated animate__fadeInDown">
            <span class="number">{{ difficultyRate.toFixed(1) }}</span>
            <div class="difficulty-rate">
              <Rate class allow-half disabled v-model="difficultyRate" />
            </div>
          </div>
          <div v-for="item in 30" :key="item">
            <div class="classmates-comment animate__animated animate__fadeInUp" :style="{'animation-duration':`${item*0.2}s`}">
              <img
                class="classmates-avatar"
                :src="`https://source.unsplash.com/random/300x200/?people${item}`"
              />
              <span class="classmates-name">{{RandomName()}}</span>
              <p>
                <strong>{{$t('studentWeb.homework.comment')}}</strong>{{itemRandomDesc()}}
              </p>
            </div>
            <br />
          </div>
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import { Random } from "mockjs";
export default {
  name: "HomeworkFeedback",
  data() {
    return {
      difficultyRate: 4.0,
    };
  },
  components: {},
  methods: {
    RandomName() {
      return Random.name();
    },
    itemRandomDesc: function () {
      if (localStorage.getItem('lang') == "tw") {
        return Random.cparagraph(1, 7);
      } else return Random.paragraph(1, 2);
    },
  },
};
</script>

<style scoped>
@import "~@/assets/student-web/component_styles/homework-feedback.css";
</style>
