<template>
  <div style="height:100%">
    <el-container>
        <!-- <el-header>{{ row.productName }}</el-header> -->
        <el-main>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane v-for="item in menu" :key='item.path' :label="item.label" :name="item.path"></el-tab-pane>
          </el-tabs>
          <component :is='activeName' :row="row" :productId="row.id"></component>
        </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  components: {
    ProductMessage:() => import('./productMessage.vue'),
    RelatedPatents:()=> import("../relatedPatents/components/relatedPatents.vue"),
    // MarketingData:()=> import('../marketingData.vue'),
    charts:()=> import('./charts.vue'),
    Framework:()=> import('../framework/framework.vue')
  },
  props: {
    row:{
      default:()=>{
        return {}
      }
    }
  },
  data() {
    return {
      menu:[
        {
          label:'基本信息',
          value:'1',
          path:'ProductMessage'
        },
        {
          label:'商品化专利',
          value:'2',
          path:'RelatedPatents'
        },
        {
          label:'营销数据',
          value:'3',
          path:'charts'
        },
        {
          label:'产品架构',
          value:'4',
          path:'Framework'
        },
      ],
      activeName:'ProductMessage',
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
  },
  methods: {
    handleClick(tab){

    }
  },
};
</script>
<style lang="scss" scoped>
</style>