<template>
  <div>
    <el-form
      class="form"
      inline
      :model="form"
      ref="form"
      label-width="100px">
      <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 label="统计方式">
        <el-select v-model="form.keyWords1">
          <el-option
            label="全部"
            value="">
          </el-option>
          <el-option
            label="省份"
            value="province">
          </el-option>
          <el-option
            label="城市"
            value="city">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="省份">
        <el-select v-model="form.keyWords3">
          <el-option
            label="全部"
            value="">
          </el-option>
          <el-option
            v-for="item in provinceList"
            :key="item"
            :value="item"
            :label="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="数据显示数量">
        <el-input-number v-model="form.keyWords2"></el-input-number>
      </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="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 areaOption from './areaOption'
import { customerOriginStatistics, getProvinceList } from '@/api/visitor'

export default {
  data () {
    return {
      areaOption,
      viewType: 'chart',
      tableData: [],
      provinceList: [],
      form: {
        startDate: '',
        endDate: '',
        keyWords1: '',
        keyWords2: 10
      }
    }
  },
  created () {
    this.getData()
    this.getProvinceList()
  },
  methods: {
    getData () {
      customerOriginStatistics(this.form).then(res => {
        this.tableData = res.data
        console.log('this.tableData', this.tableData)
        this.areaOption.legend.data = res.data.map(item => item.name)
        this.areaOption.series[0].data = res.data.map(item => {
          return {
            name: item.name,
            value: item.value
          }
        })
      })
    },
    getProvinceList () {
      getProvinceList().then(res => {
        this.provinceList = res.extraInfo
      })
    }
  }
}
</script>

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

</style>
