<template>
  <el-dialog v-dialogDrag width="45%" title="新增库房" :close-on-click-modal="false" :before-close="cancel"
    :visible.sync="diaFlage">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="库房名称：" prop="storeName">
        <el-input v-model="form.storeName" style="width:70%" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item label="区：" prop="qu">
        <el-input-number style="width:70%" size="mini"  step-strictly v-model="form.qu" controls-position="right" :min="1">
        </el-input-number>
      </el-form-item>
      <el-form-item label="列：" prop="lie">
        <el-input-number style="width:70%" size="mini" step-strictly v-model="form.lie" controls-position="right" :min="1">
        </el-input-number>
      </el-form-item>
      <el-form-item label="面：" prop="mian">
        <el-input-number disabled size="mini" style="width:70%" step-strictly v-model="form.mian" controls-position="right"
          :min="1">
        </el-input-number>
      </el-form-item>
      <el-form-item label="节：" prop="jie">
        <el-input-number style="width:70%" size="mini" step-strictly v-model="form.jie" controls-position="right" :min="1">
        </el-input-number>
      </el-form-item>
      <el-form-item label="层：" prop="ceng">
        <el-input-number style="width:70%" size="mini" step-strictly v-model="form.ceng" controls-position="right" :min="1">
        </el-input-number>
      </el-form-item>
      <el-form-item label="ip：" prop="ip">
        <el-input v-model="form.ip" style="width:70%" size="mini" clearable></el-input>

      </el-form-item>
      <el-form-item label="  ">
        <el-button @click="submit('ruleForm')" size="mini" type="primary">保存</el-button>
        <el-button @click="cancel" size="mini" type="info">取消</el-button>
      </el-form-item>

    </el-form>

  </el-dialog>
</template>
<script>
  export default {
    props: {
      diaFlage: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        rules: {
          storeName: [{
            required: true,
            message: '请输入库房名称',
            trigger: 'blur'
          }],
          qu: [{
            required: true,
            message: '请输入区',
            trigger: 'blur'
          }],
          lie: [{
            required: true,
            message: '请输入列',
            trigger: 'blur'
          }],
          mian: [{
            required: true,
            message: '请输入面',
            trigger: 'blur'
          }],
          jie: [{
            required: true,
            message: '请输入节',
            trigger: 'blur'
          }],
          ceng: [{
            required: true,
            message: '请输入层',
            trigger: 'blur'
          }]
        },
        form: {
          storeName: "",
          qu: undefined,
          lie: undefined,
          mian: 2,
          jie: undefined,
          ceng: undefined,
          ip: ""
        },
      }
    },
    methods: {
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              ip: this.form.ip,
              level: 1,
              num: 1,
              type: '库',
              storeName: this.form.storeName,
              child: {
                level: 2,
                num: this.form.qu,
                type: '区',
                child: {
                  level: 3,
                  num: this.form.lie,
                  type: '列',
                  child: {
                    level: 4,
                    num: this.form.mian,
                    type: '面',
                    child: {
                      level: 5,
                      num: this.form.jie,
                      type: '节',
                      child: {
                        level: 6,
                        num: this.form.ceng,
                        type: '层'
                      }
                    }
                  }
                }
              }
            }
            this.$store.dispatch('roomSet/batchSave', data).then(res => {
              this.$emit('getTree')
              this.cancel()
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.$refs.ruleForm.resetFields()
        this.$emit('cancel')
      }
    }
  }

</script>
<style lang='scss' scoped>
  ::v-deep .el-form .el-form-item .el-input__inner {
    text-align: left;
  }

</style>
