<template>
  <div>
    <el-dialog title="站点排序" :visible.sync="isShow" @open="dialogOpen" class="site-sort-dialog">
      <el-form :model="sort" ref="sortForm" :rules="sortRules" class="form-inline" label-width="38%">
        <el-form-item prop="value" label="移动">
          <el-input-number v-model="sort.value" size="mini"></el-input-number>&nbsp;位
          <!-- <el-input v-model="sort.value" auto-complete="off" style="width:50%;"></el-input>&nbsp;位 -->
        </el-form-item>
      </el-form>
      <div style="text-align:center;">
        <b>正数</b>表示向
        <b style="color:#FF6600;">上</b>移动，
        <b>负数</b>表示向
        <b style="color:#FF6600;">下</b>移动
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      sort: {},
      sortRules: {
        value: [
          { required: true, message: '不能为空', trigger: 'blur,change' },
          {
            pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/,
            message: '只能是整数',
            trigger: 'blur,change'
          }
        ]
      }
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val, this.$refs['sortForm'])
      }
    }
  },
  methods: {
    dialogOpen() {
      this.sort = {
        value: 1
      }
    },
    async confirm() {
      try {
        await util.validateForm(this.$refs['sortForm'])
      } catch (e) {
        util.showErrorMessage(e)
        return
      }
      let res = await axios.put(`/ui/sites/${this.siteID}/sortsite`, {
        move: this.sort.value,
        parentID: this.parentID
      })
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.$emit('callback')
        this.isShow = false
      }
    }
  },
  props: {
    show: {
      type: Boolean,
      required: true
    },
    siteID: {
      type: [String, Number]
    },
    parentID: {
      type: [String, Number]
    }
  }
}
</script>

<style>
  .site-sort-dialog .el-dialog {
    width: 450px;
  }
  .site-sort-dialog .el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase{
    line-height:26px;
  }
  .site-sort-dialog .el-form-item.is-required .el-input>.el-input__inner{
    padding:0 35px !important;
  }
  @media (max-width: 480px) {
    .site-sort-dialog .el-dialog {
      width: 90%;
    }
  }
</style>
