<template>
	<view class="changecontainer">
		<view class="cardindexbox">
			<view class="myswiper">
				<swiper class="swiper" circular :indicator-dots="true" :indicator-color="indicatorColor"
					:indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval"
					:duration="duration" :current="currentSwiperIndex" @change="onSwiperChange">
					<swiper-item v-for="item in banner3">
						<view class="swiper-item">
							<image :src="item.image" mode="widthFix"></image>
						</view>
					</swiper-item>

				</swiper>
			</view>
			<view class="formChange">
				<u-form :model="form" ref="uForm">
					<u-form-item class="formitem card_number" prop="card_number" :border-bottom="false">
						<u-input type="text" v-model="form.card_number" placeholder="请输入卡号" />
					</u-form-item>
				</u-form>
				<u-button class="formitem submitform" form-type="submit" :plain="true" @click="goSubmit">点击查询</u-button>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		toast,
		isNull
	} from '@/common/util.js'
	export default {
		components: {},
		data() {
			return {
				autoplay: true,
				interval: 3000,
				duration: 500,
				indicatorColor: 'rgba(204,204,203,.5)',
				indicatorActiveColor: '#b98b44',
				currentSwiperIndex: 0,
				form: {
					code: '',
					limit_tag:1
				},
				banner3:[]

			}
		},
		onLoad(option) {
			this.banner3 = uni.getStorageSync("banner3") ? uni.getStorageSync("banner3") : []
			
		},
		methods: {
			onSwiperChange(e) {

				this.currentSwiperIndex = e.detail.current;
			},
			getScanCode() {
				// uni.scanCode({
				// 	onlyFromCamera: false,
				// 	scanType: ['qrCode', 'barCode', 'dataMatrix'],
				// 	success: res => {
				// 		if (res.errMsg == 'scanCode:ok') {
				// 			this.form.code = res.result
				// 		} else {
				// 			uni.showToast({
				// 				title: '扫码失败',
				// 				icon: "none",
				// 				mask: true,
				// 			})
				// 		}
				// 	},
				// 	fail: err => {
				// 		console.log(JSON.stringify(err))
				// 	}

				// })
			},
			goSubmit() {
				if (isNull(this.form.card_number)) {
					toast('请填写卡号')
					return
				}
				this.$u.api.getDates(this.form).then(res => {
					uni.setStorageSync('vuex_card_state', {
						card_number: this.form.card_number,
						card: res.card,
					})
					uni.navigateTo({
						url: '/packages/card/detail'
					})
					// switch (res.card.status){
					// 	case -1:
					// 		toast('已销卡')
					// 		break;
					// 	case 0:
					// 		toast('末出库')
					// 		break;
					// 	case 1:
					// 		toast('待激活')
					// 		break;
					// 	case 2:
					// 		uni.setStorageSync('vuex_card_state', {
					// 			card_number: this.form.card_number,
					// 			card: res.card
					// 		})
					// 		uni.navigateTo({
					// 			url: '/packages/card/detail'
					// 		})
					// 		break;
					// 	case 3:
					// 		toast('已使用')
					// 		break;
					// 	default:
					// 		break;
					// }
				}).then(res => {
					// console.log("ressssss",res)
					// toast(res)
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.changecontainer {
		width: 100%;
		background-image: url(../../static/bg-change.jpg);
		background-position: center top;
		background-size: cover;
		// padding-top: 195rpx;
		// padding-bottom: 520rpx;
		height: 100vh;
		display: flex;
		align-items: center;
	}

	.cardindexbox {
		width: 87.33%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		padding: 54rpx 46rpx;
	}

	.myswiper {
		position: relative;
	}

	.swiper {
		padding-bottom: 48rpx;
		overflow: hidden;

	}

	/deep/ swiper-item {
		border-radius: 10rpx;
		overflow: hidden;
	}

	//设置轮播的指示点大小
	/deep/ .uni-swiper-dots {
		bottom: -48rpx !important;
	}

	/deep/ .uni-swiper-wrapper {
		overflow: initial;
	}

	/deep/ .wx-swiper-wrapper {
		overflow: initial !important;
	}

	/deep/ .wx-swiper-dots {
		bottom: -48rpx !important;
	}

	/deep/ .swiper-item image {
		width: 100%;
		height: auto;
		// border-radius: 10rpx;
	}

	.formChange {
		width: 450rpx;
		margin: 0 auto;
		margin-top: 104rpx;
	}

	/deep/ .u-form-item {
		margin-bottom: 40rpx;
		height: 74rpx;
		width: 100%;
		line-height: 74rpx;
		border-radius: 50rpx;
		background-color: #f4f3f2;
		border: none;
		padding: 0 !important;
		border: none !important;
		font-size: 20rpx;
		color: #676767;
	}

	/deep/ .u-form-item.password {
		background-image: url(../../static/icon-change2.png);
	}

	/deep/ .u-input {
		padding: 0 10rpx !important;
	}

	/deep/ .u-form-item .u-input__input {
		display: block;
		border: none;
		width: 100%;
		height: 74rpx;
		line-height: 74rpx;
		color: #676767 !important;
		font-size: 26rpx !important;
		padding-left: 94rpx;
		padding-right: 30rpx;
		background-position: left 30rpx center;
		background-size: 38rpx auto;
		background-repeat: no-repeat;
	}

	/deep/ .card_number .u-input__input {
		background-image: url(../../static/icon-change1.png) !important;
	}

	/deep/ .password .u-input__input {
		background-image: url(../../static/icon-change2.png) !important;
	}

	/deep/ .u-btn {
		color: #b98b44 !important;
		font-size: 26rpx !important;
		font-weight: bold;
		padding: 0;
		height: 74rpx !important;
		width: 100%;
		line-height: 74rpx !important;
		border-radius: 50rpx;
		background-color: #f4f3f2 !important;
	}

	/deep/ .u-btn::after {
		display: none;
	}
</style>