<template>
  <div class="app-container">
    <el-tabs id="PurchasingCenter/PurchaseTaskAllocate" v-model="tabName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="投标保证金" name="投标保证金">
        <BidBond v-if="handle === '投标保证金'"/>
      </el-tab-pane>
      <el-tab-pane label="履约保证金" name="履约保证金">
        <PerformanceBond v-if="handle === '履约保证金'"/>
      </el-tab-pane>
      <el-tab-pane label="安全保证金" name="安全保证金">
        <SafetyMargin v-if="handle === '安全保证金'"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BidBond from '@/views/MarketingCenter/BidBond'
import PerformanceBond from '@/views/MarketingCenter/PerformanceBond'
import SafetyMargin from '@/views/MarketingCenter/SafetyMargin'
export default {
  components: {
    BidBond, PerformanceBond, SafetyMargin
  },
  data() {
    return {
      handle: '',
      tabName: '投标保证金'
    }
  },
  methods: {

    handleClick(tab) {
      this.handle = tab.name
    }
  }
}
</script>

<style scoped>

</style>
