<template>
  <div class="cDetail">
    <div class="cTop">
      <div
        class="test_type"
        :class="{
          is: (c.type == 1 && c.testCount > 1) || (c.type != 1 && c.testCount > 0),
          no: c.testCount == 0,
          isR: c.type == 3,
          isS: c.type == 1 && c.testCount == 1
        }"
      >
        <span>{{
          c.testCount > 0 ? (c.type == 3 ? '已批改' : c.type == 1 && c.testCount == 1 ? '已保存' : '已完成') : '未完成'
        }}</span>
      </div>
      <div class="ctitle">{{ c.title }}</div>
    </div>
    <div class="cMiddle">
      <div class="cLeft">
        <div><span style="color: #aaadb1">题目数量：</span>{{ getNum(c.chapters) }}</div>
        <div><span style="color: #aaadb1">截止时间：</span>{{ c.overtime ? c.overtime.split(' ')[0] : "暂无" }}</div>
        <div><span style="color: #aaadb1">创建时间：</span>{{ c.time.split(' ')[0] }}</div>
      </div>
      <div class="cRight">
        <div class="ctmNumber">{{ getScore(c.array) }}分</div>
        <div class="ctmNum">综合评分</div>
      </div>
    </div>
    <div class="bottom">
      <div class="cBLeft">
        <div>
          已提交<span style="color: #3f86fc; padding: 0 5px">{{ c.array.length }}</span
          >份
        </div>
        <div :class="c.isOpen ? 'isAll' : 'all'" @click="isClick">
          <img src="../../../assets/images/testStudent/all.png" alt="" />
        </div>
      </div>
      <div class="cBRight">
        <div class="editIcon" @click="goTo(c.courseId)">
          <img src="../../../assets/images/testStudent/edit.png" alt="" />
        </div>
        <div>填写</div>
      </div>
    </div>
    <div :class="c.isOpen ? 'cWorksBox' : 'iscWorksBox'" v-if="c.array.length > 0">
      <div
        v-for="(item, index) in c.array"
        :key="index"
        class="cWorksItem"
        @click="checkTest(item.courseid, item.id, item.name)"
      >
        <div class="cWItemLeft">
          <div>{{ item.name }}</div>
          <div>{{ item.createTime }}</div>
        </div>
        <div class="cWItemRight">
          <div @click.stop="doTest(item.courseid, item.id, item.name)" v-if="item.userid == userinfo.userid">修改</div>
          <div @click.stop="deleteTest(item.id)" v-if="item.userid == userinfo.userid">删除</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { deleteTestCourseWorks } from '@/api/testDetail'
