<template>
  <div class="sjp-reportdata">
      <div>
        <div class="sjp-tips">
          <p>明：数据更新至今日，10分钟延迟</p>
          <p>活动影响人数/人次：进入商圈首页的人数/人次</p>
          <p>参与人数/人次：进入周周赢免单活动页的人数/人次</p>
          <p>感兴趣人数/人次：进入奖品详情页的人数/人次</p>
        </div>
        <Form ref="formInline" :model="formInline" inline :label-width="80">
          <FormItem  class="sjp-inlineblock" label="类型">
             <Radio-group :model.sync="formInline.belong" type="button">
                  <Radio value="月报表"></Radio>
                  <Radio value="日报表"></Radio>
              </Radio-group>
          </FormItem>
          <br>
           <FormItem  class="sjp-inlineblock" label="商圈">
             <Select v-model="formInline.sources" style="width:200px">
                <Option v-for="item in sourceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <!-- <FormItem :label-width="20">
              <Button type="primary" class="sjp-search sjp-button" @click="handleSubmit">搜索</Button>
              <Button type="default" class="sjp-button" @click="reset">重置</Button>
              <Button type="primary" class="sjp-button" style="margin-left: 30px;" @click="reset">导出</Button>
          </FormItem> -->
      </Form>
      </div>
      <div class="order-table">
         <Table class="sjp-table" stripe :columns="columns" :data="list"></Table>
      </div>
  </div>
</template>

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

export default {
  name: 'reportdata',
  components: { position  },
  props:[],
  data() {
    return {
      total: 100,
      columns: [
          {
              title: '时间',
              key: 'regionName',
              width: 200,
              align: 'center'
          },
          {
              title: '活跃用户',
              key: 'sources',
              width: 200,
              align: 'center'
          },
          {
              title: '新用户',
              key: 'effectNumber',
              width: 200,
              align: 'center'
          },
          {
              title: '新用户%',
              key: 'effectTime',
              width: 200,
              align: 'center'
          },
          {
              title: '留存用户',
              key: 'participationNumber',
              width: 200,
              align: 'center'
          },
          {
              title: '留存用户%',
              key: 'participationTime',
              width: 200,
              align: 'center'
          },
          {
              title: '累计k币',
              key: 'interestNumber',
              width: 200,
              align: 'center'
          },
          {
              title: '累计k币%',
              key: 'interestTime',
              width: 200,
              align: 'center'
          },
          {
              title: '停车',
              key: 'signUpNumber',
              width: 200,
              align: 'center'
          },
          {
              title: '停车%',
              key: 'signUpTime',
              width: 200,
              align: 'center'
          },
          {
              title: '买劵',
              key: 'winningNumber',
              width: 200,
              align: 'center'
          },
           {
              title: '买劵%',
              key: 'winningTime',
              width: 200,
              align: 'center'
          },
           {
              title: '支付',
              key: 'verificationNumber',
              width: 200,
              align: 'center'
          },
           {
              title: '支付%',
              key: 'verificationTime',
              width: 200,
              align: 'center'
          },
          {
              title: '电影票',
              key: 'verificationTime',
              width: 200,
              align: 'center'
          },
          {
              title: '电影票%',
              key: 'verificationTime',
              width: 200,
              align: 'center'
          },
          {
              title: '物业缴费',
              key: 'verificationTime',
              width: 200,
              align: 'center'
          },
          {
              title: '物业缴费%',
              key: 'verificationTime',
              width: 200,
              align: 'center'
          },
          {
              title: '总用户量',
              key: 'verificationTime',
              width: 200,
              align: 'center'
          },
          {
              title: '历史累计k币',
              key: 'verificationTime',
              width: 200,
              align: 'center'
          },
          {
              title: '流失1-2月用户',
              key: 'verificationTime',
              width: 200,
              align: 'center'
          },
          {
              title: '流失2月+用户',
              key: 'verificationTime',
              width: 200,
              align: 'center'
          },
      ],
      list: [],
      timeRange:[],
      formInline:{
        sources:'',
        belongProvince:'',
        belongCity:'',
        belongRegion:'',
        startTime:'',
        endTime:'',
      },
      sourceList: [
          {
              value: '',
              label: '全部'
          },
          {
              value: '1',
              label: '停车码'
          },
          {
              value: '2',
              label: '线下码F5层'
          },
          {
              value: '3',
              label: '线下码B1层'
          },
           {
              value: '4',
              label: '微信朋友圈'
          },
          {
              value: '5',
              label: '其他'
          },
          {
              value: '6',
              label: '台卡'
          }
      ],
      // sourceObj:{}
    }
  },
  created() {
    // this.sourceList.forEach((item)=>{
    //   item.value && (this.sourceObj[item.value] = item.label)
    // })
    this.getData()
  },
  methods:{
    handleSubmit(){
      this.getData()
    },
    reset(){
      // 重置对象
      this.timeRange = [],
      this.formInline = {
        sources:'',
        belongProvince:'',
        belongCity:'',
        belongRegion:'',
        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]) || ''
      let params = Object.assign(this.formInline)
      if(params.sources === ''){params.sources = null}
      http.statisticOverlord(this.formInline)
      .then(res => {
        this.list = res.data || []
      })
    }
  },
  mounted(){
   
  }
}
</script>

<style lang="less" scoped>
.sjp-inlineblock .ivu-form-item-content{
    display: inline-block;
  }
  .sjp-reportdata{
    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-table{
        width: calc(100vw - 200px)
      }
    }
    .sjp-page{
      margin: 20px;
    }
  }
 
</style>
