<template>
  <el-row v-if="!isCustomEdit" class="comment">
    <el-col :span="12">
      <el-form-item :label-width="labelWidth" prop="commentEnable" label="允许评论">
        <el-switch v-model="commentEnable" active-value="Y" inactive-value="N">
        </el-switch>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item prop="commentTime" label="允许评论时间" v-show="commentEnable==='Y'">
        <el-date-picker id="commentTimepicker" v-model="commentTime" type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
    </el-col>
  </el-row>
  <div v-else>
    <el-form-item :label-width="labelWidth" prop="commentEnable" label="允许评论">
      <el-switch v-model="commentEnable" active-value="Y" inactive-value="N">
      </el-switch>
    </el-form-item>
    <el-form-item prop="commentTime" label="允许评论时间" v-show="commentEnable==='Y'" class="custom-comment">
      <el-date-picker id="commentTimepicker" v-model="commentTime" type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" style="wdith:100%;"></el-date-picker>
    </el-form-item>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      commentEnable: 'Y',
      commentTime: [],
      isInit: true
    }
  },
  props: {
    content: {
      type: Object,
      default: function() {
        return {}
      }
    },
    isCustomEdit: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: '120px'
    }
  },
  watch: {
    content: {
      handler(val, oldVal) {
        if (this.content.ID) {
          if (this.commentEnable !== 'Y') {
            this.commentTime = [util.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'), '2099-12-31 0:0:0']
          } else {
            if (this.isInit) {
              this.isInit = false
              this.commentEnable = this.content.props.commentEnable
              if (this.content.props.commentStartTime && this.content.props.commentEndTime) {
                this.commentTime = [this.content.props.commentStartTime, this.content.props.commentEndTime]
              }
            }
          }
        }
      },
      deep: true
    },
    commentEnable() {
      this.content.props.commentEnable = this.commentEnable
      this.content.props.commentStartTime = this.commentTime[0]
      this.content.props.commentEndTime = this.commentTime[1]
      this.$emit('update:content', this.content)
    },
    commentTime() {
      this.content.props.commentStartTime = this.commentTime ? this.commentTime[0] : ''
      this.content.props.commentEndTime = this.commentTime ? this.commentTime[1] : ''
      this.$emit('update:content', this.content)
    }
  }
}
</script>

<style>
.custom-comment .el-date-editor .el-range__close-icon {
  position: absolute;
  top: 0px;
  right: 0px;
}
.custom-comment .sidebar-item-box .el-date-editor.el-input,
.sidebar-item-box .el-date-editor.el-input__inner {
  width: 100%;
}
.comment .el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 100%;
}
</style>
