<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="自定义参数" name="attribute">
        <div class="tabs-body">
          <attribute-view
            v-if="activeName === 'attribute'"
            ref="attributeref"
            @handleClick="attributeEvent"
            :sourceId="sourceId"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="分组" name="group">
        <div class="tabs-body">
          <group-view
            v-if="activeName === 'group'"
            ref="groupref"
            @handleClick="groupEvent"
            :sourceId="sourceId"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import attributeView from "./attributeView";
import groupView from "./groupView";
// this.$store.state.tagsView.visitedViews
// this.$store.dispatch("Login", this.loginForm)
export default {
  components: { attributeView, groupView },
  props: {
    groupList: {
      type: String,
      default: "[]",
    },
    arttributeList: {
      type: String,
      default: "[]",
    },
    sourceId: {
      type: String,
      default: "",
    },
  },
  name: "attribute",
  created() {
    // 处理数据
    this.handleInitData();
  },
  data() {
    return {
      activeName: "attribute",
    };
  },
  methods: {
    attributeEvent(data) {
      switch (data.type) {
        case "add":
          // 执行add
          this.$emit("handleEvent", {
            type: data.type,
            title: "新增参数",
            component: "attributeForm",
            paramIdx: null,
          });
          break;

        case "update":
          this.$emit("handleEvent", {
            type: data.type,
            title: "修改参数",
            component: "attributeForm",
            paramIdx: data.idx,
          });
          break;

        case "list":
          this.$refs.attributeref.getList();
          break;

        case "param":
          this.$emit("handleEvent", {
            type: data.type,
            title: "物模型参数",
            component: "paramsJson",
            paramIdx: null,
          });
          break;
      }
    },
    groupEvent(data) {
      switch (data.type) {
        case "add":
          // 执行add
          this.$emit("handleEvent", {
            type: data.type,
            title: "新增分组",
            component: "groupForm",
            paramIdx: null,
          });
          break;

        case "update":
          this.$emit("handleEvent", {
            type: data.type,
            title: "修改分组",
            component: "groupForm",
            paramIdx: data.idx,
          });
          break;

        case "list":
          this.$refs.groupref.getList();
          break;
      }
    },
    forceUpdate(component) {
      if (component === "groupForm") {
        this.$refs.groupref.getList();
      } else if (component === "attributeForm") {
        this.$refs.attributeref.getList();
      }
    },
    handleInitData() {
      try {
        this.$store.dispatch("InitAttributeAndGroup", {
          attrList: JSON.parse(this.arttributeList),
          groupList: JSON.parse(this.groupList),
        });
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
