<!--author: gengchao-->
<template>
  <div class="container-fluid" style="font-family: 'Helvetica Neue'">
		<el-row type="flex"  justify="center">
      <el-col>
        <el-col  v-for="(item, index) in homeDetail" :key="index" :span='collength' >
					<homeDetail :VALUE='item.value' :NAME='item.name' :UNITF='item.unit'  :INDEX='index'></homeDetail>
				</el-col>
      </el-col>
		</el-row>
    <el-collapse v-model="activeName">
      <el-collapse-item name="1">
        <template slot="title" >
          近两周扫码情况
        </template>
        <div>
          <VeLine :data="chartData" :toolbox="toolbox" height='350px'></VeLine>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<style>
</style>
<script>
  import homeDetail from './homeDetail.vue'
  import 'echarts/lib/component/toolbox'
  import VeLine from 'v-charts/lib/line'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'

  export default {
    data () {
      return {
        homeDetail: [
          {
            value: '77',
            name: '扫码笔数',
            unit: ''
          },
          {
            value: '770.00',
            name: '扫码金额',
            unit: '元'
          },
          {
            value: '0',
            name: '兑换笔数',
            unit: ''
          },
          {
            value: '0',
            name: '兑换积分',
            unit: ''
          }
        ],
        activeName: '1'
      }
    },
    methods: {

    },
    created () {
      this.chartData = {
        columns: ['日期', '销售量'],
        rows: [
          { '日期': '1月1日', '销售量': 123 },
          { '日期': '1月2日', '销售量': 1223 },
          { '日期': '1月3日', '销售量': 2123 },
          { '日期': '1月4日', '销售量': 4123 },
          { '日期': '1月5日', '销售量': 3123 },
          { '日期': '1月6日', '销售量': 7123 }
        ]
      }
      // this.typeArr = ['line', 'histogram', 'pie']
      // this.index = 0
      // this.chartSettings = { type: this.typeArr[this.index] }
      this.toolbox = {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {
            pixelRatio: 2
          }
        }
      }
    },
    components: {
      homeDetail, VeLine
    },
    computed: {
      collength: function () {
        return 24 / (this.homeDetail.length)
      }
    }
  }
</script>
<style scoped>
.el-collapse {
    border: none;
    border-radius: 0;
    padding: 10px;
}
</style>

