<template>
  <container :title="$t('viewerWork.commentTitle')">
    <template v-for="(item, index) in list">
      <el-form
        label-position="top"
        :disabled="disabled"
        :model="item"
        :rules="rules"
        :hide-required-asterisk="true"
        :key="item.id"
        ref="form"
      >
        <el-form-item prop="comment">
          <chapter-work-comment-item
            :data="item"
            :index="index"
            :disabled="disabled"
            :key="item.id"
            @update="getList"
          /> </el-form-item
      ></el-form>
    </template>
    <!-- <p style="color: #f00;margin: 20px 0;">{{ $t('viewerWork.commentSubmitTips', { date: endTime }) }}</p> -->
    <p class="help" style="margin: 20px 0;color: #999;line-height: 28px;">
      已于 {{ submitTime }} 提交，等待老师批改中。
    </p>
    <div class="button" v-if="status !== 0">
      <el-button type="primary" :disabled="disabled" @click="handleSubmit">{{
        $t('viewerWork.commentSubmitText')
      }}</el-button>
      <p style="color: #f00" v-if="status === 1">注：重新提交后不可修改，请检查好作业内容再做提交。</p>
      <!-- <p style="color: #f00" v-else>{{ $t('viewerWork.commentSubmitTips', { date: endTime }) }}</p> -->
    </div>
    <slot></slot>
    <div class="more" v-if="false">
      <router-link :to="`${$route.path}/answers`" target="_blank">
        <el-button round>{{ $t('viewerWork.answerMoreButtonText') }}</el-button>
      </router-link>
    </div>
  </container>
</template>

<script>
// api
import * as api from '../../api'
// componets
import Container from '../common/container.vue'
import ChapterWorkCommentItem from './chapterWorkCommentItem.vue'

export default {
  components: { Container, ChapterWorkCommentItem },
  props: { endTime: { type: String }, status: { type: Number } },
  data() {
    return {
      list: [],
      rules: {
        comment: [{ required: true, message: '请输入评论内容', trigger: 'change' }]
      },
      popoverVisible: false
    }
  },
  computed: {
    // 学期ID
    sid() {
      return this.$route.params.sid
    },
    // 课程ID
    cid() {
      return this.$route.params.cid
    },
    // 当前页面的ID
    pid() {
      return this.$route.params.id
    },
    isSubmitTime() {
      // 大于开始时间，小于结束时间
      const endTime = +new Date(this.endTime.replace(/-/g, '/'))
      const currentTime = new Date().getTime()
      return currentTime < endTime
    },
    // 是否禁用
    disabled() {
      if (this.status === 0) {
        return true
      }
      // -1未处理  0已处理   1驳回
      // if (this.status === 1) {
      //   return false
      // }
      // return !this.isSubmitTime
    },
    submitTime() {
      return this.list[0]?.created_time
    }
  },
  methods: {
    getList() {
      api.getChapterHomeworkOther(this.sid, this.cid, this.pid).then((response) => {
        this.list = response
      })
    },
    // 提交校验
    checkSubmit() {
      let result = true
      for (let i = 0; i < this.list.length; i++) {
        this.$refs.form[i].validate((valid) => {
          if (!valid) {
            result = valid
            return result
          }
        })
      }
      return result
    },
    // 提交评价
    handleSubmit() {
      // 校验
      if (!this.checkSubmit()) {
        this.messageInstance && this.messageInstance.close()
        this.messageInstance = this.$message.error(this.$t('viewerWork.examSubmitError'))
        return
      }
      // 驳回提交
      if (this.status === 1) {
        this.$confirm('本次作业提交后不可修改，您确认提交吗？', '提示', {
          confirmButtonText: '确定提交',
          type: 'warning'
        }).then(this.handleSubmitReqeuest)
      } else {
        // 正常提交
        this.handleSubmitReqeuest()
      }
    },
    handleSubmitReqeuest() {
      const params = this.list.map(({ id, comment }) => {
        return { id, comment }
      })
      api
        .addChapterHomeworkComment(params)
        .then((response) => {
          this.$message({ type: 'success', message: response.message })
          this.getList()
          this.$emit('update')
        })
        .catch((error) => {
          this.$message({ type: 'error', message: error.message })
        })
    }
  },
  beforeMount() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.more {
  text-align: center;
  padding-top: 40px;
}
.button {
  display: flex;
  align-items: center;
  p {
    padding-left: 20px;
  }
}
::v-deep .el-form-item__content {
  line-height: 24px;
}
</style>
