<template>
  <el-button :disabled="disabled" :priv="priv" @click.stop="sortClickHandler" :type="buttonType" :title="btnTitle"  class="el-button el-button--text">
    <i class="fa fa-arrow-up f16"></i>{{btnText}}
    <el-dialog :title="dialogTitle" :append-to-body="true" :visible.sync="isShowModal" class="sort-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>
  </el-button>
</template>
<script>
export default {
  props: {
    ID: {
      type: [String, Number],
      default: '',
      required: false
    },
    priv: {
      type: String,
      default: '',
      required: false
    },
    btnTitle: {
      type: String,
      default: '排序',
      required: false
    },
    btnText: {
      type: String,
      default: '',
      required: false
    },
    dialogTitle: {
      type: String,
      default: '排序',
      required: false
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    buttonType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShowModal: false,
      sortNumber: 1, //  移动位数
      submitLoading: false
    }
  },
  methods: {
    sortClickHandler() {
      this.isShowModal = true
      this.sortNumber = 1
      this.submitLoading = false
    },
    // 提交排序
    async confirm() {
      if (!this.sortNumber) {
        this.$alert('未移动顺序', '系统提示', {
          type: 'warning'
        })
        return
      }
      this.submitLoading = true
      await this.$emit('callback', {num: this.sortNumber, ID: this.ID})
    }
  }
}
</script>

<style scope>
.sort-catalog-dlg .sort-order-input {
  margin-left: 65px;
}
.sort-catalog-dlg .sort-order-input .el-input-number {
  margin: 0px 2px 0px 2px!important;
}
.sort-catalog-dlg .sort-input-hint{
  margin-top: 2px;
  margin-left: 53px;
}
.sort-catalog-dlg .sort-input-hint span{
  color: #FF6600;
}
</style>
<style>
.sort-catalog-dlg .el-dialog{
  width:400px;
}
@media (max-width:480px){
  .sort-catalog-dlg .el-dialog{
    width:96%;
  }
}
</style>
