<template>
  <div>
    <!-- <el-form
      class="form"
      inline
      :model="form"
      ref="form"
      label-width="80px">
      <el-form-item
        label="开始时间"
        prop="startDate"
      >
        <el-date-picker
          v-model="form.startDate"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="结束时间"
        prop="endDate"
      >
        <el-date-picker
          default-time="23:59:59"
          v-model="form.endDate"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item
        label="景点选择"
        prop="keyWords4"
      >
        <el-select
          v-model="form.keyWords4"
          placeholder="请选择">
          <el-option
            value=""
            label="全部">
          </el-option>
          <el-option
            v-for="item in scenicList"
            :key="item.id"
            :value="item.id"
            :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="getData">
          查询
        </el-button>
      </el-form-item>
    </el-form> -->

    <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="sexOption"
        v-if="tableData && viewType==='chart'" />

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

<script>
import baseSexOption from './sexOption'

export default {

  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      viewType: 'chart'
    }
  },
  computed: {
    scenicList () {
      return this.$store.state.app.scenicList
    },
    sexOption () {
      const sexOption = JSON.parse(JSON.stringify(baseSexOption))
      sexOption.legend.data = this.tableData.map(item => item.gender)
      sexOption.series[0].data = this.tableData.map(item => {
        return {
          name: item.gender,
          value: item.count
        }
      })

      return sexOption
    }
  }
}
</script>

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

</style>
