<template>
  <div class="classmate-comment">
 <ClassmatesCommentPages  v-if='this.$store.getters.getisOpenClassmatesCommentNow'/>
    <div class="title-rect-group">
      <div class="title-rect" />
      <h2 class="title-rect-name">同學作業觀摩與互評區</h2>
      <div class="dec">
        <Row :gutter="50">
          <i-col :xs="24" :sm="24" :md="12" :lg="12">
            <table>
              <tr>
                <th>座號</th>
                <th>姓名</th>
                <th>給評</th>
              </tr>
              <tr
              class='mates-list-item'
                v-for="(item, index) in students"
                :key="index"
                v-show="index < 15"
              >
                <td>{{ index + 1 }}</td>
                <td :class="{ isUploadFile: item.isUploadHomework == true }" @click="openComment(item,index+1) ">
                  {{ item.name }}
                </td>
                <td>
                  <p
                    v-if="
                      item.isUploadHomework == true &&
                        item.isGivenComment == true
                    "
                  >
                    <svg-icon icon-class="message" class="comment-icon" />
                  </p>
                </td>
              </tr>
            </table>
          </i-col>
          <i-col :xs="24" :sm="24" :md="12" :lg="12">
            <table>
              <tr>
                <th>座號</th>
                <th>姓名</th>
                <th>給評</th>
              </tr>
              <tr
                v-for="(item, index) in students"
                :key="index"
                v-show="index >= 15 && index < 30"
              >
                <td>{{ index + 1 }}</td>
                <td :class="{ isUploadFile: item.isUploadHomework == true }" @click="openComment(item,index+1) ">
                {{ item.name }}
                </td>
                <td>
                  <p
                    v-if="
                      item.isUploadHomework == true &&
                        item.isGivenComment == true
                    "
                  >
                    <svg-icon icon-class="message" class="comment-icon" />
                  </p>
                </td>
              </tr>
            </table>
          </i-col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import ClassmatesCommentPages from "../EventContentTypeTemplate/ClassmateCommentPages";
import mockdata from "@/api/newData";
export default {
  name: "ClassmateComment",
  components:{
    ClassmatesCommentPages,
  },
  data() {
    return {
      openClassmateComment:false,
      students: mockdata.courseList[0].students,
      
    };
  },
  methods:{
     openComment(item,ID) {
      
       if(item.isUploadHomework == true)
      this.$store.commit("ToggleClassmatesComment",item);
      this.$store.commit("ChangeClassmatesCommentID",ID);
    },
  }
};
</script>

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