<template>
  <div class="sjp-orderdata">
      <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="时间筛选">
            <DatePicker type="datetimerange" v-model="timeRange" placeholder="选择开始时间和结束时间" style="width: 300px"></DatePicker>
          </FormItem>
           <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>
          <br>
           <position :positionObj="formInline" label="所在地" width="200"></position>
          <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>
              <Button type="primary" class="sjp-button" @click="exportData" style="margin-left: 30px;" >导出</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: 'orderdata',
  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: '感兴趣人数',
              key: 'interestNumber',
              width: 200,
              align: 'center'
          },
          {
              title: '感兴趣人次',
              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'
          },
      ],
      list: [],
      timeRange:[],
      formInline:{
        sources:'',
        belongProvince:'',
        belongCity:'',
        belongRegion:'',
        startTime:'',
        endTime:'',
      },
      sourceList: [
          {
              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()
    },
    exportData(){
      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)
      let strArr = []
      for(let key in params){
        if(params[key]){
          strArr.push(key + '=' + params[key])
        }
      }
      window.location.href = process.env.VUE_APP_DOWNLOAD + "/statistic/overlord/export?" + strArr.join('&')
    },
    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-orderdata{
    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 - 350px)
      }
    }
    .sjp-page{
      margin: 20px;
    }
  }
 
</style>
