<template>
	<div class="order-wrapper">
		<!-- <breadcrumb :item-name="['订单管理', '订单列表']"></breadcrumb> -->
		<el-card>
			<div class="wrap">
				<div class="left-wrap">
					<div class="left-tit">token</div>
					<el-scrollbar style="height:100%" wrap-style="overflow-x:hidden;">
						<div class="flex" style="flex-direction: column;">
							<div v-for="item in tokenList" class="left-t hand"
								:class="{'used': item.bl,'checked':item.id == token.id}" @click="chooseToken(item)">
								{{item.token}}
							</div>
						</div>
					</el-scrollbar>
				</div>
				<div class="right-wrap">
					<div class="right-top">
						<el-form :model="form" style="width: 80%;">
							<el-form-item label="当前token" :label-width="formLabelWidth">
								<el-input v-model="token.token" type="text" disabled></el-input>
							</el-form-item>
							<el-form-item label="最低价格" :label-width="formLabelWidth">
								<el-select v-model="xdForm.minPrice" placeholder="请选择最低价格" :disabled="loading || auto_order">
									<el-option v-for="item in minPriceList" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="最高价格" :label-width="formLabelWidth">
								<el-select v-model="xdForm.maxPrice" placeholder="请选择最高价格" :disabled="loading || auto_order">
									<el-option v-for="item in maxPriceList" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="最大下单数量" :label-width="formLabelWidth">
								<el-input v-model="baseInfo.token_day_count" type="number" disabled></el-input>
							</el-form-item>
							<el-form-item label="联系方式" :label-width="formLabelWidth">
								<div class="flex"><el-input v-model="xdForm.phone" type="number" :disabled="loading || auto_order"></el-input><el-button
										style="margin-left: 10px;" @click="sjPhone">随机</el-button></div>

							</el-form-item>
							<el-form-item label="收货地址" :label-width="formLabelWidth">
								<div class="flex"><el-input v-model="xdForm.address" type="text" :disabled="loading || auto_order"></el-input><el-button
										style="margin-left: 10px;" @click="sjAddress">随机</el-button></div>
							</el-form-item>
						</el-form>
						<div class="dialog-footer flex" style="width: 80%;justify-content: flex-end;">
							<el-button @click="openZd" v-if="!auto_order">自动下单</el-button>
						
							
							<el-button :type="(loading|| auto_order) ? 'info': 'primary'" @click="createOrder">下 单</el-button>
						</div>
					</div>
					<div class="right-btm">
						<el-scrollbar style="height:100%" wrap-style="overflow-x:hidden;">
							<div class="flex tip-list">
								<div class="tip" v-for="item in tipList">
									{{item.title}}
								</div>
							</div>
						</el-scrollbar>
					</div>
				</div>
			</div>
		</el-card>
		<!-- 修改地址对话框 -->
		<el-dialog title="人机校验" :visible.sync="dialogTableVisible" class="rjjy">
			<div class="flex" style="justify-content: center;" v-if="dialogTableVisible">
				<slide-verify :l="42" :r="10" :w="310" :h="155" slider-text="向右滑动" @success="onSuccess" @fail="onFail"
					@refresh="onRefresh" :imgs="imgs"></slide-verify>
			</div>
		</el-dialog>
		<el-dialog
		title="提示"
		:visible.sync="dialogVisible"
		width="30%"
		>
		<span>开通自动下单需支付{{baseInfo.auto_order}}元</span>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="ktAuto">确 定</el-button>
		</span>
		</el-dialog>
		<el-dialog
		title="提示"
		:visible.sync="showStop"
		width="30%"
		>
		<span>您确定停止自动下单？</span>
		<span slot="footer" class="dialog-footer">
			<el-button @click="showStop = false">取 消</el-button>
			<el-button type="primary" @click="stopAuto">确 定</el-button>
		</span>
		</el-dialog>
		<div class="mask" v-if="auto_order">
			<!-- el-icon-loading -->
			<i class="el-icon-loading mask-loading"></i>
				<el-button @click="showStop = true"  style="margin-top: 20px;">停止自动下单</el-button>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	import {
		createCode,
		getUserList,
		getIndex,

	} from '@/request/agent.js'
	import {
		getRechangeList,
		rechange,
		getTokenList,
		createOrder,
		getUserInfo,
		payAuto
	} from '@/request/user.js'
	import {
		showTime,
		sj
	} from '@/assets/js/tools.js'
	import {
		imgs
	} from '@/assets/js/admun.js'
	import {
		set
	} from 'core-js/library/core/dict';
	export default {
		components: {
			// SlideVerify
		},
		name: 'Order',
		data() {
			return {
				showStop:false,
				dialogVisible: false,
				xdForm: {
					phone: '',
					address: '',
					minPrice: '',
					maxPrice: ''
				},
				imgs: imgs,
				msg: '888',
				loading: false,
				formLabelWidth: '100px',
				form: {
					recharge_num: '',
					image: ''
				},
				dialogTableVisible: false,
				xiadanDia: false, //下单弹窗
				queryInfo: {
					keyword: '',
					page: 1,
					limit: 10
				},
				list: [],
				total: 0,
				dataloading: false,
				headers: {},
				tokenList: [],
				token: {},
				ybToken: {},
				minPriceList: [],
				maxPriceList: [],
				tipList: [],
				auto_order: false,//是否启动自动下单
			}
		},
		computed: {
			...mapState(['baseInfo', 'userInfo'])
		},
		created() {
			this.getUserInfo()
			this.getIndex()
			this.getList()
			this.getTokenList()
			this.headers['token'] = window.sessionStorage.getItem('token')
			console.log(this.imgs, 'imgs');
		},
		methods: {
			...mapMutations(['setBaseInfo', 'setUserInfo','jUserMoney']),
			stopAuto() {
				this.auto_order = false
				this.showStop =false
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.setUserInfo(res.data)
				})
			},
			pd(arr, i = 0) {
				let that = this
				let len = arr.length - 1
				if (i <= len) {
					if (i == 0) {
						that.tipList.unshift(arr[i])
						that.pd(arr, ++i)
					} else {
						setTimeout(() => {
							that.tipList.unshift(arr[i])
							if(arr[i].title.indexOf('支付金额：') != -1) {
								// let price = zfInfo.title.replace(/支付金额：/,'')*1
								that.jUserMoney(-1*arr[i].title.replace(/支付金额：/,''))
							}
							that.pd(arr, ++i)
						}, arr[i - 1].time * 1000)
					}
				}else {
					that.xdForm.phone = ''
					that.xdForm.address = ''
					that.loading = false
					if(that.auto_order) {
						that.chooseNext()
					}else {
						that.xdForm.minPrice = ''
						that.xdForm.maxPrice = ''
					}
				}
			},
			ktAuto() {
				let that = this
				if (that.userInfo.money * 1 < that.baseInfo.auto_order * 1) {
					return that.$msg.error('您当前余额不足')
				}
				payAuto().then(res => {
					that.getUserInfo()
						that.dialogVisible = false
						that.auto_order = true
						that.chooseNext()
					//自动下单启动
				})
			},
			openZd() {
				let that = this
				if(that.loading) {
					return that.$msg.error('当前处于下单状态，请等待下单完成')
				}
				if (that.userInfo.auto_order == 0) {
					that.dialogVisible = true
				} else {
					//自动下单启动
					if(that.xdForm.minPrice == '') {
						return that.$msg.error('请选择最低价格')
					}
					if(that.xdForm.maxPrice == '') {
						return that.$msg.error('请选择最高价格')
					}
					that.auto_order = true
					that.chooseNext()
					
					
				}
			},
			//选择下一个可用token
			chooseNext() {
				let that = this
				that.token = that.tokenList.find(item => item.bl == false ) 
				if(that.auto_order) {
					if(that.token) {
						if(that.xdForm.minPrice == '') {
							return that.$msg.error('请选择最低价格')
						}
						if(that.xdForm.maxPrice == '') {
							return that.$msg.error('请选择最高价格')
						}
						that.sjAddress()
						that.sjPhone()
						// that.$msg.success('开启自动下单，请勿进行操作')
						// 启动
						that.createOrder()
					}else {
						//停止
						that.auto_order = false
					}
					
				}
			},
			createOrder() {
				let that = this
				if(that.loading ) {
					return
				}
				if ( that.token.bl) {
					if(that.auto_order) {
						
					}else {
						return this.$msg.error('该TOKEN，当天使用次数已满!')
					}
				}
				if(that.xdForm.minPrice == '') {
					return that.$msg.error('请选择最低价格')
				}
				if(that.xdForm.maxPrice == '') {
					return that.$msg.error('请选择最高价格')
				}
				if(that.xdForm.minPrice*1 > that.xdForm.maxPrice*1) {
					return that.$msg.error('最高价格需大于最低价格')
				}
				if(that.xdForm.phone == '') {
					return that.$msg.error('请输入手机号码')
				}
				if (!/(^1[2|3|4|5|6|7|8|9][0-9]{9}$)/.test(that.xdForm.phone)) {
					return that.$msg.error('请输入正确的手机号码')
				}
				if(that.xdForm.address == '') {
					return that.$msg.error('请输入收货地址')
				}
				that.loading = true
				createOrder({
					min_price: that.xdForm.minPrice,
					max_price: that.xdForm.maxPrice,
					address: that.xdForm.address,
					phone: that.xdForm.phone,
					token: that.token.token
				}).then(res => {
					
					//更新token
					that.token.count++
					if(that.token.count == 2) {
						that.token.bl = true
					}
					// 加载tip
					
					that.pd(res.data, 0)

				}).catch(err => {
					console.log(err);
					that.loading = false
				})
			},
			getIndex() {
				getIndex().then(res => {
					this.setBaseInfo(res.data)
					let arr = [],
						arr2 = []
					res.data.price_min.forEach(item => {
						let a = {
							value: item * 1,
							label: item
						}
						arr.push(a)
					})
					res.data.price_max.forEach(item => {
						let a = {
							value: item * 1,
							label: item
						}
						arr2.push(a)
					})
					this.minPriceList = arr
					this.maxPriceList = arr2
				})
			},
			showTime,
			sjPhone() {
				if(this.loading) {
					return
				}
				this.xdForm.phone = sj(this.baseInfo.sys_phone)
			},
			sjAddress() {
				if(this.loading) {
					return
				}
				this.xdForm.address = sj(this.baseInfo.system_address)
			},
			closeXd() {
				this.xiadanDia = false
				this.xdForm.phone = ''
				this.xdForm.address = ''
			},
			onSuccess() {
				console.log('success');
				this.token = this.ybToken
				this.xdForm.minPrice = ''
				this.xdForm.maxPrice = ''
				this.dialogTableVisible = false
			},
			onFail() {
				console.log('fail');
			},
			onRefresh() {
				console.log('refresh');
			},
			getTokenList() {
				getTokenList().then(res => {
					this.tokenList = res.data.map(item => {
						item.count = item.count*1
						return item
					})
					// 获取第一次选择的token
					this.chooseNext()
					console.log(this.token, 'this.token');
				})
			},
			chooseToken(item) {
				// console.log(item,'ddddd');
				if(this.loading) {
					return
				}
				if (item.bl) {
					return this.$msg.error('该TOKEN，当天使用次数已满!')
				}
				this.ybToken = item
				this.dialogTableVisible = true
			},
			handleAvatarSuccess(res, file) {
				this.form.image = res.data.fullurl;
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg/png';
				// const isLt2M = file.size / 1024 / 1024 < 2;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				// if (!isLt2M) {
				// 	this.$message.error('上传头像图片大小不能超过 2MB!');
				// }
				// return isJPG && isLt2M;
				return true
			},
			handleAvatarError() {

			},
			getList(type) {
				let that = this
				if (type == 'reload') {
					that.queryInfo.page = 1
					that.dataloading = false
				}
				if (that.dataloading) {
					return
				}

				that.dataloading = true
				getRechangeList(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 lang="scss" scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 10px;
	}

	.left-t {
		display: flex;
		justify-content: center;
		font-weight: bold;
		// height: 50px;
		margin-bottom: 20px;
	}

	.used {
		color: #a6a9ad;
	}

	.checked {
		color: #67c23a !important;
	}

	.wrap {
		overflow: hidden;
		display: flex;
		width: 100%;
		height: 700px;
		min-height: 100%;

		.left-wrap {
			width: 35%;
			background-color: #fff;
			color: rgb(15, 131, 254);

			.left-tit {
				text-align: center;
				padding: 20px;
				font-size: 18px;
				font-weight: bold;
			}
		}

		.right-wrap {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			padding-left: 40px;

			// width: 100%;
			// background-color: gray;
			.right-top {
				width: 100%;
				flex-shrink: 0;
				// height: 30%;
				// background-color: red;

			}

			.right-btm {
				flex-grow: 1;
				padding-top: 20px;

				.tip-list {
					flex-direction: column;
					justify-content: flex-start;

					.tip {
						width: 80%;
						height: 40px;
						border-radius: 10px;
						// background-color: #67c23a;
						text-align: center;
						margin: 5px 0;
						line-height: 40px;
						color: #000;
					}
				}
			}
		}
	}

	.rjjy {
		// width: 400px;
	}
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.mask-loading {
			font-size: 100px;
			color: #409eff;
		}
	}
</style>