<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-select class="filter-item" v-model="listQuery.type" placeholder="请选择活动类型">
								<el-option :key="null" label="全部" :value="undefined"></el-option>
								<el-option :key="1" label="优惠券" :value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="订单号">
							<el-input v-model="listQuery.no" 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-select class="filter-item" v-model="listQuery.status" 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>
						<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-row>
			</el-form>
			<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 slot-scope="scope">
					<span>{{scope.row.id}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="订单号/创建订单时间" width="200">
				<template slot-scope="scope">
					<p>{{scope.row.orderNo}}</p>
					<p>{{scope.row.orderTime}}</p>
				</template>
			</el-table-column>
				<el-table-column  width="200" align="center" label="用户ID/姓名">
				<template slot-scope="scope">
					<span>{{scope.row.userId}}</span> <br/>
					<span>{{scope.row.realName}}</span>
				</template>
			</el-table-column>
			<el-table-column  width="200" align="center" label="手机号">
				<template slot-scope="scope">
					<span>{{scope.row.mobile}}</span>
				</template>
			</el-table-column>


			<el-table-column  width="200" align="center" label="所属活动">
				<template slot-scope="scope">
					<span v-if="scope.row.type == '1'">超值预售卡</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="商品规格"  width="200">
				<template slot-scope="scope">
					<p>面值:{{scope.row.productSpecs}}</p>
				</template>
			</el-table-column>
			<el-table-column  width="130" align="center" label="单价(元)">
				<template slot-scope="scope">
					<span>{{scope.row.goodsAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column  width="100" align="center" label="数量">
				<template slot-scope="scope">
					<span>{{scope.row.number}}</span>
				</template>
			</el-table-column>
			<el-table-column  width="150" align="center" label="实付金额(元)">
				<template slot-scope="scope">
					<span>{{scope.row.realAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column  width="200" align="center" label="订单状态">
				<template slot-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="操作" >
			<template slot-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 v-if="userDetails.channel == 1">安卓</span>
					<span v-else-if="userDetails.channel == 2">小程序</span>
					<span v-else-if="userDetails.channel == 3">ios</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-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 { page } from 'api/order/orderActive'
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: {
			},
      statistics: [],
      isStatistics:true,
			list: null,
			total: null,
			listLoading: true,
			listQuery: {
				page: 1,
				limit: 20,
				type: undefined,
				no: undefined,
				phone: undefined,
				status: null,
				startTime: undefined,
				endTime: undefined,
				startTime: null,
				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('orderActivityInfo')
		this.listQuery.no = 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.no) {
				t.listQuery.no = queryJson.no
			}
			if (queryJson.type) {
				t.listQuery.type = queryJson.type
			}
			if (queryJson.status) {
				t.listQuery.status = queryJson.status
			}
			if (queryJson.phone) {
				t.listQuery.phone = queryJson.phone
			}
			if (queryJson.startTime) {
				t.listQuery.startTime = queryJson.startTime
			}
				if (queryJson.endTime) {
				t.listQuery.endTime = queryJson.endTime
			}
		}
		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: {
		//上级信息
		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: undefined,
				no: undefined,
				phone: undefined,
				status: null,
				endTime: null,
				startTime: null,
				name: null
			},
				this.createTime = null,
				this.aplyTime = null,
				this.query = null,
				this.getList()
		},
		getList() {
			this.listLoading = true
			if (!!this.listQuery.startTime &&	!!this.listQuery.endTime) {
				this.listQuery.startTime = this.timestamp(this.listQuery.startTime)
				this.listQuery.endTime =  this.timestamp(this.listQuery.endTime)
			}
			if (this.listQuery) {
				localStorage.setItem(
					'orderActivityInfo',
					JSON.stringify(this.listQuery)
				)
			}
			page(this.listQuery).then(response => {
				console.log(response)
				this.list = response.data.data
				this.list.forEach((item) => {
						if (item.productSpecs != "") {
							item.productSpecs = JSON.parse(item.productSpecs).price
						}
				 });
				this.total = response.data.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>
