<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="100px">
      <div class="block-title">
        查询条件
      </div>
      <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>

      <div class="btn-wrap">
        <el-button
          @click="reset">
          重置
        </el-button>
        <el-button
          :disabled="loading"
          type="primary"
          @click="getList">
          搜索
        </el-button>
      </div>
    </el-form>

    <div
      class="table-box"
      v-loading="loading"
      style="width:100%">
      <!-- <div class="block-title">
        统计信息
      </div> -->

      <v-chart
        autoresize
        style="width:100%"
        :options="options"
      />
    </div>
  </div>
</template>

<script>
import { getGroupIndividual } from '@/api/queryReport'
import moment from 'moment'
import options from './groupIndividualOption'

export default {
  computed: {
    salesList () {
      return this.$store.state.user.salesList
    },
    saleChannel () {
      return this.$store.state.app.saleChannel
    }
  },
  data () {
    return {
      options,
      totalData: null,
      form: {
        startDate: new Date(moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')),
        endDate: new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'))
      },
      tableData: null,
      loading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    getList () {
      this.loading = true
      getGroupIndividual(this.form).then(res => {
        this.options.series[0].data = res.data.map(item => {
          return {
            name: item.groupIndividual,
            value: item.checkNum
          }
        })
      }).finally(() => {
        this.loading = false
      })
    }
  },
  watch: {
    tableData (res) {

    }
  }
}
</script>

<style scoped lang="scss">
.total-data{
  text-align: center; line-height: 3;
  span{
    margin: 0 15px
  }
  b{
    font-size: 1.4em
  }
}
</style>
