<template>
	<view class="panel">
		<view class="panel-item panel-item-bottom">
			<text class="panel-text">彩店类型</text>
			<!-- <uni-combox :border="false" :candidates="candidates" labelWidth="50px"></uni-combox> -->

			<!-- <radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in typeList" :key="index">
					<view>
						<radio :value="''+index" :checked="index == shopType" />
					</view>
					<view>{{item}}</view>
				</label>
			</radio-group> -->

			<radio-group class="panel-radio" @change="radioChange">
				<radio v-for="(item, index) in typeList" :key="index" :value="index+''" :checked="index == shopType">
					{{item}}
				</radio>
			</radio-group>

		</view>

		<view class="panel-item">
			<view class="panel-text">海报显示名称水印</view>
			<switch class="switch" :checked="isShowName" color="#1A9BFC" @change="isShowName=!isShowName" />
		</view>

		<view class="panel-txt">
			<input type="text" class="panel-txt-txt" v-model="shopName" placeholder="彩店名称" />
		</view>

		<view class="panel-item-bottom panel-top"></view>

		<view class="panel-item">
			<text class="panel-text">海报显示店主二维码</text>
			<switch class="switch" :checked="isShowQrcode" color="#1A9BFC" @change="isShowQrcode=!isShowQrcode" />
		</view>

		<view class="panel-img">
			<imgUpload limit="1" :FileList="imgList" />
		</view>

		<button type="default" class="btn" @click="subimit">提交</button>
	</view>
</template>

<script>
	import imgUpload from '@/components/chooseImage/chooseImage.vue'
	import {
		pathToBase64
	} from "image-tools"

	export default {
		components: {
			imgUpload
		},
		data() {
			return {
				typeList: ['双彩店', '福彩', '体彩'],
				shopName: '',
				isShowName: true,
				isShowQrcode: true,
				shopType: 0,
				shopId: 0,
				imgList: []
			}
		},
		async onLoad() {
			const res = await uni.$u.request.graphql({
				name: 'lottery_shop_get_my_shop_info'
			})

			if (!(res && res.length > 0)) return
			const data = res[0]
			this.shopName = data.name
			this.isShowName = data.poster_enable_name > 0
			this.isShowQrcode = data.poster_enable_qrcode > 0
			this.shopId = data.id
			this.shopType = data.type
			if (data.qrcode_url) this.imgList.push({
				path: data.qrcode_url,
				isUrl: true
			})
		},
		methods: {
			async subimit() {
				var args = []
				args.push(`name:"${this.shopName}"`)
				args.push(`type:${this.shopType}`)
				args.push(`poster_enable_name:${this.isShowName?1:0}`)
				args.push(`poster_enable_qrcode:${this.isShowQrcode?1:0}`)

				if (this.shopId > 0) {
					args.push(`shop_id:${this.shopId}`)
				}

				if (this.imgList.length == 0) {
					args.push(`qrcode:""`)
				} else if (!this.imgList[0].isUrl) {
					const base64 = await this.imgToBase64(this.imgList[0].path)
					args.push(`qrcode:"${base64}"`)
				}

				const res = await uni.$u.request.graphql({
					name: 'lottery_shop_save_shop_info',
					type: 'mutation',
					args: args.join(',')
				})

				if (res.length > 0) {
					uni.showToast({
						title: '操作成功'
					})
				}
			},
			radioChange: function(evt) {
				this.shopType = evt.detail.value
			},
			imgToBase64(data) {
				return new Promise((resolve, reject) => {
					pathToBase64(data)
						.then((base64) => {
							resolve(base64.split(',')[1]);
						})
						.catch((error) => {
							console.error(error);
							reject(error);
						});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.panel {
		font-size: 14px;
	}

	.panel-item {
		padding: 12px 20px;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.panel-top {
		margin-top: 15px;
	}

	.panel-item-bottom {
		border-bottom: solid 1px #F5F5F5;
	}

	.panel-text {
		color: #000;
		word-wrap: break-word;
		line-height: 30px;
		height: 30px;
		text-align: center;
	}

	.panel-txt {
		width: calc(100% - 40px);
		margin: 5px 20px;
		background-color: #F5F5F5;
	}

	.panel-txt-txt {
		margin: 0 20px;
		color: #8c8c8c8c;
		background-color: #F5F5F5;
		height: 38px;
	}

	.panel-radio {
		display: flex;
	}

	.switch {
		transform: scale(0.7, 0.7);
	}

	.panel-img {
		height: 90px;
		padding: 0px 20px;
	}

	.btn {
		height: 44px;
		margin-top: 20px;
		background-color: #D23338;
		color: #FFFFFF;
	}
</style>