<template>
	<div>
		<div class="search-term">
			<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
				<el-form-item label="开始时间" prop="fromDate">
					<el-date-picker
						v-model="searchInfo.fromDate"
						type="date"
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"
						clearable
						placeholder="开始时间" />
				</el-form-item>
				
				<el-form-item label="结束时间" prop="toDate">
					<el-date-picker
						v-model="searchInfo.toDate"
						type="date"
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"
						clearable
						placeholder="结束时间" />
				</el-form-item>
				
				<el-form-item label="手机号码" prop="phone">
					<el-input placeholder="请输入手机号码" v-model="searchInfo.phone" type="text" class="user-form-item" clearable></el-input>
				</el-form-item>

				<el-form-item label="姓名" prop="phone">
					<el-input placeholder="请输入姓名" v-model="searchInfo.nickname" type="text" class="user-form-item" clearable></el-input>
				</el-form-item>

				<el-form-item label="身份证" prop="cardId">
					<el-input placeholder="请输入身份证" v-model="searchInfo.cardId" type="text" class="user-form-item" clearable></el-input>
				</el-form-item>
				
				<el-form-item label="课程分类" prop="type">
					<drop-search
					  :info="searchInfo.type"
					  type="type"
					  class="user-form-item"
					  @select="okSearchType"
					/>
				</el-form-item>
				
				<el-form-item class="ml20">
					<el-button  type="primary" @click="exportUser">导出excel</el-button>
				</el-form-item>
			</el-form>
		</div>
		

		<el-table :data="tableData" border stripe>
			<el-table-column label="ID" width="70" prop="id"> </el-table-column>
			<el-table-column label="订单号" prop="outTradeNo"> </el-table-column>
			<el-table-column label="手机号码" prop="phone" > </el-table-column>
			<el-table-column label="身份证" prop="cardId"> </el-table-column>
			<el-table-column label="姓名" prop="nickname" width="100"> </el-table-column>
			<el-table-column label="课程" prop="courseName" width="150"> </el-table-column>
			<el-table-column label="分类" prop="type" width="100"> </el-table-column>

			<el-table-column label="费用" prop="payFee" width="70">
				<template slot-scope="{ row }">
					<span>{{row.payFee/100}}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="时间" prop="create_at">
				<template slot-scope="{ row }">
					<span>{{row.createAt}}</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :style="{ float: 'right', padding: '20px' }"
		 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>

	</div>
</template>

<script>
	import {getWxpaylogList,	postData} from "@/api/study.js";
	import infoList from "@/mixins/infoList";
	import {getDate} from '@/utils/date.js'
	import DropSearch from "@/components/select/DropSearch.vue";

	export default {
		name: "Api",
		components:{DropSearch},
		data() {
			return {
				listApi: getWxpaylogList,
				addUserDialog: false,
				dialogFormVisible: false,
				dialogCertList: false,
				page: 1,
				total: 10,
				pageSize: 10,
				tableData: [],
				searchInfo:{
					fromDate: getDate(-30),
					toDate: getDate(0),
					type:'继续教育'
				}
			};
		},
		watch: {
			searchInfo:{
				handler(new_value,old_value){
					this.onSubmit()
			    },
				deep: true,
			}
		},
		mixins: [infoList],
		methods: {
			onSubmit(){
				this.page = 1
				this.getTableData()
			},
			exportUser(){
				let param = Object.assign( {}, this.searchInfo, {size:100000, from:0})
				getWxpaylogList( param ).then( res =>{
					if( res.code == 200){
						this.$message.successMsg("开始生成excel", 3);
						this.doExportUser( res.data.list )
					}
					
				})
			},
			okSearchType( item ){
				this.searchInfo.type = item.name
			},
			doExportUser( list ){
				import('@/vendor/Export2Excel').then(excel => {
					const tHeader = ['序号', '订单号', '手机号', '身份证','姓名', '课程','分类', '费用', '时间', '学习时间', '获得学时'];
					const data = list.map( item =>{
						return [item.id,item.outTradeNo,item.phone, item.cardId, item.nickname, item.courseName,
							item.type, item.payFee/100, item.createAt, item.startDate+' 到 '+item.endDate, item.getXs+'/'+item.totalXs
						]
					});
					excel.export_json_to_excel({
						header: tHeader,
						data,
						filename: Date.now(),
						autoWidth: true,
						bookType: "xlsx"
					})
				})
				
			}
		},
		created() {
			this.getTableData();
		},
	};
</script>
<style scoped lang="scss">
	.el-tag--mini {
		margin-left: 5px;
	}

	.warning {
		color: #dc143c;
	}
</style>
