<template>
  <div class="zhaobiao">
    <div class="header">
      <div class="header-tab">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="招标项目分析" name="first"></el-tab-pane>
          <el-tab-pane label="招标项目明细" name="second"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <Zbxmfx v-if="activeName === 'first'" :customer-id="id" :combineName="name"></Zbxmfx>
    <Zbxmmx v-if="activeName === 'second'" :customer-id="id" :combineName="name"></Zbxmmx>
  </div>
</template>

<script>
  import Zbxmfx from './zbxmfx'
  import Zbxmmx from './zbxmmx'
  export default {
    name: 'qualifications',
    props: ['customerId','combineName'],
    components:{Zbxmfx,Zbxmmx},
    data(){
      return{
        activeName: 'first',
        id:this.customerId,
        name:this.combineName
      }
    },
    watch:{
      // customerId: {
      //   handler(newVal, olVal) {
      //     if (newVal) {
      //       this.id=newVal;
      //     }
      //   },
      //   deep: true, // 深度监听
      // },
      combineName: {
        handler(newVal, olVal) {
          if (newVal) {
            this.name=newVal;
          }
        },
        deep: true, // 深度监听
      },
    },
    created() {

    },
    methods: {
      handleClick(key) {
        if(key === 'second'){
          this.activeName=key
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .zhaobiao{
    /*height: 100%;*/
    background: #F5F5F5;
    .header{
      justify-content: space-between;
      background: #F5F5F5;
      color: #232323;
      height: 64px;
      position: sticky;
      top: 0;
      z-index: 999;
      .header-tab{
        background: #ffffff;
        border-radius: 4px;
      }
      ::v-deep .el-tabs{
        height: 48px;
        line-height: 48px;
        .el-tabs__nav-wrap::after {
          position: static !important;
        }
        .el-tabs__header{
          margin: 0;
          .el-tabs__item{
            padding: 0 16px;
            font-size: 16px;
          }
          .is-active{
            font-weight: bold;
          }
        }
        .el-tabs__content{
          width: 100%;
        }
      }
    }
  }
</style>
