<template>
  <div>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="上级：">
        <el-input disabled v-model="form.fatherName" style="width:80%" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item label="名称：" prop="storeName">
        <el-input :disabled='!btnType' v-model="form.storeName" style="width:80%" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item label="ip：">
        <el-input :disabled='!btnType' v-model="form.ip" style="width:80%" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item label="  ">
        <el-button :disabled="JSON.stringify(treeRow)==='{}'" @click="add" v-if="!btnType&&showButtons.add" size="mini" type="success">
          新增</el-button>
        <el-button :disabled="JSON.stringify(treeRow)==='{}'" @click="editor" v-if="!btnType&&showButtons.edit" size="mini"
          type="primary">修改</el-button>
        <el-button :disabled="JSON.stringify(treeRow)==='{}'" @click="del" v-if="!btnType&&showButtons.del" size="mini" type="danger">
          删除</el-button>
        <el-button @click="submit('ruleForm')" v-show="btnType" size="mini" type="primary">保存</el-button>
        <el-button @click="cancel" v-show="btnType" size="mini" type="info">取消</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>
<script>
  import {
    clearObjValue,
    message
  } from '@/utils/common'
  export default {
    props: {
      treeRow: {
        type: Object,
        default: () => {},
      },
      treeNode: {
        type: Object,
        default: () => {},
      },
      showButtons: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        btnType: false,
        form: {
          fatherName: "",
          id: "",
          ip: "",
          storeName: "",
          // wholeName: "",
        },
        pName: "",
        title: "",
        rules: {
          storeName: [{
            required: true,
            message: '请输入库房名称',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      add() {
        this.btnType = true
        this.form.storeName = ""
        this.form.ip = ""
        this.form.fatherName = this.treeRow.storeName
        this.title = '新增'
      },
      editor() {
        this.btnType = true
        this.title = '修改'
      },
      del() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: this.treeRow.id
          }
          this.$store.dispatch('roomSet/batchDelete', data).then(res => {
            this.$emit('getTree')
            clearObjValue(this.form)
            this.$emit('cancels')
          })
        }).catch(() => {});
      },
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              fatherName: this.form.fatherName,
              storeName: this.form.storeName,
              ip: this.form.ip,
            }
            if (this.title === '新增') {
              data.pId = this.form.id
              this.$store.dispatch('roomSet/batchAdd', data).then(res => {
                clearObjValue(this.form)
                this.btnType = false
                this.$emit('getTree')
              })
            } else {
              data.pId = this.treeNode.data.pId
              data.id = this.form.id
              this.$store.dispatch('roomSet/batchUpdate', data).then(res => {
                clearObjValue(this.form)
                this.btnType = false
                this.$emit('getTree')
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.btnType = false
        this.$emit('handleNodeClick', this.treeRow, this.treeNode)
      }
    }
  }

</script>
