<template>
  <div class="index-box">
    <total />
    <el-row>
      <el-col :span="12">
        <div style="height: 500px;">
          <pie01 />
        </div>
      </el-col>
      <el-col :span="12">
        <div style="height: 500px;">
          <ShippingChannel />
        </div>
      </el-col>
    </el-row>

    <div class="index-row">
      <div class="bottom-box">
        <ShopSale />
      </div>
      <div class="bottom-box">
        <OrderSaleByYear />
        <!-- <bar01 /> -->
      </div>
      <div class="bottom-box">
        <OrderSourceByYear />
        <!-- <line01 /> -->
      </div>
    </div>

    <el-row>
      <el-col :span="12">
        <div style="height: 500px;">
          <OrderChannel />
        </div>
      </el-col>
      <el-col :span="12">
        <div style="height: 500px;">
          <BusinessSale />
        </div>
      </el-col>
    </el-row>
    <!-- <div class="index-row">
      <div class="top-box"></div>
      <div class="top-box">
        <OrderChannel />
      </div>
      <div class="top-box">

        <BusinessSale />
      </div>
      <div class="top-box"></div>
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import total from './components/total.vue'
import pie01 from './components/pie01.vue'
import rose from './components/rose.vue'
import pie02 from './components/pie02.vue'
import bar01 from './components/bar01.vue'
import Line01 from './components/line01.vue'

import OrderChannel from './components/orderChannel.vue'
import BusinessSale from './components/businessSale.vue'
import ShippingChannel from './components/shippingChannel.vue'
import ShopSale from './components/shopSale.vue'
import OrderSaleByYear from './components/orderSaleByYear.vue'
import OrderSourceByYear from './components/orderSourceByYear.vue'

@Component({ components: { total, pie01, rose, pie02, bar01, Line01, OrderChannel, BusinessSale, ShippingChannel, ShopSale, OrderSaleByYear, OrderSourceByYear } })
export default class IndexView extends Vue {

  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.index-box {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;

  .index-row {
    height: 50%;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    box-sizing: border-box;

    .top-box {
      width: 33.33333%;
      height: 100%;
      box-sizing: border-box;
      padding-right: 8px;
    }

    .top-box:last-child {
      padding: 0;
    }

    .bottom-box {
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding-right: 8px
    }

    .bottom-box:last-child {
      padding: 0;
    }
  }

  .index-row:first-child {
    padding-bottom: 8px;
  }

  .index-row:last-child {
    padding-top: 8px;
  }
}
</style>