/**
* @Author Sean
* @Date 2019/5/8
*/
<template>
  <h-view class="public-style" style="height: 100%">
    <h-content class="">
      <list-item :item-height="45">
        <item :show-arrow="true" v-for="(list,index) in basicChartList"
              :key="index" @click.native="goDetail(list.tab)">
          <img slot="left-icon" :src="list.chartIconUrl" class="left-icon">
          <div slot="name">{{list.chartName}}</div>
        </item>
      </list-item>
    </h-content>
  </h-view>
</template>

<script>
  export default {
    data() {
      return {
        basicChartList: [
          {
            "chartIconUrl": require('../../../../assets/report/LineChart.png'),
            "chartName": "折线图",
            "tab": "LineChart"
          },
          {
            "chartIconUrl": require('../../../../assets/report/PointChart.png'),
            "chartName": "散点图",
            "tab": "PointChart"
          },
          {
            "chartIconUrl": require('../../../../assets/report/NoodlesChart.png'),
            "chartName": "条形图",
            "tab": "NoodlesChart"
          },
          {
            "chartIconUrl": require('../../../../assets/report/ColumnChart.png'),
            "chartName": "柱形图",
            "tab": "ColumnChart"
          },
          {
            "chartIconUrl": require('../../../../assets/report/AreaChart.png'),
            "chartName": "面积图",
            "tab": "AreaChart"
          },
          {
            "chartIconUrl": require('../../../../assets/report/BreadChart.png'),
            "chartName": "饼图",
            "tab": "BreadChart"
          }
        ]
      }
    },
    created: function () {
    },
    mounted: function () {
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
      goDetail(tab) {
        this.$router.push({
          name: tab,
        })
      }
    }
  }
</script>

<style scoped lang="less" rel="stylesheet">
  .public-style {
    .content {
      img{
        width: 25%;
      }
    }
  }
</style>
