<template>
  <el-button :disabled="!content.ID" @click="setUp" :type="buttonType" :priv="'com.zving.cms.Catalog.Content.SetTop.'+catalogId">
    <span v-if="this.content.topFlag===0||this.content.topFlag===''">
      <i class="fa fa-arrow-up" style="margin-right:5px;"></i><span>置顶</span>
    </span>
    <span v-if="this.content.topFlag!=0&&this.content.topFlag!=''">
      <i class="fa fa-arrow-down" style="margin-right:5px;"></i><span>取消置顶</span>
    </span>
   <el-dialog title="置顶" :visible.sync="show" :append-to-body="true" 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="show = false">取 消</el-button>
      <el-button type="primary" @click="setTop" :loading="loading">确 定</el-button>
    </div>
   </el-dialog>
  </el-button>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    content: {
      type: Object
    },
    buttonType: {
      type: String,
      default: ''
    },
    catalogId: {
      type: [Number, String]
    }
  },
  data() {
    return {
      show: false,
      setTopTime: '',
      loading: false
    }
  },
  methods: {
    setUp() {
      if (this.content.topFlag === 0 || this.content.topFlag === '') {
        this.show = true
      } else {
        this.cancelTop()
      }
    },
    async setTop() {
      this.loading = true
      if (!this.content.ID) {
        this.$alert('参数错误')
        return
      }

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

      let resp = await axios.put(`/ui/contentcore/contents/${this.content.ID}/settop`, {'topDate': this.setTopTime, 'catalogID': this.catalogId})
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.content.topFlag = this.content.orderFlag
        this.refreshList(this.content.ID)
        this.show = false
      }
      this.loading = false
    },
    async cancelTop() {
      let resp = await axios.put(`/ui/contentcore/contents/${this.content.ID}/canceltop`, {'catalogID': this.catalogId})
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.content.topFlag = ''
        this.refreshList(this.content.ID)
      }
    },
    refreshList(id) {
      this.$emit('refresh-content', id)
    }
  }
}
</script>
