<template>
  <div>
    <el-dialog class="search-word-top-dialog" :title="'置顶搜索词'" :visible.sync="isShow" @open="beforeDialogOpen">
      <el-form label-width="30%">
        <el-form-item label="置顶结束时间：">
          <el-date-picker v-model="stickTime" 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" v-loading="submitLoading" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import util from '@src/common/util.js'
export default {
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  props: {show: Boolean, ids: Array},
  data() {
    return {
      submitLoading: false,
      stickTime: '', //  置顶时间
      pickerOptions: {
        //  今天之前的日期不能点击
        disabledDate(time) {
          let timeSpace = time.getTime() < Date.now()
          return timeSpace
        }
      }
    }
  },
  methods: {
    beforeDialogOpen() {
      this.stickTime = ''
    },
    // 置顶搜索词提交事件
    async confirm() {
      this.submitLoading = true
      if (this.stickTime) {
        this.stickTime = util.formatDate(
          new Date(this.stickTime),
          'yyyy-MM-dd HH:mm:ss'
        )
      }
      try {
        let params = {ids: this.ids.join(), topTime: this.stickTime}
        let res = await axios.put('/ui/searchword/stick', params)
        this.submitLoading = false
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.$emit('update:show', false)
          this.$emit('callback')
        }
      } catch (e) {
        this.submitLoading = false
        util.showErrorMessageBox(e)
      }
    }
  }
}
</script>
<style>
.search-word-top-dialog .el-dialog{
  width:450px;
}
@media (max-width:480px){
  .search-word-top-dialog .el-dialog{
    width:96%;
  }
}
.search-word-top-dialog .stick-hint {
  text-align: center;
  line-height: 20px;
}
.search-word-top-dialog .el-form-item .el-input {
  width: 70%;
  margin-right: 5px;
}
</style>
