
<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-form ref="queryForm" :model="listQuery" label-width="100px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="统计时间:">
							<el-date-picker
								v-model="listQuery.time"
								type="daterange"
								range-separator="-"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								@change="changeTime"
								placeholder="请选择统计时间"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="统计方式:" class="wayMsg">
							<span
								v-for="(item,index) in way"
								:key="index"
								:class="{active:isactive==item.label}"
								@click="changeWay(item)"
							>{{item.label}}</span>
						</el-form-item>
					</el-col>
					<el-col :span="5" style="float:right;text-align:right">
						<el-button class="filter-item" type="primary" v-waves @click="handleFilter">导出为Excel</el-button>
					</el-col>
				</el-row>
			</el-form>
			<el-table :data="list" border fit highlight-current-row v-loading="loading">
				<el-table-column align="center" label="时间">
					<template slot-scope="scope">
						<span>{{scope.row.timeSlot}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" :label="item.name" v-for="item in tableHead" :key="item.name">
					<template slot-scope="scope">
						<span v-for="(iitem, iindex) in scope.row.members" :key="iindex" v-if="iitem.level == item.level && item.type=='number'">{{iitem.number}}</span>
            <span v-for="(iitem, iindex) in scope.row.members" :key="iindex" v-if="iitem.level == item.level && item.type=='amount'">{{iitem.amount}}</span>
					</template>
				</el-table-column>
<!--				<el-table-column align="center" label="支付金额(普通会员)">-->
<!--					<template slot-scope="scope">-->
<!--						<span>{{scope.row.pAmount}}</span>-->
<!--					</template>-->
<!--				</el-table-column>-->
<!--				<el-table-column align="center" label="黄金会员购买量">-->
<!--					<template slot-scope="scope">-->
<!--						<span>{{scope.row.goldNumber}}</span>-->
<!--					</template>-->
<!--				</el-table-column>-->
<!--				<el-table-column align="center" label="支付金额(黄金会员)">-->
<!--					<template slot-scope="scope">-->
<!--						<span>{{scope.row.goldAmount}}</span>-->
<!--					</template>-->
<!--				</el-table-column>-->
<!--				<el-table-column align="center" label="钻石会员购买量">-->
<!--					<template slot-scope="scope">-->
<!--						<span>{{scope.row.hNumber}}</span>-->
<!--					</template>-->
<!--				</el-table-column>-->
<!--				<el-table-column align="center" label="支付金额(钻石会员)">-->
<!--					<template slot-scope="scope">-->
<!--						<span>{{scope.row.hAmount}}</span>-->
<!--					</template>-->
<!--				</el-table-column>-->
				<el-table-column align="center" label="总支付金额">
					<template slot-scope="scope">
						<span>{{scope.row.totalPayment}}</span>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="listQuery.page"
				:page-sizes="[10,20,30, 50]"
				:page-size="listQuery.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				style="margin-top:20px"
			></el-pagination>
		</div>
	</div>
</template>
<script type="javascript">
import { orderStatistics, downloadExcel } from 'api/order/rentVehicle'
import { memberLevels } from 'api/order/memeber'
export default {
	created() {
    this.getAllMemeberList() // 获取全部会员等级
	},
	data() {
		return {
			loading: false,
			total: null,
			list: [],
      tableHead:[], //动态表头
			scrollTop: '',
			// 统计时间筛选
			listQuery: {
				type: '1',
				startTime: null,
				endTime: null,
				time: '',
				limit: 10,
				page: 1
			},
			//统计方式筛选
			way: [
				{
					label: '日统计',
					id: '1'
				},
				{
					label: '周统计',
					id: '2'
				},
				{
					label: '月统计',
					id: '3'
				}
			],
			isactive: '日统计'
		}
	},
	methods: {
    /**
     * 获取全部会员列表
     */
    getAllMemeberList(){
      memberLevels().then(res => {
        let arr = []
        res.map(function(item){
          arr.push({
            name: item.name + '购买量',
            level: item.level,
            type: 'number'
          })
          arr.push({
            name: '支付金额(' + item.name + ")",
            level: item.level,
            type:'amount'
          })
        })
        this.tableHead = arr
        this.getList()
      })
    },
		//统计时间筛选
		changeTime() {
			!!this.listQuery.time[0]
				? (this.listQuery.startTime = this.listQuery.time[0].getTime())
				: (this.listQuery.startTime = null)
			!!this.listQuery.time[1]
				? (this.listQuery.endTime = this.listQuery.time[1].getTime())
				: (this.listQuery.endTime = null)
			this.listQuery.page = 1
			this.getList()
		},
		//统计方式筛选
		changeWay(val) {
			this.isactive = val.label
			this.listQuery.type = val.id
			this.listQuery.page = 1
			this.getList()
		},
		//导出
		handleFilter() {
			downloadExcel(this.listQuery).then(res => {
				const content = res
				const blob = new Blob([content])
				const fileName = '导出信息.xlsx'
				if ('download' in document.createElement('a')) {
					// 非IE下载
					const elink = document.createElement('a')
					elink.download = fileName
					elink.style.display = 'none'
					elink.href = URL.createObjectURL(blob)
					document.body.appendChild(elink)
					elink.click()
					URL.revokeObjectURL(elink.href) // 释放URL 对象
					document.body.removeChild(elink)
				} else {
					// IE10+下载
					navigator.msSaveBlob(blob, fileName)
				}
			})
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getList()
		},
    // 数组去重
    repeat(json){
      try{
        let newJson = [];
        for(var i = 0;i < json.length; i++){
          let flag = true;
          for(var j = 0; j < newJson.length; j++){
            if(newJson[j].tname == json[i].tname) {
              flag = false;
            }
          }
          if(flag){ //判断是否重复
            newJson.push(json[i]);
          }
        }
        return newJson
      } catch(err){
        console.log(err)
      }
    },
		//列表
		getList() {
      let _this = this
			let params = {}
			this.loading = true
      let tableHead = this.tableHead
			orderStatistics(this.listQuery).then(data => {
				if (data.status == 200) {

          // tableHead.map(function(item){
          //   data.data.list.forEach(element => {
          //     let listArr = []
          //     element.members.map(function(iitem){
          //       // if(item.level == iitem.level){
          //           listArr.push({level: iitem.level, tnumber: iitem.number, tamount: iitem.amount})
          //       // }
          //     })
          //     element.listArr = listArr
          //   })
          // })
          // debugger
					// data.data.list.forEach(element => {
          //   tableHead.map(function(item){
          //     let p = {tname: item.name, tvalue: 0}
          //     element.members.map(function(iitem){
          //       if(item.level == iitem.level){
          //         p = {tname: item.name, tvalue: item.type == 'number'?iitem.number : iitem.amount}
          //       }
          //     })
          //     listArr.push(p)
          //   })
          //   element.listArr = _this.repeat(listArr)
					// })


					this.total = data.data.total
          // console.log(listArr)
          console.log(data.data.list)
					this.list = data.data.list
          // this.listArr = listArr
				}
				setTimeout(() => {
					this.loading = false
				}, 300)
				document.documentElement.scrollTop = 0
			})
		}
	}
}
</script>
<style>
.wayMsg span {
	margin: 10px;
	cursor: pointer;
}
.active {
	color: #409eff;
	font-weight: bold;
}
</style>
