<template>
  <div class="sjp-authdata">
      <div>
        <div class="sjp-tips">
          <p>明：数据更新至今日，10分钟延迟</p>
          <p>已授权人数：进入该商圈的，周周赢免单奖品详情页的人数，用户第一次进入时已经完成授权</p>
          <p>未授权人数：进入该商圈的，周周赢免单奖品详情页的人数，用户第一次进入时未完成授权</p>
          <p>完成授权人数：在该时间段内，完成授权的人数</p>
          <p>注，当用户从未授权变为完成授权后，再进入同一商圈页面，该用户依然计为完成授权人数</p>
        </div>
        <Form ref="formInline" :model="formInline" inline :label-width="80">
          <FormItem  class="sjp-inlineblock" label="时间筛选">
            <DatePicker type="datetimerange" v-model="timeRange" placeholder="选择开始时间和结束时间" style="width: 300px"></DatePicker>
          </FormItem>
          <br>
          <FormItem :label-width="20">
              <Button type="primary" class="sjp-search sjp-button" @click="handleSubmit">搜索</Button>
              <Button type="default" class="sjp-button" @click="reset">重置</Button>
          </FormItem>
      </Form>
      </div>
      <div class="order-table">
         <Table stripe :columns="columns" :data="list"></Table>
      </div>
  </div>
</template>

<script>
import http from './../../service/statics'
import Utils from './../../utils/utils'

export default {
  name: 'authdata',
  components: {   },
  props:[],
  data() {
    return {
      total: 100,
      columns: [
          {
              title: '所属商圈',
              key: 'regionName'
          },
          {
              title: '已授权人数',
              key: 'hasAuthorizedNumber'
          },
          {
              title: '未授权人数',
              key: 'unAuthorizedNumber'
          },
          {
              title: '完成授权人数',
              key: 'finishAuthorizedNumber'
          }
      ],
      list: [],
      timeRange:[],
      formInline:{
        startTime:'',
        endTime:'',
      },
    }
  },
  created() {
    this.getData()
  },
  methods:{
    handleSubmit(){
      this.getData()
    },
    reset(){
      // 重置对象
      this.timeRange = [],
      this.formInline = {
        startTime:'',
        endTime:'',
      }
      this.getData()
    },
    getData(){
      this.formInline.endTime = this.timeRange[1] && Utils.dealTime(this.timeRange[1]) || ''
      this.formInline.startTime = this.timeRange[0] && Utils.dealTime(this.timeRange[0]) || ''
      http.statisticAuthorization(this.formInline)
      .then(res => {
        this.list = res.data || []
      })
    }
  },
  mounted(){
   
  }
}
</script>

<style lang="less" scoped>
.sjp-inlineblock .ivu-form-item-content{
    display: inline-block;
  }
  .sjp-authdata{
    margin-top: 20px;
    .sjp-tips{
      margin-left:20px;
      line-height: 25px;
      margin-bottom: 5px;
    }
    .sjp-search{
      margin-right: 20px;
    }
    .sjp-button{
      padding-left: 40px;
      padding-right: 40px;
    }
    .order-table{
      margin: 20px;
    }
    .sjp-page{
      margin: 20px;
    }
  }
 
</style>