import { mapGetters } from 'vuex'
// import { showConfirmDialog } from 'vant'
export default {
  props: {
    c: {
      type: Object
    }
  },
  computed: {
    ...mapGetters(['userinfo']),
    getNum() {
      return function (array) {
        let _array = JSON.parse(array)
        let num = 0
        _array.forEach(el => {
          if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
            el.array.forEach(item => {
              if (item.ttype == 2 && item.array.length > 0) {
                item.array.forEach(item2 => {
                  if (item2.ttype == 1 && item2.json) {
                    num++
                  }
                })
              } else if (item.ttype == 1 && item.json) {
                num++
              }
            })
          } else if (el.ttype == 1 && el.json) {
            num++
          }
        })
        return num
      }
    },
    getScore() {
      return function (array) {
        // let _array = JSON.parse(array)
        let _score = 0
        let scoreArray = []
        for (var i = 0; i < array.length; i++) {
          let _array = JSON.parse(array[i].courseJson)
          let score = 0
          for (var j = 0; j < _array.length; j++) {
            let el = _array[j]
            if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
              for (var k = 0; k < el.array.length; k++) {
                let item = el.array[k]
                if (item.ttype == 2 && item.array.length > 0) {
                  for (var z = 0; z < item.array.length; z++) {
                    let item2 = item.array[z]
                    if (item2.ttype == 1 && item2.json && item2.json.score2) {
                      score += parseInt(item2.json.score2)
                    }
                  }
                } else if (item.ttype == 1 && item.json && item.json.score2) {
                  score += parseInt(item.json.score2)
                }
              }
            } else if (el.ttype == 1 && el.json && el.json.score2) {
              score += parseInt(el.json.score2)
            }
          }
          scoreArray.push(score)
        }
        scoreArray.forEach(el => {
          _score += el
        })
        console.log(scoreArray)
        return _score ? (_score / scoreArray.length).toFixed(1) : 0
      }
    }
  },
  methods: {
    goTo(cid) {
      // eslint-disable-next-line prettier/prettier
      this.$router.push({ path: '/testDetail', query: { courseid: cid } })
    },
    doTest(cid, tid, name) {
      this.$router.push({ path: '/preview', query: { courseid: cid, tid: tid, name: name } })
    },
    checkTest(cid, tid, name) {
      this.$router.push({ path: '/check', query: { courseid: cid, tid: tid, name: name } })
    },
    isClick() {
      this.c.isOpen = !this.c.isOpen
    },
    deleteTest(tid) {
      this.$dialog
        .confirm({
          title: '删除提示',
          message: '确定删除此提交的评测么？',
          confirmButtonText: '确认', //改变确认按钮上显示的文字
          cancelButtonText: '取消' //改变取消按钮上显示的文字
        })
        .then(() => {
          const params = [
            {
              tid: tid
            }
          ]
          deleteTestCourseWorks(params)
            .then(res => {
              this.$message.success('删除成功')
              this.$emit('getCourse')
            })
            .catch(err => {
              console.error(err)
            })
        })
        .catch(() => {
          console.log('点击了取消按钮噢')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.cDetail {
  .cTop {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    width: 100%;
    .test_type {
      font-size: 12px;
      border-radius: 5px;
      border: 1.5px solid;
      padding: 3px 8px;
      width: 45px;
      text-align: center;
      margin-right: 10px;
    }
    .is {
      color: rgb(57, 204, 127);
      background-color: rgba(57, 204, 127, 0.1);
    }
    .no {
      color: rgb(240, 66, 66);
      background-color: rgba(240, 66, 66, 0.1);
    }
    .isR {
      color: rgb(0, 98, 255);
      background-color: rgba(0, 98, 255, 0.1);
    }
    .isS {
      color: rgb(255, 173, 31);
      background-color: rgba(255, 173, 31, 0.1);
    }
    .ctitle {
      font-size: 16px;
      font-weight: bold;
      padding: 10px 0 20px 0;
      max-width: calc(100% - 90px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
    }
  }
  .cMiddle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: calc(100% - 20px);
    background: #f3f7fd;
    border-radius: 5px;
    padding: 15px 10px;
    justify-content: space-between;
    .cLeft {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      font-size: 14px;
      > div:not(:last-child) {
        padding: 0 0 10px 0;
      }
    }
    .cRight {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      border-left: 1px solid #dedfdf;
      padding-left: 15px;
      box-sizing: border-box;
      .ctmNumber {
        font-size: 16px;
        color: #3681fc;
        font-weight: bold;
        padding: 0 0 5px 0;
      }
      .ctmNum {
        font-size: 14px;
        color: #999;
      }
    }
  }
  .bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    .cBLeft {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      padding: 10px 0;
      font-size: 14px;
      .isAll {
        transform: rotate(180deg);
      }
      .all,
      .isAll {
        width: 15px;
        height: 15px;
        margin-left: 5px;
        cursor: pointer;
        transition: all 0.5s;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .cBRight {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      background: #3681fc;
      color: #fff;
      width: 70px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 15px;
      justify-content: center;
      cursor: pointer;
      padding: 1px;
      .editIcon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .iscWorksBox {
    display: none !important;
    border: none !important;
  }
  .cWorksBox,
  .iscWorksBox {
    padding: 20px 0 10px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    border-top: 0.02667rem solid #e3e3e3;
    .cWorksItem:last-child{
      padding: 0;
    }
    .cWorksItem {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-start;
      padding: 0 0 20px 0;
      font-size: 15px;
      width: 100%;
      .cWItemLeft {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        > div:first-child {
          font-weight: bold;
          padding: 0 0 10px 0;
          max-width: 290px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-word;
        }
        > div:last-child {
          color: #c0c0c0;
          font-size: 13px;
        }
      }
      .cWItemRight {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        color: #00000099;
        > div:last-child {
          padding-left: 15px;
        }
      }
    }
  }
}
</style>