<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container" ref="filter-container">
			<el-form ref="queryForm" :model="listQuery" label-width="100px">
				<el-row>
					<el-col :span="5">
						<el-form-item label="订单号">
							<el-input v-model="listQuery.orderNo" type="text" placeholder="请输入订单号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="手机号">
							<el-input v-model="listQuery.phone" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="用户姓名">
							<el-input v-model="listQuery.name" placeholder="请输入用户姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="订单状态">
							<el-select class="filter-item" v-model="listQuery.state" placeholder="请选择订单状态">
								<el-option :key="null" label="全部" :value="null"></el-option>
								<el-option :key="2" label="取消" :value="2"></el-option>
								<el-option :key="3" label="待付款" :value="3"></el-option>
								<el-option :key="6" label="已完成" :value="6"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="创建时间">
							<el-date-picker
								v-model="createTime"
								type="daterange"
								@change="changeCreate"
								placeholder="选择日期范围">
							</el-date-picker>
							<!-- <el-date-picker v-model="createTime" type="datetimerange" placeholder="选择时间范围" @change="changeCreate"></el-date-picker> -->
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="支付时间">
							<!-- <el-date-picker v-model="aplyTime" type="datetimerange" placeholder="选择支付时间范围" @change="changePay"></el-date-picker> -->
							<el-date-picker
								v-model="aplyTime"
								type="daterange"
								@change="changeCreate"
								placeholder="选择支付时间范围">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="上级手机号">
							<el-input v-model="listQuery.leaderPhone" placeholder="请输入上级手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="促成人手机号">
							<el-input v-model="listQuery.facilitatePhone" placeholder="请输入促成人手机号"></el-input>
						</el-form-item>
					</el-col>
					<!-- 	<el-col>
						<el-form-item label="时间">
							<el-date-picker v-model="listQuery.startTime" type = "date" placeholder = "请输入开始时间"></el-date-picker>
							<span>——</span>
							<el-date-picker v-model="listQuery.endTime" type = "date" placeholder = "请输入结束时间"></el-date-picker>
						</el-form-item>
					</el-col>-->
					<el-col :span="5">
						<el-form-item label="会员类型">
							<el-select class="filter-item" v-model="listQuery.level" placeholder="请选择会员类型">
								<el-option :key="null" label="全部" :value="undefined"></el-option>
								<el-option :key="1" label="普通会员" :value="1"></el-option>
								<el-option :key="2" label="黄金会员" :value="2"></el-option>
								<el-option :key="3" label="钻石会员" :value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<p class="num-title">数据统计</p>
			<el-card class="box-card" style="margin-bottom:20px;">
				<ul>
					<li>
						<p>{{statistics.orderNum|| '0'}}</p>
						<p>订单总数(单)</p>
					</li>
					<li>
						<p>{{statistics.totalAmount|| '0'}}</p>
						<p>支付总额(元)</p>
					</li>
					<li>
						<p>{{statistics.diamondOrderNum|| '0'}}</p>
						<p>钻石订单</p>
					</li>
					<li>
						<p>{{statistics.totalDiamondAmount|| '0'}}</p>
						<p>钻石支付总额(元)</p>
					</li>
					<li>
						<p>{{statistics.goldOrderNum|| '0'}}</p>
						<p>黄金订单</p>
					</li>
					<li>
						<p>{{statistics.totalGoldAmount|| '0'}}</p>
						<p>黄金支付总额(元)</p>
					</li>
					<li>
						<p>{{statistics.generalOrderNum|| '0'}}</p>
						<p>普通订单</p>
					</li>
					<li>
						<p>{{statistics.totalGeneralAmount ||'0'}}</p>
						<p>普通支付总额(元)</p>
					</li>
				</ul>
			</el-card>
			<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
			<el-button class="filter-item" type="primary" v-waves icon="delete" @click="clearSearch">清除搜索</el-button>
			<el-button class="filter-item" type="primary" @click="excel">导出表格</el-button>
		</div>

		<el-table
			:key="tableKey"
			:data="list"
			v-loading.body="listLoading"
			border
			fit
			highlight-current-row
			style="width: 100%"
		>
			<el-table-column align="center" label="ID" width="70">
				<template scope="scope">
					<span>{{scope.row.id}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="订单号/创建订单时间" width="200px">
				<template scope="scope">
					<p>{{scope.row.orderNo}}</p>
					<p>{{scope.row.creatTime}}</p>
				</template>
			</el-table-column>
			<el-table-column width="90" align="center" label="订单状态">
				<template scope="scope">
					<span v-if="scope.row.status == '2'">取消</span>
					<span v-if="scope.row.status == '3'">待付款</span>
					<span v-if="scope.row.status == '6'">已完成</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="名称/价格" width="100px">
				<template scope="scope">
					<p>{{scope.row.name}}</p>
					<p>{{scope.row.goodsAmount}}</p>
				</template>
			</el-table-column>
			<el-table-column width="100" align="center" label="用户名">
				<template scope="scope">
					<span>{{scope.row.userName}}</span>
				</template>
			</el-table-column>
			<el-table-column width="130" align="center" label="手机号">
				<template scope="scope">
					<span>{{scope.row.phone}}</span>
				</template>
			</el-table-column>
			<el-table-column width="130" align="center" label="上级姓名/手机号">
				<template scope="scope">
					<p>{{scope.row.leaderName}}</p>
					<p>{{scope.row.leaderPhone}}</p>
				</template>
			</el-table-column>
			<el-table-column width="130" align="center" label="促成人姓名/手机号">
				<template scope="scope">
					<p>{{scope.row.facilitateName}}</p>
					<p>{{scope.row.facilitatePhone}}</p>
				</template>
			</el-table-column>

			<el-table-column width="110" align="center" label="订单价格(元)">
				<template scope="scope">
					<span>{{scope.row.orderAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column width="110" align="center" label="优惠金额(元)">
				<template scope="scope">
					<span>{{scope.row.couponAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column width="120" align="center" label="实付金额(元)">
				<template scope="scope">
					<span>{{scope.row.realAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付时间">
				<template scope="scope">
					<span>{{!!scope.row.payTime ? timestamp(new Date(scope.row.payTime)) : ''}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" >
			<template scope="scope">
			<el-button size="small" type="text" @click="handleBuy(scope.row)">用户详情</el-button>
			</template>
			</el-table-column>
		</el-table>

		<div v-show="!listLoading" class="pagination-container">
			<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"
			></el-pagination>
		</div>

		<!--  用户详细信息窗口-->
		<el-dialog title="用户详情" :visible.sync="detailsDialogFormVisible" type="text" label-width="95px"
				class="user-list-dialog">
		<el-form>
			<el-row>
			<el-form-item label="基础信息">
				<span v-if="userDetails.status!=1">(状态-正常)</span>
				<span v-if="userDetails.status==1">(状态-已禁用)</span>
			</el-form-item>
			</el-row>
			<el-row style="border-bottom: 1px dashed #ccc;padding: 10px 0;">
			<el-col :span="3">
				<div class="demo-type">
				<img :src="userDetails.headimgurl" style="width: 80px;border-radius: 50%;"/>
				</div>
			</el-col>
			<el-col :span="18">
				<el-row>
				<el-col :span="6">
					<el-form-item label="用户Id:">
					<span>{{userDetails.userId}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="昵称:">
					<span>{{userDetails.nickName}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="手机号:">
					<span>{{userDetails.username}}</span>
					</el-form-item>
				</el-col>
				</el-row>
				<el-row>
				<el-col :span="6">
					<el-form-item label="注册终端:">
					<span>{{userDetails.channel == 1 ? 'app' : '小程序'}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="注册时间:">
					<span>{{!!userDetails.createTime ? timestamp(new Date(userDetails.createTime*1000)) : ''}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="最近登录时间:">
					<span>{{!!userDetails.lastTime ? timestamp(new Date(userDetails.lastTime)): ''}}</span>
					</el-form-item>
				</el-col>
				</el-row>
			</el-col>
			</el-row>
			<el-row>
			<el-form-item label="实名认证状态">
				<span v-if="!statusBoolean">(状态-未认证)</span>
				<span v-if="statusBoolean">(状态-已认证)</span>
			</el-form-item>
			</el-row>
			<el-row style="border-bottom: 1px dashed #ccc;padding-bottom: 10px;">
			<el-col :span="6">
				<el-form-item label="真实姓名: ">
				<span>{{userDetails.realName}}</span>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="身份证号: ">
				<span>{{userDetails.idNumber}}</span>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="性别: ">
				<span>{{userDetails.sex == 1 ? '女' : '男'}}</span>
				</el-form-item>
			</el-col>
			</el-row>
			<el-row>
			<div style="margin: 20px 0;"><span style="font-size: 16px;font-weight: bold;">会员信息</span></div>
			</el-row>
			<el-row>
			<el-col :span="6">
				<el-form-item label="会员类型:">
				<span>{{userDetails.memberName}}</span>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="有效期:">
				<span>{{userDetails.validTime == '0' ? '永久' : '无'}}</span>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="充值次数:">
				<span>{{!!userDetails.buyCount ? userDetails.buyCount+'次' : ''}}</span>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="加入时间:">
				<span>{{!!userDetails.timeOfMembership ? timestamp(new Date(userDetails.timeOfMembership)) :''}}</span>
				</el-form-item>
			</el-col>
			</el-row>
			<el-row style="border-bottom: 1px dashed #ccc;padding-bottom: 10px;">
			<el-col :span="12">
				<el-form-item label="最近充值时间:">
				<span>{{userDetails.recentRecharge}}</span>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="赠送总天数:">
				<span>{{userDetails.totalNumber}}</span>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="剩余总天数:">
				<span>{{userDetails.rentFreeDays}}</span>
				</el-form-item>
			</el-col>

			</el-row>
			<el-row>
			<div style="margin: 20px 0;"><span style="font-size: 16px;font-weight: bold;">用户来源</span></div>
			</el-row>
			<el-row>
			<el-col :span="6">
				<el-form-item label="来源:">
				<span>{{userDetails.source == 0 ? '自来' : '用户邀请'}}</span>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="邀请人账号:">
				<span>{{userDetails.inviter}}</span>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="所属地区:">
				<span>{{userDetails.cityName}}</span>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="上级:">
				<span>{{getSuperiorInformation(userDetails.nameOfSuperior,userDetails.superiorMobileNumber,2)}}</span>
				</el-form-item>
			</el-col>
			</el-row>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="detailsDialogFormVisible = false">关 闭</el-button>
		</div>
		</el-dialog>
	</div>
</template>

<script>
import { pageList, orderMemberExcel,user_info } from 'api/order/rentVehicle'
import { mapGetters } from 'vuex'
import rsCode from '../../../utils/rsCode'
// import dataFormattor from '../../../utils/dataFormattor'
import { formatDate } from 'utils/dateFormattor'

export default {
	name: 'branchCompanyStock',
	data() {
		return {
			detailsDialogFormVisible:false,//用户信息弹窗
			userDetails:{},//用户信息
			statusBoolean:false,//实名认证
			form: {
				id: null,
				companyId: null,
				companyName: null,
				name: null,
				tel: null,
				count: null,
				state: null
			},
			rules: {
				// companyName: [
				//   {
				//     required: true,
				//     message: '请输入用户',
				//     trigger: 'blur'
				//   }
				// ],
			},
			applyState: {
				'-1': {
					key: -1,
					label: '放弃购买'
				},
				0: {
					key: 0,
					label: '申请中'
				},
				1: {
					key: 1,
					label: '确认购买'
				}
			},
      statistics: [],
      isStatistics:true,
			list: null,
			total: null,
			listLoading: true,
			listQuery: {
				page: 1,
				limit: 20,
				// type: 3,
				orderNo: undefined,
				phone: undefined,
				state: null,
				startTime: undefined,
				endTime: undefined,
				level: undefined,
				leaderPhone: null,
				facilitatePhone: null,
				startOrderTime: null,
				endOrderTime: null,
				startPayTime: null,
				endPayTime: null,
				isExport: false,
				name: null
			},
			createTime: null,
			aplyTime: null,
			dialogFormVisible: false,
			dialogStatus: '',
			btn_del: true,
			btn_buy: true,
			btn_cancel: true,
      tableKey: 0,
      query:null,
      
		}
	},
	created() {
		let t = this
		this.query = localStorage.getItem('memberOrderInfo')
		this.listQuery.orderNo = this.$route.query.id || null
		if (this.query != 'null' && this.query) {
			let queryJson = JSON.parse(this.query)
			if (queryJson.page) {
				t.listQuery.page = queryJson.page
			}
			if (queryJson.limit) {
				t.listQuery.limit = queryJson.limit
			}
			if (queryJson.orderNo) {
				t.listQuery.orderNo = queryJson.orderNo
			}
			if (queryJson.type) {
				t.listQuery.type = queryJson.type
			}
			//        if(queryJson.startTime){
			//          t.listQuery.startTime = queryJson.startTime;
			//        }
			//        if(queryJson.endTime){
			//          t.listQuery.endTime = queryJson.endTime;
			//        }
			if (queryJson.state) {
				t.listQuery.state = queryJson.state
			}
			if (queryJson.phone) {
				t.listQuery.phone = queryJson.phone
			}
			if (queryJson.level) {
				t.listQuery.level = queryJson.level
			}
		}
		this.getList()
    this.btn_del = this.elements['branchCompany/stockApply:btn_delete']
    
	},
	computed: {
		...mapGetters(['elements']),
		provinceRegions() {
			return getSonRegionByCodes(1)
		},
		cityRegions() {
			if (!this.$utils.isInteger(this.form.addrProvince)) {
				return null
			}
			return getSonRegionByCodes(this.form.addrProvince)
		}
	},
	methods: {
		//上级信息
		getSuperiorInformation(name,mobile,type){
			if (type==1&&name && mobile) {
			return name+'/'+mobile;
			}
			if (type==2&&name && mobile) {
			return name+'  '+mobile;
			}
			return '';
		},	
		changeCreate(val){
		!val ? this.clearSearch() :''
		},
		changePay(val){
		!val ? this.clearSearch() :''
		},
		timestamp(now) { 
			var year=now.getFullYear(); 
			var month=now.getMonth()+1; 
			var date=now.getDate(); 
			var Hours = now.getHours();
			var Minutes = now.getMinutes();
			var Seconds = now.getSeconds();
			month = month.toString().length == 1 ? '0'+ month : month;
			date = date.toString().length == 1 ? '0'+ date : date;
			Hours = Hours.toString().length == 1 ? '0'+ Hours : Hours;
			Minutes = Minutes.toString().length == 1 ? '0'+ Minutes : Minutes;
			Seconds = Seconds.toString().length == 1 ? '0'+ Seconds : Seconds;
			return year+"-"+month+"-"+date+' '+ Hours+':'+Minutes+":"+Seconds
		},
		excel() {
			this.listQuery.isExport = true;
			
			var u = navigator.userAgent, app = navigator.appVersion;
			orderMemberExcel(this.listQuery,{responseType: 'arraybuffer'}).then(res => {
				this.listQuery.isExport = false;
				const content = res
				const blob = new Blob([content], {type: "application/vnd.ms-excel"})
				const fileName = this.timestamp(new Date())+'会员订单列表.xlsx'
				if(u.indexOf('Edge') > -1){
					window.navigator.msSaveBlob(blob, fileName)
					console.log('ie');
				}else{
					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)
					console.log('fei ie');
				}
			})
		},
		handleBuy(row) {
			this.detailsDialogFormVisible = true;
			user_info(row.userId).then(data=>{
				if (data.status == 200) {
					this.userDetails = data.data
					this.userDetails.recentRecharge = !!row.payTime ? this.timestamp(new Date(row.payTime)) : ''
					this.getBoolean(this.userDetails.certificationStatus)
				}
			})
		},
		getBoolean(bool) {
			if (bool === '1') {
			this.statusBoolean = true
			}
		},
		handleFilter() {
			this.listQuery.page = 1
			this.$refs.queryForm.validate(valid => {
				if (valid) {
          			this.getList()
				} else {
					return false
				}
			})
		},
		clearSearch() {
			this.listQuery = {
				page: 1,
				limit: 20,
				type: 3,
				orderNo: undefined,
				phone: undefined,
				state: null,
				startTime: undefined,
				endTime: undefined,
				level: undefined,
				aplyTime: null,
				leaderPhone: null,
				facilitatePhone: null,
				isExport: false,
				endOrderTime: null,
				startPayTime: null,
				name: null
			},
				this.createTime = null,
				this.aplyTime = null,
				this.query = null,
				this.getList()
		},
		getList() {
			this.listLoading = true
			if (!!this.createTime &&	!!this.createTime[0]) {
				this.listQuery.startOrderTime = formatDate(this.createTime[0], 'yyyy-MM-dd')+ ' 00:00:00'
				this.listQuery.endOrderTime = formatDate(this.createTime[1], 'yyyy-MM-dd')+ ' 23:59:59'
			}
			if (!!this.aplyTime &&	!!this.aplyTime[0]) {
				this.listQuery.startPayTime = this.aplyTime[0].getTime()
				this.listQuery.endPayTime = this.aplyTime[1].getTime()
			}
			if (this.listQuery) {
				localStorage.setItem(
					'memberOrderInfo',
					JSON.stringify(this.listQuery)
				)
			}
			pageList(this.listQuery).then(response => {
				this.list = response.data.memberOrderPage.data
				if (this.listQuery.page == 1) {
					this.statistics = response.data.memberOrderStatisticsBo
				}
				this.total = response.data.memberOrderPage.totalCount
			})
			setTimeout(() => {
				this.listLoading = false
			}, 300)
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getList()
		}
	}
}
</script>
<style>
.member .el-dialog--small {
    width: 500px;
  }
.user-list-dialog .el-form-item {
    margin-bottom: 0px;
}
.el-card__body {
	overflow: hidden;
	padding: 0;
	width: 100%;
	display: inline-block;
}
.num-title {
	display: inline-block;
	float: left;
	margin-right: 40px;
  font-size: 14px;
}

.box-card li {
	list-style: none;
	float: left;
	text-align: center;
	width: 12.5%;
  font-size: 14px
}
.box-card li p:nth-child(1){
  font-weight: bold;
  color: #333;
  font-size: 16px;
}
.box-card li p:nth-child(2){
  font-weight: bold;
  color: #666;
}
</style>