<template lang="pug">
  <div class='m_i_dialog'>
    <el-dialog  width="400px" :close-on-click-modal='false' :visible.sync='visible' append-to-body :before-close='handleClose'>
      .title-bold(slot='title') {{title}}预置点
      <el-form :model='dataForm'  ref='dataForm' :rules="dataRule" :inline='true'  label-width="100px">
        <el-form-item label='资源名称:'>
          <el-input v-model='dataForm.resourceName' disabled></el-input>
        </el-form-item>
        <el-form-item label='资源编号:'>
          <el-input v-model='dataForm.code' disabled></el-input>
        </el-form-item>
        <el-form-item label='预置点名称:' prop='name'>
          <el-input v-model='dataForm.name' maxlength="20" clearable></el-input>
        </el-form-item>
        <el-form-item label='预置点编号:' prop='orderNum'>
          <el-input v-model.number='dataForm.orderNum' maxlength="20" placeholder='请填写1-99之间的数字' clearable></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot='footer'>
        <el-button type="primary" @click='cancel'>取消</el-button>
        <el-button type="primary" @click='saveClick' v-prevent-re-click>保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ])
  },
  data () {
    return {
      visible: false,
      dataForm: {
        name: '',
        orderNum: '',
        resourceId: '',
        resourceName: '',
        code: '',
        id: ''
      },
      title: '新增',
      stationId: localStorage.getItem('stationId'),
      disabled: true,
      dataRule: {
        name: [
          { required: true, message: '请输入预置点名称', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '请输入预置点编号', trigger: 'blur' },
          { min: 1, max: 99, type: 'number', message: '请输入1到99之间的数字', trigger: 'blur' }
        ]
      }
    }
  },
  created() {

  },
  methods: {
    init (map, res) {
      this.visible = true
      this.dataForm.resourceName = map.name
      this.dataForm.resourceId = map.id
      this.dataForm.code = map.code
      if (res) {
        this.title = '编辑'
        this.dataForm.name = res.name
        this.dataForm.orderNum = res.orderNum
        this.dataForm.id = res.id
      } else {
        this.title = '新增'
        this.dataForm.name = ''
        this.dataForm.orderNum = ''
        this.dataForm.id = ''
      }
    },
    saveClick() {
      if (this.dataForm.name == '') {
        this.$message.warning('请输入预置点名称')
        return false
      }
      if (this.dataForm.orderNum > 99 || this.dataForm.orderNum < 1) {
        this.$message.warning('预置点编号只能是小于99大于1的数字')
        return false
      }
      let url = this.$http.adornUrl('/sysPreset/save')
      if (this.title == '编辑') {
        url = this.$http.adornUrl('/sysPreset/update')
      }
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: url,
            method: 'post',
            data: {
              id: this.dataForm.id,
              stationId: this.stationId,
              resourceId: this.dataForm.resourceId,
              orderNum: this.dataForm.orderNum,
              name: this.dataForm.name
            }
          }).then(data => {
            if (data && data.code === 0) {
                this.$emit('closeQ')
                this.visible = false
            }
          })
        }
      })
    },
    handleClose() {
      this.$refs.dataForm.resetFields()
      this.visible = false
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', `${this.title}预置点`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.handleClose()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    }
  }
}
</script>
<style>

</style>