<template>
  <el-dialog title="置顶" :visible.sync="myShowSetTopFlag" size="tiny" class="pop-dialog">
    <el-form ref="setTopContentForm" label-width="130px">
      <el-form-item label="置顶有效期限：">
        <el-date-picker v-model="setTopTime" type="datetime" placeholder="选择置顶有效期限"></el-date-picker>
      </el-form-item>
      <div class="stick-hint">在此期限之前处于置顶状态，过期则自动取消置顶，不填则不限制置顶天数。</div>
    </el-form>
    <div slot="footer">
      <el-button @click="myShowSetTopFlag = false">取 消</el-button>
      <el-button type="primary" @click="confirmSetTopClick" :loading="handlerLoading">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: ['contentID', 'topTime', 'showSetTopFlag'],
  data() {
    return {
      setTopTime: '',
      handlerLoading: false
    }
  },
  computed: {
    myShowSetTopFlag: {
      get() {
        return this.showSetTopFlag
      },
      set(val) {
        this.$emit('update:showSetTopFlag', val)
      }
    }
  },
  created() {
    this.setTopTime = this.topTime ? this.topTime : new Date(Date.now)
  },
  methods: {
    async confirmSetTopClick() {
      this.handlerLoading = true
      if (!this.contentID) {
        this.$alert('参数错误')
        return
      }

      if (this.setTopTime && this.setTopTime !== '') {
        if (this.setTopTime.getTime() <= new Date().getTime()) {
          util.showError('置顶结束时间必须大于当前时间')
          this.handlerLoading = false
          return
        }
        this.setTopTime = util.formatDate(this.setTopTime, 'yyyy-MM-dd HH:mm:ss')
      }

      let resp = await axios.put(`/ui/contentcore/contents/${this.contentID}/settop`, {'topDate': this.setTopTime})
      util.showResponseMessage(resp.data)
      this.handlerLoading = false
      this.myShowSetTopFlag = false
      this.$emit('refreshlist', this.contentID)
    }
  }
}
</script>
