<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <list-frame
          v-if="onShow == '1'"
          @toAdd="toAdd"
          @toEdit="toEdit"
        ></list-frame>
        <form-frame
          v-else-if="onShow == '2'"
          @toBack="toBack"
          :id="id"
        ></form-frame>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import listFrame from "./list-frame.vue";
import formFrame from "./form-frame.vue";
import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
export default {
  name: "index",
  props: {},
  components: {
    listFrame,
    formFrame,
  },
  data: function () {
    return {
      // 显示
      onShow: "1",
      id: "",
    };
  },
  async created() {},
  methods: {
    // 新增
    toAdd() {
      this.$set(this, `onShow`, "2");
    },
    // 修改
    toEdit(data) {
      this.$set(this, `id`, data._id);
      this.$set(this, `onShow`, "2");
    },
    // 返回
    toBack() {
      this.$set(this, `onShow`, "1");
    },
  },
  computed: {
    ...mapGetters(["user_id"]),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 25px 30px 30px;
}
</style>
