<template>
  <div class="big">
    <el-row>
      <el-col :span="12">
         
         <el-row :gutter="20" class="shadow p20" >
            <el-col :span="8" class="nopad"  v-for="(item, index) in toolCards" :key="index"
            @click.native="toTarget(item.name)">
              <el-card shadow="hover" class="grid-content nopad" >
                <i :class="item.icon" :style="{ color: item.color }"></i>
                <p>{{ item.label }}</p>
              </el-card>
            </el-col>
          </el-row>
      </el-col>

      <el-col :span="12">
         <el-row :gutter="20" class="shadow p20" >
            <el-col :span="6" class="nopad">
              <el-card shadow="hover" class="grid-content nopad">
                <p>￥{{(lygFee.fee)/100}}</p>
                <p>灵用工交易费</p>
              </el-card>
            </el-col>

            <el-col :span="6" class="nopad">
              <el-card shadow="hover" class="grid-content nopad">
                <p>{{lygFee.count}}</p>
                <p>单子数</p>
              </el-card>
            </el-col>

            <el-col :span="6" class="nopad">
              <el-card shadow="hover" class="grid-content nopad">
                <p>￥{{getFeeService(lygFee)}}</p>
                <p>服务费</p>
              </el-card>
            </el-col>

            <el-col :span="6" class="nopad">
              <el-card shadow="hover" class="grid-content nopad">
                <p>￥{{getFeeTax(lygFee)}}</p>
                <p>税费</p>
              </el-card>
            </el-col>


            <el-col :span="6" class="nopad">
              <el-card shadow="hover" class="grid-content nopad">
                <p>￥{{(b2bFee.fee)/100}}</p>
                <p>B2B交易费</p>
              </el-card>
            </el-col>
            <el-col :span="6" class="nopad">
              <el-card shadow="hover" class="grid-content nopad">
                <p>{{b2bFee.count}}</p>
                <p>单子数</p>
              </el-card>
            </el-col>

            <el-col :span="6" class="nopad">
              <el-card shadow="hover" class="grid-content nopad">
                <p>￥{{getFeeService(b2bFee)}}</p>
                <p>服务费</p>
              </el-card>
            </el-col>

            <el-col :span="6" class="nopad">
              <el-card shadow="hover" class="grid-content nopad">
                <p>￥{{getFeeTax(b2bFee)}}</p>
                <p>税费</p>
              </el-card>
            </el-col>

          </el-row>
      </el-col>


      <el-col :span="24">
        
        <el-card>
          <h2 class="p20">快速审核</h2>
          <lyg-list :data="lygList" />
        </el-card>
      </el-col>

      <el-col :span="24">
        
        <el-card>
          <h2 class="p20">B2B审核</h2>
          <B2BList :data="b2bList" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LygList from "./component/lyg/lyglist";
import B2BList from "./component/b2b/b2blist";
import config from './config'
import {getHome} from '@/api/account'
export default {
  name: "Dashboard",
  data() {
    return {
      toolCards: config.links,
      lygFee:{},
      b2bFee:{},
      lygList:[],
      b2bList:[],
    };
  },
  components: {LygList, B2BList},
  methods: {
    getFeeTax( fee ){
      return (fee.ttFee+fee.ctFee+fee.mtFee)/100
    },
    getFeeService( fee ){
      return (fee.tsFee+fee.csFee+fee.msFee)/100
    },
    toTarget(name) {
      this.$router.push({ name });
    },
    getTableData(){
      getHome({}).then( res=>{
        if(res.code == 200){
          this.lygFee =res.data.lygFee||[];
          this.b2bFee =res.data.b2bFee||[];
          this.lygList =res.data.lygList||[];
          this.b2bList =res.data.b2bList||[];
        }
      })
    }
  },
  created() {
    this.getTableData();
  },
};
</script>

<style lang="scss" scoped>
.big {
  margin: 100px auto;
  padding:20px;
  padding-top: 0;
  background-color: rgb(243, 243, 243);
  padding-top: 15px;
  .top {
    width: 100%;
    height: 360px;
    margin-top: 20px;
    overflow: hidden;
    .chart-container {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 20px;
      background-color: #fff;
    }
  }
  .mid {
    width: 100%;
    height: 380px;
    .chart-wrapper {
      height: 340px;
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
}
.nopad{
    padding: 0px !important;
    height: 100px;
}
</style>
