<template>
  <div class="sb-container" v-if="chapInfo && chapInfo.chapterInfo">
    <div class="steps-box" v-for="(step, stepI) in toolChoose()" :key="stepI">
      <div class="step-title">
        <div class="step">
          <span>步骤{{ stepI + 1 }}</span>
        </div>
        <div
          class="do"
          v-if="isCloseList[stepI] && worksStudent[stepI] && worksStudent[stepI].length > 4"
          @click="contract(stepI)"
          :class="{ close: isCloseList[stepI] && isCloseList[stepI].isClose == '1' }"
        >
          {{ isCloseList[stepI].isClose == '1' ? '展开' : '收缩' }}
        </div>
      </div>
      <div class="tool-box" v-if="tools[step.tool[0]]">
        <div class="tool-img"><img :src="tools[step.tool[0]].img" /></div>
        <div class="tool-name">{{ tools[step.tool[0]].name }}</div>
      </div>
      <div
        class="works-box"
        v-if="isWorkTool.indexOf(step.tool[0]) !== -1 && worksStudent[stepI] && worksStudent[stepI].length"
      >
        <div class="title">作业预览</div>
        <div class="works">
          <Works
            class="work"
            v-for="(work, workI) in isCloseList[stepI].isClose == 0
              ? worksStudent[stepI]
              : worksStudent[stepI].slice(0, 4)"
            :key="stepI + '-' + workI"
            :work="work"
          >
          </Works>
        </div>
      </div>
      <div
        class="no-works-box"
        v-if="isWorkTool.indexOf(step.tool[0]) !== -1 && noWorksS[stepI] && noWorksS[stepI].length"
      >
        <div class="title">未提交</div>
        <div class="no-works-box-students">
          <div v-for="(student, noI) in noWorksS[stepI]" :key="stepI + '-' + noI" class="student">
            {{ student.student }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="!toolChoose().length" class="noMssage">
      <img src="@/assets/images/course/isNoMessage.png" />
    </div>
  </div>
</template>

<script>
import { getCourseWorks, getCourseWorksStudentJuri } from '@/api/course'
import { tools } from '@/const/index'
import Works from './works.vue'
export default {
  props: {
    chapInfo: {
      type: Object,
      default: () => {}
    },
    courseDetail: {
      type: Object,
      default: () => {}
    },
    courseType: {
      type: Number,
      default: 0
    },
    taskCount: {
      type: Number,
      default: 0
    },
    courseid: {
      type: String,
      default: ''
    },
    tcid: {
      type: String,
      default: ''
    },
    oid: {
      type: String,
      default: ''
    }
  },
  components: {
    Works
  },
  data() {
    return {
      worksStudent: [],
      isWorksS: [],
      isCloseList: [],
      noWorksS: [],
      isWorkTool: [16, 32, 57, 4, 45, 15, 1, 3, 6, 7, 26, 41, 47, 48, 52, 50, 40], //, 49
      tools: tools
    }
  },
  watch: {
    courseid(newValue, oldValue) {
      this.getWorks()
    },
    courseType(newValue, oldValue) {
      this.getWorks()
    },
    taskCount(newValue, oldValue) {
      this.getWorks()
    }
  },
  computed: {
    toolChoose() {
      return () => {
        let toolchoose = this.chapInfo.chapterInfo[0].taskJson[this.taskCount].toolChoose
        toolchoose = toolchoose.filter(el => {
          return el.tool.length
        })
        return toolchoose
      }
    }
  },
  methods: {
    arrayToArray(arrayo, arrayt) {
      const array1 = arrayo
      const array2 = arrayt

      const commonElements = []

      for (let i = 0; i < array1.length; i++) {
        for (let j = 0; j < array2.length; j++) {
          if (array1[i] === array2[j]) {
            commonElements.push(array1[i])
          }
        }
      }
      return commonElements
    },
    getWorks() {
      // 教师查看全部作业
      const params = {
        cid: this.courseid,
        s: this.courseType,
        t: this.taskCount
      }
      getCourseWorks(params)
        .then(res => {
          const works = res[0]
          const f = res[3]
          const steps = this.chapInfo.chapterInfo[0].taskJson[this.taskCount].toolChoose
          const worksStudent = []
          const isCloseList = []
          const groupStudent = []
          const groupStudentUid = []
          const isWorksS = []
          const wordPan = ['PDF', 'DOC', 'DOCX', 'PPT', 'PPTX', 'XLSX', 'XLS']
          const videoPan = [
            'AVI',
            'NAVI',
            'MPEG',
            'ASF',
            'MOV',
            'WMV',
            '3GP',
            'RM',
            'RMVB',
            'FLV',
            'F4V',
            'H.264',
            'H.265',
            'REAL VIDEO',
            'MKV',
            'WebM',
            'HDDVD',
            'MP4',
            'MPG',
            'M4V',
            'MGV',
            'OGV',
            'QTM',
            'STR',
            'AMC',
            'DVX',
            'EVO',
            'DAT',
            'OGG',
            'OGM'
          ]
          console.log(works)
          for (var step = 0; step < steps.length; step++) {
            worksStudent[step] = []
            if (!isCloseList[step] || isCloseList[step].isClose === undefined) {
              isCloseList[step] = { isClose: 0 }
            }
            groupStudent[step] = []
            isWorksS[step] = []
            groupStudentUid[step] = []
            if (steps[step].tool[0] === 49) {
              for (var gA = 0; gA < steps[step].groupJson.group.length; gA++) {
                groupStudent[step][gA] = []
                groupStudentUid[step][gA] = []
                worksStudent[step][gA] = []
                isCloseList[step][gA] = []

                for (var g = 0; g < f.length; g++) {
                  if (
                    f[g].ttype === 2 &&
                    this.tcid &&
                    this.arrayToArray(f[g].classid.split(','), this.tcid.split(',')).length === 0
                  ) {
                    continue
                  }
                  if (gA === f[g].group && f[g].tool === step) {
                    this.groupStudent[step][gA].push(f[g])
                    this.groupStudentUid[step][gA].push(f[g].userid)
                  }
                }
              }
              this.$forceUpdate()
            }
            for (var j = 0; j < works.length; j++) {
              if (
                works[j].ttype === 2 &&
                this.tcid &&
                this.arrayToArray(works[j].classid.split(','), this.tcid.split(',')).length === 0
              ) {
                continue
              }
              var likesCount = 0
              var commentCount = 0
              var isLikes = false
              var commentJson = []

              if (step === works[j].tool) {
                if (
                  (works[j].type === 1 ||
                    works[j].type === 4 ||
                    works[j].type === 5 ||
                    works[j].type === 6 ||
                    works[j].type === 12 ||
                    works[j].type === 7) &&
                  steps[step].tool[0] !== 15 &&
                  steps[step].tool[0] !== 4 &&
                  steps[step].tool[0] !== 45 &&
                  steps[step].tool[0] !== 50 &&
                  steps[step].tool[0] !== 32 &&
                  steps[step].tool[0] !== 57 &&
                  steps[step].tool[0] !== 52
                ) {
                  if (
                    wordPan.indexOf(
                      works[j].content.split('.')[works[j].content.split('.').length - 1].toLocaleUpperCase()
                    ) !== -1 &&
                    steps[step].tool[0] === 16 &&
                    (works[j].atool ? parseInt(works[j].atool) : '') !== 50
                  ) {
                    const _works = {
                      userid: works[j].userid,
                      ateacher: works[j].ateacher,
                      wid: works[j].id,
                      works: works[j].content,
                      sName: works[j].name,
                      type: 1,
                      time: works[j].time,
                      score: works[j].score,
                      img: works[j].img,
                      likesCount: likesCount,
                      commentCount: commentCount,
                      isLikes: isLikes,
                      commentJson: commentJson
                    }
                    worksStudent[step].push(_works)
                    isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                  } else if (
                    videoPan.indexOf(
                      works[j].content.split('.')[works[j].content.split('.').length - 1].toLocaleUpperCase()
                    ) !== -1 &&
                    steps[step].tool[0] === 16 &&
                    (works[j].atool ? parseInt(works[j].atool) : '') !== 50
                  ) {
                    const _works = {
                      userid: works[j].userid,
                      ateacher: works[j].ateacher,
                      wid: works[j].id,
                      works: works[j].content,
                      sName: works[j].name,
                      type: 3,
                      time: works[j].time,
                      score: works[j].score,
                      img: works[j].img,
                      likesCount: likesCount,
                      commentCount: commentCount,
                      isLikes: isLikes,
                      commentJson: commentJson
                    }

                    worksStudent[step].push(_works)
                    isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                  } else if (works[j].type === 6 && (works[j].atool ? parseInt(works[j].atool) : '') !== 50) {
                    const _works = {
                      userid: works[j].userid,
                      ateacher: works[j].ateacher,
                      wid: works[j].id,
                      works: works[j].content,
                      sName: works[j].name,
                      type: 4,
                      time: works[j].time,
                      score: works[j].score,
                      img: works[j].img,
                      likesCount: likesCount,
                      commentCount: commentCount,
                      isLikes: isLikes,
                      commentJson: commentJson
                    }

                    worksStudent[step].push(_works)
                    isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                  } else if (works[j].type === 7 && (works[j].atool ? parseInt(works[j].atool) : '') !== 50) {
                    const _works = {
                      userid: works[j].userid,
                      ateacher: works[j].ateacher,
                      wid: works[j].id,
                      works: works[j].content,
                      sName: works[j].name,
                      type: 5,
                      time: works[j].time,
                      score: works[j].score,
                      img: works[j].img,
                      likesCount: likesCount,
                      commentCount: commentCount,
                      isLikes: isLikes,
                      commentJson: commentJson
                    }

                    worksStudent[step].push(_works)
                    isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                  } else if (
                    works[j].type === 12 &&
                    steps[step].tool[0] === (works[j].atool ? parseInt(works[j].atool) : '')
                  ) {
                    const _works = {
                      userid: works[j].userid,
                      ateacher: works[j].ateacher,
                      wid: works[j].id,
                      works: works[j].content,
                      sName: works[j].name,
                      type: 12,
                      time: works[j].time,
                      score: works[j].score,
                      img: works[j].img,
                      likesCount: likesCount,
                      commentCount: commentCount,
                      isLikes: isLikes,
                      commentJson: commentJson
                    }

                    worksStudent[step].push(_works)
                    isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                  } else if (
                    works[j].type === 1 &&
                    steps[step].tool[0] === (works[j].atool ? parseInt(works[j].atool) : '')
                  ) {
                    const _works = {
                      userid: works[j].userid,
                      ateacher: works[j].ateacher,
                      wid: works[j].id,
                      works: works[j].content,
                      sName: works[j].name,
                      type: 0,
                      time: works[j].time,
                      score: works[j].score,
                      img: works[j].img,
                      likesCount: likesCount,
                      commentCount: commentCount,
                      isLikes: isLikes,
                      commentJson: commentJson
                    }

                    worksStudent[step].push(_works)
                    isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                  } else if (works[j].type === 1 && !parseInt(works[j].atool ? parseInt(works[j].atool) : '')) {
                    const _works = {
                      userid: works[j].userid,
                      ateacher: works[j].ateacher,
                      wid: works[j].id,
                      works: works[j].content,
                      sName: works[j].name,
                      type: 0,
                      time: works[j].time,
                      score: works[j].score,
                      img: works[j].img,
                      likesCount: likesCount,
                      commentCount: commentCount,
                      isLikes: isLikes,
                      commentJson: commentJson
                    }

                    worksStudent[step].push(_works)
                    isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                  }
                } else if (works[j].type === 3 && steps[step].tool[0] === 15) {
                  const _works = {
                    userid: works[j].userid,
                    ateacher: works[j].ateacher,
                    wid: works[j].id,
                    works: works[j].content,
                    sName: works[j].name,
                    type: 2,
                    time: works[j].time,
                    score: works[j].score,
                    img: works[j].img,
                    likesCount: likesCount,
                    commentCount: commentCount,
                    isLikes: isLikes,
                    commentJson: commentJson
                  }

                  worksStudent[step].push(_works)
                  isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                } else if (works[j].type === 2 && steps[step].tool[0] === 4) {
                  // 问卷
                  const _works = {
                    userid: works[j].userid,
                    ateacher: works[j].ateacher,
                    wid: works[j].id,
                    works: works[j].content,
                    sName: works[j].name,
                    type: 2,
                    time: works[j].time,
                    score: works[j].score,
                    img: works[j].img,
                    likesCount: likesCount,
                    commentCount: commentCount,
                    isLikes: isLikes,
                    commentJson: commentJson
                  }

                  worksStudent[step].push(_works)
                  isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                } else if (works[j].type === 8 && steps[step].tool[0] === 45) {
                  // 选择题
                  const _works = {
                    userid: works[j].userid,
                    ateacher: works[j].ateacher,
                    wid: works[j].id,
                    works: works[j].content,
                    sName: works[j].name,
                    type: 8,
                    time: works[j].time,
                    score: works[j].score,
                    img: works[j].img,
                    likesCount: likesCount,
                    commentCount: commentCount,
                    isLikes: isLikes,
                    commentJson: commentJson
                  }

                  worksStudent[step].push(_works)
                  isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                } else if (works[j].type === 9 && steps[step].tool[0] === 47) {
                  // 选择题
                  const _works = {
                    userid: works[j].userid,
                    ateacher: works[j].ateacher,
                    wid: works[j].id,
                    works: works[j].content,
                    sName: works[j].name,
                    type: 9,
                    time: works[j].time,
                    score: works[j].score,
                    img: works[j].img,
                    likesCount: likesCount,
                    commentCount: commentCount,
                    isLikes: isLikes,
                    commentJson: commentJson
                  }

                  worksStudent[step].push(_works)
                  isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                } else if (works[j].type === 10 && steps[step].tool[0] === 48) {
                  // 选择题
                  const _works = {
                    userid: works[j].userid,
                    ateacher: works[j].ateacher,
                    wid: works[j].id,
                    works: works[j].content,
                    sName: works[j].name,
                    type: 10,
                    time: works[j].time,
                    score: works[j].score,
                    img: works[j].img,
                    likesCount: likesCount,
                    commentCount: commentCount,
                    isLikes: isLikes,
                    commentJson: commentJson
                  }

                  worksStudent[step].push(_works)
                  isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                } else if (works[j].type === 13 && steps[step].tool[0] === 52) {
                  // 选择题
                  const _works = {
                    userid: works[j].userid,
                    ateacher: works[j].ateacher,
                    wid: works[j].id,
                    works: works[j].content,
                    sName: works[j].name,
                    type: 13,
                    time: works[j].time,
                    score: works[j].score,
                    img: works[j].img,
                    likesCount: likesCount,
                    commentCount: commentCount,
                    isLikes: isLikes,
                    commentJson: commentJson
                  }

                  worksStudent[step].push(_works)
                  isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                } else if (works[j].type === 11 && steps[step].tool[0] === 49) {
                  const _gindex = JSON.parse(works[j].content)
                  if (groupStudentUid[step][_gindex.groupIndex].indexOf(works[j].userid) !== -1) {
                    worksStudent[step][_gindex.groupIndex].push({
                      userid: works[j].userid,
                      ateacher: works[j].ateacher,
                      wid: works[j].id,
                      works: _gindex.url,
                      sName: works[j].name,
                      type: _gindex.type,
                      time: works[j].time,
                      score: works[j].score,
                      img: works[j].img,
                      likesCount: likesCount,
                      commentCount: commentCount,
                      isLikes: isLikes,
                      commentJson: commentJson
                    })
                  }
                  isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                } else if (steps[step].tool[0] === 50 && (works[j].atool ? parseInt(works[j].atool) : '') === 50) {
                  const _works = {
                    userid: works[j].userid,
                    ateacher: works[j].ateacher,
                    wid: works[j].id,
                    works: works[j].content,
                    sName: works[j].name ? works[j].name : works[j].userid,
                    type: works[j].type === 1 ? 0 : works[j].type === 4 ? 1 : 3,
                    time: works[j].time,
                    score: works[j].score,
                    img: works[j].img,
                    likesCount: likesCount,
                    commentCount: commentCount,
                    isLikes: isLikes,
                    commentJson: commentJson
                  }

                  worksStudent[step].push(_works)
                  isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                } else if (steps[step].tool[0] === 32 && (works[j].atool ? parseInt(works[j].atool) : '') === 32) {
                  const _works = {
                    userid: works[j].userid,
                    ateacher: works[j].ateacher,
                    wid: works[j].id,
                    works: works[j].content,
                    sName: works[j].name ? works[j].name : works[j].userid,
                    type: 12,
                    time: works[j].time,
                    score: works[j].score,
                    img: works[j].img,
                    likesCount: likesCount,
                    commentCount: commentCount,
                    isLikes: isLikes,
                    commentJson: commentJson
                  }

                  worksStudent[step].push(_works)
                  isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                } else if (steps[step].tool[0] === 57 && (works[j].atool ? parseInt(works[j].atool) : '') === 57) {
                  const _works = {
                    userid: works[j].userid,
                    ateacher: works[j].ateacher,
                    wid: works[j].id,
                    works: works[j].content,
                    sName: works[j].name ? works[j].name : works[j].userid,
                    type: 12,
                    time: works[j].time,
                    score: works[j].score,
                    img: works[j].img,
                    likesCount: likesCount,
                    commentCount: commentCount,
                    isLikes: isLikes,
                    commentJson: commentJson
                  }

                  worksStudent[step].push(_works)
                  isWorksS[step].push({ uid: works[j].userid, sName: works[j].name })
                }
              }
            }
          }
          this.worksStudent = worksStudent
          this.isCloseList = isCloseList
          this.groupStudent = groupStudent
          this.groupStudentUid = groupStudentUid
          this.isWorksS = isWorksS
          this.$forceUpdate()
          this.selectWorksStudent()
        })
        .catch(err => {
          console.error(err)
        })
    },
    selectWorksStudent() {
      const params = {
        oid: this.oid,
        cid: this.courseDetail.juri
      }
      getCourseWorksStudentJuri(params)
        .then(res => {
          var a = res[0]
          for (var i = 0; i < this.isWorksS.length; i++) {
            this.noWorksS[i] = []
            var studentK = []
            for (var z = 0; z < this.isWorksS[i].length; z++) {
              studentK.push(this.isWorksS[i][z].uid)
            }
            studentK = studentK.join(',')
            for (var j = 0; j < a.length; j++) {
              if (studentK.indexOf(a[j].userid) === -1) {
                if (this.tcid) {
                  if (this.arrayToArray(a[j].classid.split(','), this.tcid.split(',')).length) {
                    this.noWorksS[i].push({
                      student: a[j].name,
                      userid: a[j].userid
                    })
                  }
                } else {
                  this.noWorksS[i].push({
                    student: a[j].name,
                    userid: a[j].userid
                  })
                }
              }
            }
          }
          this.$forceUpdate()
        })
        .catch(err => {
          console.log(err)
        })
    },
    contract(i) {
      if (this.isCloseList[i].isClose === 0) {
        this.isCloseList[i].isClose = 1
      } else {
        this.isCloseList[i].isClose = 0
      }
      this.$forceUpdate()
    }
  },
  mounted() {
    this.getWorks()
  }
}
</script>

<style lang="scss" scoped>
.sb-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  .steps-box {
    width: 100%;
    border-bottom: 1px solid rgb(239, 239, 239);
    padding: 15px 0;
    .step-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 0.8rem;
      .step {
        font-size: 18px;
        font-weight: bold;
        display: flex;
        height: 100%;
        align-items: center;
        &::before {
          content: '';
          height: 100%;
          width: 3px;
          display: block;
          margin-right: 0.2rem;
          background-image: linear-gradient(180deg, #2c5cbd, #a1cff4);
        }
      }
      .do {
        font-size: 14px;
        color: #b9b9b9;
        display: flex;
        align-items: center;
        cursor: pointer;
        &::after {
          content: '';
          width: 5px;
          height: 5px;
          border-top: 2px solid #b9b9b9;
          border-left: 2px solid #b9b9b9;
          transform: rotate(-135deg);
          transition: all 0.5s;
          margin-left: 5px;
        }
        &.close {
          &::after {
            transform: rotate(-45deg);
          }
        }
      }
    }
  }
  .tool-box {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    .tool-img {
      width: 1.5rem;
      border-radius: 15px;
      box-shadow: 0 1px 8px 0 #14141424;
      > img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
    }
    .tool-name {
      font-size: 14px;
      margin-top: 5px;
    }
  }

  .works-box {
    .title {
      font-size: 14px;
      color: #858585;
    }
    .works {
      margin: 10px 0 0;
      display: flex;
      flex-wrap: wrap;
      .work {
      }
    }
  }
  .no-works-box {
    margin-top: 10px;
    .title {
      font-size: 14px;
      color: #858585;
    }
    .no-works-box-students {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin: 10px 0 0;
      .student {
        background: #7cbcf1;
        color: #fff;
        width: 70px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border-radius: 5px;
        margin: 0 15px 10px 0;
        padding: 5px;
        cursor: pointer;
        @include textoverflow();
      }
    }
  }

  .noMssage {
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    > img {
      width: 3rem;
    }
  }
}
</style>
