<template>
  <div class="chart-page">
    <section
      class="chart-section"
      style="width: 35%; margin-right: 10px;">
      <el-card
        class="chart-card">
        <div slot="header">
          <span>票型销售统计</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 300px;">
          <Chart1/>
        </div>
      </el-card>
      <el-card
        class="chart-card">
        <div slot="header">
          <span>销售分时数据</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 550px;">
          <Chart2/>
        </div>
      </el-card>
    </section>
    <section
      class="chart-section"
      style="width: calc(65% - 10px); flex-grow: 1;">
      <el-card
        class="chart-card">
        <div slot="header">
          <span>昨日概况</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 140px;">
          <div class="colorful-block">
            <div
              class="block-item"
              v-for="(item, index) in blockList"
              :key="index"
              :class="{active: activeIndex === index}"
              @click="activeIndex = index">
              <p class="title">{{ item.title }}</p>
              <p class="value">{{ item.value }}</p>
              <p class="diff">
                <i class="el-icon-caret-top"></i>
                {{ item.diff }}
              </p>
            </div>
          </div>
        </div>
      </el-card>
      <el-card
        class="chart-card">
        <div slot="header">
          <span>订单统计</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 300px;">
          <Chart4/>
        </div>
      </el-card>
      <el-card
        class="chart-card">
        <div slot="header">
          <span>退单分析</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 358px;">
          <Chart5/>
        </div>
      </el-card>
    </section>
    <section
      class="chart-section"
      style="width: 100%;">
      <el-card
        class="chart-card"
      >
        <div slot="header">
          <span>销售走势</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 300px;">
          <Chart6/>
        </div>
      </el-card>
    </section>
  </div>
</template>
<script>
import './chartAnalysis.scss'
import Chart1 from './salesAnalysisCharts/chart1.vue'
import Chart2 from './salesAnalysisCharts/chart2.vue'
import Chart4 from './salesAnalysisCharts/chart4.vue'
import Chart5 from './salesAnalysisCharts/chart5.vue'
import Chart6 from './salesAnalysisCharts/chart6.vue'
export default {
  name: 'SalesAnalysisCharts',
  components: {
    Chart1,
    Chart2,
    Chart4,
    Chart5,
    Chart6
  },
  data () {
    return {
      blockList: [
        {
          title: '实收金额',
          value: '52387元',
          diff: '1.2%'
        }, {
          title: '当天售票量',
          value: '2387张',
          diff: '1.2%'
        }, {
          title: '当天退票量',
          value: '87张',
          diff: '1.2%'
        }, {
          title: '当天退票比例',
          value: '1%',
          diff: '1.2%'
        }
      ],
      activeIndex: 0
    }
  }

}
</script>
<style lang="scss">
.colorful-block {
  padding: 20px;
  width: 100%;
  height: 150px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .block-item {
    width: 23%;
    height: 100%;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
    padding: 10px 0;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    p {
      margin: 0;
      height: 30px;
      line-height: 30px;
    }
    .title {
      color: #999;
    }
    .value {
      font-size: 18px;
    }
    .diff {
      color: #FE645F;
    }
    &.active {
      background-color: #FE645F;
      color: #fff;
      .title {
        color: #fff;
      }
      .diff {
        color: #fff;
      }
    }
  }
}
</style>
