<template>
  <chapter-work-answer-item :data="data" :key="data.id" v-bind="$attrs">
    <el-form :model="ruleForm" :rules="rules" :hide-required-asterisk="true" label-position="top" ref="ruleForm">
      <el-form-item :label="$t('viewerWork.commentMyTitle')" prop="comment">
        <v-editor v-model="ruleForm.comment" :disabled="disabled"></v-editor>
      </el-form-item>
      <el-form-item>
        <div class="button">
          <el-button type="primary" :disabled="disabled" @click="handleSubmit">{{
            $t('viewerWork.commentSubmitText')
          }}</el-button>
          <p>{{ $t('viewerWork.commentSubmitTips', { date: endDate }) }}</p>
        </div>
      </el-form-item>
    </el-form>
  </chapter-work-answer-item>
</template>

<script>
// api
import * as api from '../../api'
// componets
import ChapterWorkAnswerItem from './chapterWorkAnswerItem.vue'
import VEditor from '@/components/ckeditor'

export default {
  props: { endDate: { type: String }, data: { type: Object, default: () => ({}) } },
  components: { ChapterWorkAnswerItem, VEditor },
  data() {
    return {
      ruleForm: { comment: this.data.comment },
      rules: {
        comment: [
          { required: true, message: '请输入评价内容', trigger: 'blur' },
          { max: 1000, message: '最多输入1000个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isSubmitTime() {
      // 大于开始时间，小于结束时间
      const endTime = +new Date(this.endDate)
      const currentTime = new Date().getTime()
      return currentTime < endTime
    },
    // 是否禁用
    disabled() {
      return !this.isSubmitTime
      // return false
    }
  },
  methods: {
    // 提交评价
    handleSubmit() {
      this.$refs.ruleForm.validate().then(this.handleSubmitReqeuest)
    },
    handleSubmitReqeuest() {
      api.addChapterHomeworkComment(this.data.id, this.ruleForm).then(response => {
        this.$message({ type: 'success', message: response.message })
        this.$emit('update')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.button {
  display: flex;
  align-items: center;
  p {
    padding-left: 20px;
  }
}
</style>
