<template>
  <ele-modal :visible.sync="visible" title="货位管理" width="60%" @close="cancel">


    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="层数" prop="levelNum">
            <el-input v-model="form.levelNum" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="列数" prop="lineNum">
            <el-input v-model="form.lineNum" />
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="长" prop="vehicleLen">
            <el-input v-model="form.vehicleLen">
              <template slot="append">mm</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="宽" prop="wilde">
            <el-input v-model="form.wilde">
              <template slot="append">mm</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="高" prop="hight">
            <el-input v-model="form.hight">
              <template slot="append">mm</template>
            </el-input>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item>
            <el-button size="small" type="primary" @click="handleHjCode">生成货位</el-button>
          </el-form-item>

        </el-col>
      </el-row>
    </el-form>





    <div slot="footer" class="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>


    <!-- 规则货架编号 -->
    <el-dialog title="规则货架编号" append-to-body :visible.sync="hjCodeFalg" width="20%">
      <el-form :model="hjForm">
        <el-form-item label="规则类型" label-width="100px">
          <el-radio-group v-model="hjForm.type">
            <el-radio :label="1">字母</el-radio>
            <el-radio :label="2">字母+数字</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="规则名称定义" label-width="100px">
          <el-input v-model="hjForm.code" @input="handleInput"></el-input>
          <span style="color: #dab8b8">注：只可输入大写A-Z</span>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="hjCodeFalg = false">取 消</el-button>
        <el-button @click="handleMine" type="primary">确 定</el-button>
      </span>
    </el-dialog>


  </ele-modal>
</template>
  
<script>

export default {

  data() {
    return {
      visible: false,

      form: {
        levelNum: null,
        lineNum: null,


      },

      hjCodeFalg: false,

      hjForm: { code: '', type: 1 },

      rules: {
        levelNum: [
          { required: true, message: '请输入层数', trigger: 'blur' }
        ],
        lineNum: [
          { required: true, message: '请输入列数', trigger: 'blur' }
        ],
      }
    };
  },
  created() {

  },
  computed: {




  },
  methods: {
    open() {
      this.visible = true;
    },
    cancel() {
      this.visible = false;

    },

    handleHjCode() {

      this.$refs.form.validate((valid) => {
        if (valid) {
          this.hjCodeFalg = true;
        }
      })


    },

    handleMine() {
      let preCode = 0;
      let codeEng = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let currentLetterIndex = 0;
    },

    save() {

    }




  }
};
</script>
  
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 20px !important;
}
</style>
  