<template>
	<view class="setting">
		 <radio-group @change="checkboxChange" class="checkBox">
			<label class="uni-list-cell" v-for="item in items" :key="item.value">
				<view>
					<radio :value="item.value" :checked="item.checked" />
				</view>
				<view>{{item.name}}环境</view>
			</label>
		</radio-group>
		
		<view @click="confirm" style="width: 600rpx; height: 100rpx;border-radius: 100rpx; background-color: #007AFF;color: #FFFFFF; line-height: 100rpx;display: flex;justify-content: center;margin-top: 50rpx;">确定</view>
	</view>
</template>

<script>
	import {
	    mapMutations  
	} from 'vuex'; 
	export default {
		data() {
			return {
				title: '选择服务',
				value:"7",
					themeColor: "",
				items: [
					{
						value: '1',
						name: 'dev'
					},
					{
						value: '2',
						name: 'test'
					},
					{
						value: '3',
						name: 'test2'
					},
					{
						value: '4',
						name: 'test3'
					},
					{
						value: '5',
						name: 'test4'
					},
					{
						value: '6',
						name: 'uat3'
					},
					{
						value: '7',
						name: 'uat'
					},
					{
						value: '8',
						name: 'product'
					}
				]
			};
		},
		mounted() {
		  let app = getApp();
		  this.themeColor = app.globalData.color1;
		  this.getEnv();	
		},
		 methods: {
			 back(){
				uni.navigateBack({
					delta:1
				});
			 },
			getEnv(){
			   let res = uni.getStorageSync('env')||"8"
			   for (var i = 0, lenI = this.items.length; i < lenI; ++i) {
					const item = this.items[i]
					if(res==item.value){
						this.value = item.value;
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
			   }
			},
			
			checkboxChange: function (e) {
				let	value = e.detail.value;
				for (var i = 0, lenI = this.items.length; i < lenI; ++i) {
					const item = this.items[i]
					if(value ==item.value){
						this.value = item.value
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
				
			},
			confirm(){
				uni.setStorageSync("env",this.value);
				uni.reLaunch({
					url:'../homePage/homePage'
				})
			}
		},
		components: {
			
		},
	}
</script>

<style lang="scss">
	.setting{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.checkBox{
			margin-left: 50rpx;
			margin-top: 200rpx;
		}
	}
  .uni-list-cell{
	  display: flex;
	  margin-bottom: 20rpx;
  }
</style>