<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>

      <el-form-item
        label="会员类型"
        prop="keyWords1">
        <el-select
          v-model="form.keyWords1"
          placeholder="请选择">
          <el-option
            value=""
            label="全部"></el-option>
          <el-option
            v-for="item in memberTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="检票类型"
        prop="keyWords2">
        <el-select v-model="form.keyWords2">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="指纹"
            value="finger"
          ></el-option>
          <el-option
            label="人脸"
            value="face"
          ></el-option>
          <el-option
            label="IC卡"
            value="iccard"
          ></el-option>
          <el-option
            label="身份证"
            value="idcard"
          ></el-option>
        </el-select>
      </el-form-item>

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

    <v-chart
      ref="chart"
      :options="percentOption"
      :style="{height:chartHeight}"
      style="width:100%" />
  </div>
</template>

<script>
import { getMemberType, getMemberVisitsPercentStatistics } from '@/api/member'
import percentOption from './percentOption'

export default {
  data () {
    return {
      percentOption: {},
      loading: false,
      memberTypeList: [],
      chartHeight: 300,
      form: {
        startDate: '', // 检票开始时间
        endDate: '', // 检票截止时间
        keyWords1: '', // 会员类型ID
        keyWords2: '' // 检票类型
      }
    }
  },
  async created () {
    await this.getMemberTypeList()
    this.search()
  },
  mounted () {
    this.handleResize()
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    getMemberTypeList () {
      return getMemberType({
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        this.memberTypeList = res.list
      })
    },
    search () {
      getMemberVisitsPercentStatistics(this.form).then(res => {
        percentOption.legend.data = res?.data.map(i => i.name)

        percentOption.series[0].data = res?.data.map(item => {
          return {
            name: item.name,
            value: item.count
          }
        })

        this.percentOption = percentOption
      })
    },
    handleResize () {
      let wrap = document.querySelector('.app-main').getBoundingClientRect()
      let form = this.$refs.form.$el.getBoundingClientRect()
      this.chartHeight = wrap.height - 80 - form.height + 'px'

      this.$nextTick(() => {
        this.$refs.chart.resize()
      })
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="scss" scoped>

</style>
