<template>
  <div>
    <div>
      <el-radio-group
        style="float:right"
        size="mini"
        v-model="viewType">
        <el-tooltip
          content="图表视图"
          placement="top"
          effect="dark">
          <el-radio-button label="chart">
            <i class="el-icon-s-data"></i>
          </el-radio-button>
        </el-tooltip>
        <el-tooltip
          content="表格视图"
          placement="top"
          effect="dark">
          <el-radio-button label="table">
            <i class="el-icon-tickets"></i>
          </el-radio-button>
        </el-tooltip>
      </el-radio-group>

      <v-chart
        :options="areaOption"
        v-if="tableData && viewType==='chart'" />

      <el-table
        v-else
        :data="tableData"
        border
        stripe>
        <el-table-column
          prop="name"
          label="名称"
        >
        </el-table-column>
        <el-table-column
          prop="value"
          label="数量"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import baseAreaOption from './areaOption'

export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      viewType: 'chart'
    }
  },
  computed: {
    scenicList () {
      return this.$store.state.app.scenicList
    },
    areaOption () {
      const areaOption = JSON.parse(JSON.stringify(baseAreaOption))
      areaOption.legend.data = this.tableData.map(item => item.province)

      areaOption.series[0].data = this.tableData.map(item => {
        return {
          name: item.province,
          value: item.count
        }
      })

      return areaOption
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  text-align: center;
}
.echarts {
  margin: 0 auto;
}

</style>
