<template>
	<div class="order-wrapper">
		<!-- <breadcrumb :item-name="['订单管理', '订单列表']"></breadcrumb> -->
		<el-card>
			<!-- 搜索区域 -->
			<el-row>
				<el-col>
					<div class="flex" style="justify-content: space-between;padding-bottom: 20px;">
						<!-- <el-button type="primary" @click="openBuy">购买Token</el-button> -->
						<el-button type="primary" icon="el-icon-refresh-right" @click="getList('reload')">刷新</el-button>
					</div>

				</el-col>


				<!-- <el-col :span="8">
					<el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="getList()"></el-button>
					</el-input>
				</el-col> -->
			</el-row>
			<!-- 订单表格区域 -->
			<el-table :data="list" border style="width: 100%" height="620">
				<el-table-column prop="id" label="id" width="180">
				</el-table-column>
				<el-table-column prop="order_id" label="订单编号" width="350">
				</el-table-column>
				<!-- 				<el-table-column prop="status" label="是否已使用">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.status == 0">待使用</el-tag>
						<el-tag type="info" v-if="scope.row.status == 1">已使用</el-tag>
					</template>
				</el-table-column> -->
				<el-table-column prop="createtime" label="购买时间">
					<template slot-scope="scope">
						{{showTime(scope.row.createtime)}}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="downToken(scope.row)">下载Token</el-button>

					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination> -->
		</el-card>
		<!-- 修改地址对话框 -->
		<el-dialog title="购买Token" :visible.sync="dialogTableVisible" @close="closeEvent">
			<el-form :model="form">
				<el-form-item label="购买数量" :label-width="formLabelWidth">
					<el-input v-model="form.num" type="number"></el-input>
				</el-form-item>

				<el-form-item label="交易密码" :label-width="formLabelWidth">
					<el-input v-model="form.transaction" type="password"></el-input>
				</el-form-item>
				<el-form-item label="动态口令" :label-width="formLabelWidth" v-if="userInfo.is_binding == 1">
					<el-input v-model="form.code" type="text"></el-input>
				</el-form-item>
			</el-form>
			<div class="t-r">
				合计： {{hj}}元
			</div>
			<div class="t-r">
				当前余额： {{userInfo.money*1}}元
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogTableVisible = false">取 消</el-button>
				<el-button type="primary" @click="goBuy">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		createCode,
		getCodeList,
		createToken,
		getTokenList,
		getIndex,
		getUserInfo
	} from '@/request/agent.js'
	import {
		getTokenOrderList,
		downToken
	} from '@/request/user.js'
	import {
		showTime,
	} from '@/assets/js/tools.js'
	export default {
		name: 'Order',
		data() {
			return {
				loading: false,
				formLabelWidth: '80px',
				form: {
					num: '',
					transaction: '',
					code: ''
				},
				dialogTableVisible: false,
				queryInfo: {
					keyword: '',
					page: 1,
					limit: 10
				},
				list: [],
				total: 0,
				dataloading: false,
			}
		},
		computed: {
			...mapState(['userInfo', 'baseInfo']),
			hj() {
				return this.baseInfo.token_price * 1 * this.form.num
				// return 0
			}
		},
		created() {
			this.getIndex()
			this.getUserInfo()
			this.getList()
		},
		methods: {
			...mapMutations(['setUserInfo', 'setBaseInfo']),
			showTime,
			downToken(item) {
				console.log(item);
				downToken({
					oid: item.id
				}).then(res => {
					// let a = document.createElement('a');
					// a.href = res.data.url;
					// a.download = res.data.file_name;
					// a.click()
					// a.remove();
					// axios.get('http://jz.red.igxys.com/aa.txt',{
					// 	headers:{
					// 		'Content-Type': 'text/plain'
					// 	}
					// }).then(res => {
					// 	console.log(res);
					// })
					// this.downloadFile(res.data.url)
				})
			},
			downloadFile (url = '', fileName = '下载的文件'){
				// 使用xhr下载文件
				const xhr = new XMLHttpRequest()
				xhr.open('GET', url, true)
				xhr.responseType = 'blob'
				xhr.onload = (e) => {
					// 下载之后生成文件url 模拟a标签点击下载
					const url = window.URL.createObjectURL(xhr.response)
					const a = document.createElement('a')
					a.href = url
					a.download = fileName
					a.click()
				}
				xhr.send()
			},
			closeEvent() {
				console.log('guanbi');
			},
			getIndex() {
				getIndex().then(res => {
					this.setBaseInfo(res.data)
				})
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.setUserInfo(res.data)
				})
			},
			openBuy() {
				this.dialogTableVisible = true
			},
			goBuy() {
				let that = this
				if (that.loading) {
					return
				}
				if (!that.form.num) {
					return that.$msg.error('请输入购买数量')
				}
				if (!that.form.transaction) {
					return that.$msg.error('请输入交易密码')
				}
				if (this.hj > this.userInfo.money) {
					return that.$msg.error('您的账号余额不足')
				}
				that.loading = true
				createToken(that.form).then(res => {
					console.log(res);
					that.$msg.success('购买成功')
					that.dialogTableVisible = false
					that.loading = false
					that.getList('reload')
				}).catch(err => {
					that.loading = false
				})
			},
			getList(type) {
				let that = this
				if (type == 'reload') {
					that.queryInfo.page = 1
					that.dataloading = false
				}
				if (that.dataloading) {
					return
				}

				that.dataloading = true
				getTokenOrderList(that.queryInfo).then(res => {
					that.total = res.data.count
					that.list = res.data.data
					that.dataloading = false
				}).catch(err => {
					that.dataloading = false
				})
			},
			handleSizeChange(newPageSize) {
				this.queryInfo.limit = newPageSize
				this.getList()
			},
			handleCurrentChange(newPageNum) {
				this.queryInfo.page = newPageNum
				this.getList()
			},
		},

	}
</script>

<style scoped lang="scss">
	.t-r {
		text-align: right;
		padding-top: 10px;
	}
</style>