<template>
  <el-dialog title="栏目排序" @open="dialogOpen" :visible.sync="isShowModal" class="sort-dimension-catalog-dlg">
    <div class="sort-order-input">移动<el-input-number v-model="sortNumber"></el-input-number>位</div>
    <div class="sort-input-hint">填正数表示向<span>上</span>移动，负数表示向<span>下</span>移动</div>
    <div slot="footer">
      <el-button @click="isShowModal = false">取 消</el-button>
      <el-button type="primary" v-loading="submitLoading" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    catalogId: {
      type: Number,
      default: 0,
      required: true
    },
    dimensionId: {
      type: Number,
      default: 0,
      required: true
    },
    show: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      sortNumber: 1, //  移动位数
      submitLoading: false
    }
  },
  computed: {
    isShowModal: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    dialogOpen() {
      this.sortNumber = 1
      this.submitLoading = false
    },
    // 提交排序
    async confirm() {
      if (!this.sortNumber) {
        this.$alert('栏目未移动顺序', '系统提示', {
          type: 'warning'
        })
        return
      }
      this.submitLoading = true
      let params = { catalogID: this.catalogId, move: this.sortNumber }
      try {
        let res = await axios.put(`/ui/dimesion/${this.dimensionId}/catalog/sort`, params)
        this.submitLoading = false
        util.showMessage(res)
        if (res.data.status === 1) {
          this.isShowModal = false
          this.$emit('callback')
        }
      } catch (e) {
        this.submitLoading = false
        // util.showErrorNotification(e)
      }
    }
  }
}
</script>
<style scope>
.sort-dimension-catalog-dlg .sort-order-input {
  margin-left: 65px;
}
.sort-dimension-catalog-dlg .sort-order-input .el-input-number {
  margin: 0px 2px 0px 2px!important;
}
.sort-dimension-catalog-dlg .sort-input-hint{
  margin-top: 2px;
  margin-left: 53px;
}
.sort-dimension-catalog-dlg .sort-input-hint span{
  color: #FF6600;
}
</style>
<style>
.sort-dimension-catalog-dlg .el-dialog{
  width:400px;
}
@media (max-width:480px){
  .sort-dimension-catalog-dlg .el-dialog{
    width:96%;
  }
}
</style>
