<template>
  <div class="app-center">
    <div class="app-top">
    <el-card :body-style="{ padding: '0px' }">
      <div class="box">
        <div class="nbox" :class="pointerClass" @click="updateRedio('会员分析')">
          <div class="fount-box" :style="{ color: radio1 === '会员分析' ? '#FF770F' : '#999999' }">会员分析</div>
          <div class="heng-box" v-if="radio1 == '会员分析'"></div>
          <div class="heng-box" style="background-color: #FFFFFF" v-else></div>

        </div>
        <div class="nbox"  :class="pointerClass" @click="updateRedio('油品分析')">
          <div class="fount-box" :style="{ color: radio1 === '油品分析' ? '#FF770F' : '#999999' }">油品分析</div>
          <div class="heng-box" v-if="radio1 == '油品分析'"></div>
          <div class="heng-box" style="background-color: #FFFFFF" v-else></div>
        </div>
          <div class="nbox" :class="pointerClass"  @click="updateRedio('便利店分析')">
          <div class="fount-box" :style="{ color: radio1 === '便利店订单' ? '#FF770F' : '#999999' }">便利店分析</div>
          <div class="heng-box" v-if="radio1 == '便利店分析'"></div>
          <div class="heng-box" style="background-color: #FFFFFF" v-else></div>

        </div>
        <div class="nbox" :class="pointerClass"  @click="updateRedio('积分商城分析')">
          <div class="fount-box" :style="{ color: radio1 === '积分商城分析' ? '#FF770F' : '#999999' }">积分商城分析</div>
          <div class="heng-box" v-if="radio1 == '积分商城分析'"></div>
          <div class="heng-box" style="background-color: #FFFFFF" v-else></div>
        </div>
<!--        <div class="nbox" :class="pointerClass" @click="updateRedio('支付方式分析')">-->
<!--          <div class="fount-box" :style="{ color: radio1 === '支付方式分析' ? '#FF770F' : '#999999' }">支付方式分析</div>-->
<!--          <div class="heng-box" v-if="radio1 == '支付方式分析'"></div>-->
<!--          <div class="heng-box" style="background-color: #FFFFFF" v-else></div>-->

<!--        </div>-->
<!--        <div class="nbox"  :class="pointerClass" @click="updateRedio('支付通道分析')">-->
<!--          <div class="fount-box" :style="{ color: radio1 === '支付通道分析' ? '#FF770F' : '#999999' }">支付通道分析</div>-->
<!--          <div class="heng-box" v-if="radio1 == '支付通道分析'"></div>-->
<!--          <div class="heng-box" style="background-color: #FFFFFF" v-else></div>-->
<!--        </div>-->
      </div>
    </el-card>


    </div>
    <template >
      <yunyingfenxi-vip v-if="radio1 === '会员分析'"></yunyingfenxi-vip>
      <yunyingfenxi-oil v-if="radio1 === '油品分析'"></yunyingfenxi-oil>
      <yunyingfenxi-store v-if="radio1 === '便利店分析'"></yunyingfenxi-store>
      <yunyingfenxi-int v-if="radio1 === '积分商城分析'"></yunyingfenxi-int>
      <dai_yunyingfenxi-pay-type v-if="radio1 === '支付方式分析'"></dai_yunyingfenxi-pay-type>
      <dai_yunyingfenxi-paym v-if="radio1 === '支付通道分析'"></dai_yunyingfenxi-paym>
    </template>

  </div>
</template>

<script>

import yunyingfenxiVip from "@/views/financialStatement/yunyingfenxi/tab/vip.vue";
import yunyingfenxiInt from "@/views/financialStatement/yunyingfenxi/tab/int.vue";
import yunyingfenxiOil from "@/views/financialStatement/yunyingfenxi/tab/oil.vue";
import yunyingfenxiStore from "@/views/financialStatement/yunyingfenxi/tab/store.vue";
import Dai_yunyingfenxiPaym from "@/views/financialStatement/dai_yunyingfenxi/tab/paym.vue";
import Dai_yunyingfenxiPayType from "@/views/financialStatement/dai_yunyingfenxi/tab/paytype.vue";

export default {
  name: "yunyingfenxi-list1",
  data(){
    return{
      radio1:'会员分析',
      pointerClass() {
        return 'pointer-cursor';
      }
    }
  },
  components:{
    Dai_yunyingfenxiPayType, Dai_yunyingfenxiPaym,
    yunyingfenxiInt,
    yunyingfenxiVip,
    yunyingfenxiOil,
    yunyingfenxiStore,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    updateRedio(data) {
      console.log(this.radio1)
      this.radio1 = data
    }

  }

}
</script>

<style scoped>
.app-center{
  width: 100%;
  box-sizing: border-box;
  //padding: 10px;
}
.app-top{
  width: 100%;
  //margin-bottom: 20px;
  //height: 60px;
  box-sizing: border-box;

}
.el-card__body, .el-main {
  padding: 0px;
}
.box{
  cursor: pointer;
  margin-top: 10px ;
  margin-left: 50px;
  //height: 40px;
  display: flex;
background-color: #FFFFFF;
  align-items: center;
  //border: 1px solid #EBEEF5;
}
.nbox{
  margin-right: 30px;
}
.fount-box{
  font-size: 14px;
  color: #999999
}
.fount-box2{
  font-size: 14px;
  color: #999999
}
.heng-box{
  background-color: #FF770F;
  width: 100%;
  height: 2px;
  margin-top: 10px;
}

</style>
