<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="客户信息" name="health">
      <div
        v-loading="healthDataLoading"
        :style="{ height: getTabContentHeight(), overflow: 'auto' }"
      >
        <HealthyView
          dev
          :data="healthyDataType === 0 ? healthyData : {}"
          v-show="healthyDataType === 0"
        />
        <BodySignView
          dev
          :data="healthyDataType === 1 ? healthyData : {}"
          v-show="healthyDataType === 1"
        />
      </div>
    </el-tab-pane>
    <el-tab-pane label="食谱计划" name="plan">
      <div :style="{ height: getTabContentHeight(), overflow: 'auto' }">
        <RecipesPlan />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
import HealthyView from "@/components/HealthyView";
import BodySignView from "@/components/BodySignView";
import RecipesPlan from "./recipesPlan";
const { mapActions, mapState, mapMutations, mapGetters } =
  createNamespacedHelpers("message");
export default {
  name: "SignUserInfo",
  components: {
    HealthyView,
    BodySignView,
    RecipesPlan,
  },
  data() {
    return {
      activeName: "health",
    };
  },
  methods: {
    getTabContentHeight() {
      const tabPanelElm = document.querySelector(".el-tabs");
      if (tabPanelElm) {
        return `${tabPanelElm.clientHeight - 68}px`;
      }
      return "";
    },
  },
  computed: {
    ...mapState(["healthyData", "healthyDataType", "healthDataLoading"]),
  },
};
</script>
<style lang="scss" scoped>
</style>