<template>
  <div class="main">
    <el-tabs default-active-key="1">
      <el-tab-pane key="1" label="实验设置">
        <el-input class="my-input" placeholder="请输入实验名称" v-model="inputData"></el-input>
        <el-button type="primary" @click="handleClick" class="button">保存</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  props: {
    data: {
      type: String,
      require: true,
      default: ""
    }
  },
  data() {
    return {
      inputData: this.data
    };
  },
  watch: {
    data: {
      handler(newVal) {
        this.inputData = newVal;
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleClick() {
      if (["", null, undefined].includes(this.inputData)) {
        Message.error("名称不能为空");
        this.inputData = this.data;
        return;
      }
      this.$emit("update:data", this.inputData);
      Message.success("保存成功");
    }
  }
};
</script>
<style scope>
.main {
  background: #fff;
  padding: 10px;
  width: 100%;
  height: 100%;
}
.my-input {
  margin: 40px 0;
}
.button {
  display: block;
  margin: 0 auto;
}
</style>
