<template>
  <div>
    <el-form
      class="form"
      inline
      :model="form"
      ref="form"
      label-width="80px">
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="form.startDate"
          type="date"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束时间">
        <el-date-picker
          v-model="form.endDate"
          type="date"
          placeholder="选择日期时间">
        </el-date-picker>
      </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="sex"
          label="名称"
        >
        </el-table-column>
        <el-table-column
          prop="count"
          label="数量"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import sexOption from './sexOption'
import { customerSexStatistics } from '@/api/visitor'

export default {
  data () {
    return {
      sexOption,
      viewType: 'chart',
      tableData: [],
      form: {
        startDate: '',
        endDate: ''
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      customerSexStatistics(this.form).then(res => {
        this.tableData = res.data
        this.sexOption.series[0].data = res.data.map(item => {
          return {
            name: item.sex,
            value: item.count
          }
        })
        console.log('this.sexOption', this.sexOption)
      })
    }
  }
}
</script>

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

</style>
