<template>

  <div class="container">
    <div class="tab-box">
      <div class="f-box" v-for="(item,index) in tablist" :key="index" @click="activeindex=index" :class="{ 'active' :activeindex==index}">{{item.name}}</div>
    </div>
    <reconciliation-trading v-if="activeindex == '0' "></reconciliation-trading>
    <reconciliation-ref v-if="activeindex == '1' "></reconciliation-ref>
    <reconciliation-favourable v-if="activeindex == '2' "></reconciliation-favourable>
  </div>


<!--      <reconciliation-time v-if="radio1 == '按时间统计手续费' "></reconciliation-time>-->
<!--      <reconciliation-store v-if="radio1 == '按门店统计手续费' "></reconciliation-store>-->
</template>

<script>

import ReconciliationTrading from "@/views/financialStatement/reconciliation/tab/trading.vue";
import ReconciliationRef from "@/views/financialStatement/reconciliation/tab/ref.vue";
import ReconciliationTime from "@/views/financialStatement/reconciliation/tab/time.vue";
import ReconciliationStore from "@/views/financialStatement/reconciliation/tab/store.vue";
import ReconciliationFavourable from "@/views/financialStatement/reconciliation/tab/favourable.vue";
import Oilqiang from "@/views/oilConfig/oilGun/list.vue";
import OilPrice from "@/views/oilConfig/oilPrice/index.vue";
import OilTank from "@/views/oilConfig/oilTank/list.vue";

export default {
  name: "reconciliation-list",
  data(){
    return{
      radio1:'交易明细',
      activeindex:0,
      tablist:[
        {
          name:'交易明细',
        },
        {
          name:'退款明细',
        },
        {
          name:'优惠统计',
        },
      ]
    }
  },
  components:{
    OilTank, OilPrice, Oilqiang,
    ReconciliationFavourable,
    ReconciliationStore,
    ReconciliationTime,
    ReconciliationRef,
    ReconciliationTrading
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }

}
</script>

<style scoped lang="scss">
.app-center{
  width: 100%;

  box-sizing: border-box;
  padding: 10px;
}
.app-top{
  width: 100%;
  margin-bottom: 20px;
  height: 60px;
  box-sizing: border-box;

}
.tab-box{
  width: 100%;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  padding: 0px 50px;
}

.f-box{
  height: 40px;
  color: #999999;
  margin-right: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;

}
.active{
  color: #FF9655 !important;
  border-bottom: 2px solid #FF9655 !important;
}
.container{
  background: #F4F5F9;
  box-sizing: border-box;
  //padding: 20px;
}
.tabder-box{
  width: 85%;
}
</style>
