<template>
  <div class="quesNaire-report">
    <div class="title-rect-group">
      <div class="title-rect" />
      <h2 class="title-rect-name">基本數據</h2>
    </div>
    <BasicInfoPieChart />

    <div class="title-rect-group">
      <div class="title-rect" />
      <h2 class="title-rect-name">問卷結果</h2>
    </div>
    <!--問卷題目結果-->
    <br />
    <p class="qDes">1.{{ itemRandomDesc() }} 該教師表現綜合評等？(單選)</p>
    <QueslineChart />
    <p class="qDes">2.{{ itemRandomDesc() }} 該教師上課之優點？(多選)</p>
    <QuesPieChart />
    <!--暫時不顯示主觀問題--->
    <!--div>
    <p class="qDes">
      3.{{ itemRandomDesc() }} 其他對教師評鑑之建議？(文字輸入: 由教師篩選顯示，大量留言不適合全部顯示 )</p>
       <br />
      <div v-for="item in 5" :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-->
  </div>
</template>

<script>
import BasicInfoPieChart from "./QuesNaireReportCharts/BasicInfoPieChart";
import QueslineChart from "./QuesNaireReportCharts/QueslineChart";
import QuesPieChart from "./QuesNaireReportCharts/QuesPieChart";
import { Random } from "mockjs";
export default {
  name: "QuesNaireReport",
  components: {
    BasicInfoPieChart,
    QueslineChart,
    QuesPieChart,
  },
  methods: {
    itemRandomDesc: function () {
      return Random.cparagraph(21, 27);
    },
    RandomName() {
      return Random.name();
    },
    RandomDesc() {
      return Random.cparagraph(1, 7);
    },
  },
};
</script>

<style scoped>
.qDes {
  font-weight: bolder;
}
.classmates-comment {
  background-color: #f0f0f0;
  box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  width: 100%;
  padding: 18px 28px 40px 28px;
}
.classmates-avatar {
  width: 30px;
  height: 30px;
  margin-left: -2px;
  border-radius: 50%;
  margin-bottom: 1px;
  z-index: 10;
}
.classmates-name {
  font-weight: bolder;
  position: relative;
  top: -11px;
  left: -10px;
  color: #00ad6c;
}
</style>