<template>
   <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>溯源管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/resultInfoList' }">溯源信息</el-breadcrumb-item>
            <el-breadcrumb-item>编辑</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="type-check">
         <el-button :type="cutBtn == '0'?'primary':'default'"  size="mini"  @click="cutBntCheck('0')">产品信息</el-button>
         <el-button :type="cutBtn == '2'?'primary':'default'" size="mini"  @click="cutBntCheck('2')">生长相册</el-button>
         <el-button :type="cutBtn == '3'?'primary':'default'" size="mini"  @click="cutBntCheck('3')">质检报告</el-button>
      </div>
      <div>
         <ProductInfo v-if="cutBtn == '0'" :backcode="backcode"></ProductInfo>
         <GrowRecord v-if="cutBtn == '2'" :backcode="backcode"></GrowRecord>
         <CqRePorts v-if="cutBtn == '3'" :backcode="backcode"></CqRePorts>
      </div>
   </div>
</template>

<script>
   import ProductInfo from './productInfo'
   import GrowRecord from './growRecord'
   import CqRePorts from './cqReports'
   export default {
      data(){
         return {
            backcode:this.$route.query.backcode,
            cutBtn:0,
         }
      },
      components: {
         ProductInfo,
         GrowRecord,
         CqRePorts,
      },
      mounted(){
      },
   
      methods:{
         cutBntCheck(num){
            this.cutBtn = num;
         },
      }
   }
</script>

<style lang='less' scoped>
.type-check{
    margin-bottom:10px;
}
</style>