<template>
  <!-- 互评记录 -->
  <div class="mutualRecordDiv">
    <el-card v-loading="loading">
      <div class="mutualRecord">
        <div class="recordDiv" v-for="(item, index) in resultData" :key="index">
          <div class="record-list pointer" @click="lookDetail(item.ksh_id)">
            <div class="left">
              <div>
                <span style="color: #171721;">{{item.user_name}}</span>
                <span style="font-size: 12px;color: #8083a3;margin-left: 10px;">{{item.create_dateline}}</span>
              </div>
              <div>
                <el-rate size="large" disabled v-model="item.ksh_star" allow-half />
              </div>
            </div>
            <div class="right">全景课堂 -- {{item.kc_name}}</div>
          </div>
          <el-divider border-style="dashed" />
        </div>
      </div>
    </el-card>

    <el-dialog width="400px" v-model="dialogVisible" title="查看" :close-on-click-modal="false">
      <div>
        <div class="commentList" v-for="(item, index) in commentValueData" :key="index">
          <div>{{item.name}}</div>
          <el-rate size="large" v-model="item.value" allow-half disabled disabled-void-color="#fff" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { user } from '~/store/user';
export default {
  data() {
    return {
      loading: false,
      resultData: [
        {
          name: "余枫",
          time: "2021-01-23 11:15",
          title: "走进生肖文化寅虎卯兔",
          score: 4.5,
          fl: "全景课堂"
        },
        {
          name: "余枫",
          time: "2021-01-23 11:15",
          title: "走进生肖文化寅虎卯兔",
          score: 4.5,
          fl: "全景课堂"
        }
      ],
      dialogVisible: false,
      commentValueData: [],
      commentData1: [
        "学具准备",
        "提前调试",
        "设备使用",
        "课堂纪律",
        "积极应答",
        "作业上传",
      ],
      commentData2: [
        "准备充分",
        "设计科学",
        "过程互动",
        "方法多样",
        "评价多元",
        "仪态大方",
        "精神饱满",
        "学生喜欢",
        "效果良好",
        "作业批改"
      ],
    }
  },
  methods: {
    initData() {
      this.loading = true;
      request({
        url: '/kzkt/ssyskc_hpjl/index',
        data: {
          create_user_id: user.user_id,
          limit: "100"
        }
      }).then(res => {
        if (res.code == 1) {
          this.resultData = res.data.page_data;
          this.loading = false;
        }
      })
    },
    lookDetail(ksh_id) {
      request({
        url: '/kzkt/ssyskc_hpjl/detail',
        data: { ksh_id }
      }).then(res => {
        if (res.code == 1) {
          if (res.data.one_info.ksh_star_string != "") {
            try {
              this.commentValueData = JSON.parse(res.data.one_info.ksh_star_string);
            } catch (error) {
              let arr = res.data.one_info.ksh_star_string.split(",");
              let commentData = arr.length == this.commentData1.length ? this.commentData1 : this.commentData2;
              this.commentValueData = [];
              commentData.map((item, index) => {
                this.commentValueData.push({
                  name: item, value: Number(arr[index])
                })
              })
            }
            this.dialogVisible = true;
          }
        }
      })
    }
  },
  created() {
    this.initData();
  }
}
</script>

<style lang="scss" scoped>
.mutualRecordDiv {
  .mutualRecord {
    padding: 20px;
    .pointer {
      cursor: pointer;
    }
    .recordDiv {
      .record-list {
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        font-size: 14px;
        .left {
        }
        .right {
          color: #00a3ff;
          line-height: 40px;
        }
      }
      .el-divider--horizontal {
        margin: 15px 0;
      }
    }
  }

  .commentList {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
:deep() {
  .el-rate__decimal {
    color: #f7ba2a;
  }
}
</style>