<template>
  <div>
    <el-dialog :title="title" :visible.sync="isShow" class="content-top-dlg" @open="beforeDialogOpen">
      <el-form label-width="30%" style="height:93px;">
        <el-form-item label="置顶结束时间：">
          <el-date-picker v-model="topDate" type="datetime" placeholder="选择置顶时间" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <div class="stick-hint">在此期限之前搜索词处于置顶状态，过期自动取消置顶，不填则不限制置顶时间。</div>
      </el-form>
      <div slot="footer">
        <el-button @click="isShow= false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="comfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import util from '@src/common/util.js'
export default {
  props: ['show', 'title', 'catalogId', 'selectIds'],
  data() {
    return {
      topDate: '', //  置顶日期
      submitLoading: false,
      pickerOptions: {
        //  今天之前的日期不能点击
        disabledDate(time) {
          let timeSpace = time.getTime() < Date.now()
          return timeSpace
        }
      }
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    beforeDialogOpen() {
      this.topDate = ''
    },
    async comfirm() {
      if (this.topDate) {
        this.topDate = util.formatDate(
          new Date(this.topDate),
          'yyyy-MM-dd HH:mm:ss'
        )
      }
      let opts = { ids: this.selectIds, topDate: this.topDate }
      this.submitLoading = true
      try {
        let res = await axios.put(
          `/ui/dimesion/${this.catalogId}/content/settop`,
          opts
        )
        this.submitLoading = false
        util.showMessage(res)
        if (res.data.status === 1) {
          this.$emit('update:show', false)
          this.$emit('callback')
        }
      } catch (e) {
        this.submitLoading = false
        util.showErrorNotification(e)
      }
    }
  }
}
</script>
<style scoped>
.stick-hint {
  margin-left: 18px;
  text-align: center;
  line-height: 20px;
  margin-bottom: -20px;
}
</style>
<style>
.content-top-dlg .el-dialog{
  width:450px;
}
@media (max-width:480px){
  .content-top-dlg .el-dialog{
    width:96%;
  }
}
</style>
