<template>
	<div>
		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content">
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>设备号</label>
						<input v-model="subForm.deviceNo" type="text" class="mui-input-clear" placeholder="请输入唯一设备号" style="width:50%">
						<span class="mui-badge vongi-badge-pink" @click="scanCode">扫码</span>
					</div>
					<div class="mui-input-row">
						<label>昵称</label>
						<input v-model="subForm.aliasName" type="text" class="mui-input-clear" placeholder="您对设备使用者的称呼">
					</div>
				</form>
			</div>
			<div class="vongi-btn vongi-login-btn">
				<button class="mui-btn mui-btn-pink" @click="save">
					保 存
				</button>
			</div>
		</div>
	</div>
</template>

<script>
	import * as API_Device from '@/apis/Common/device'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import NavMenu from '@/components/NavMenu.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as WxJsApi from '$project/utils/wxJsApi'
	export default {
		name: 'CommonDeviceAdd',
		components: {
			Common,
			Loading,
			TopHeader,
			NavMenu
		},
		data() {
			return {
				isLoading: false,

				subForm: {
					deviceNo: '',
					aliasName: ''
				},

				pageTitle: '关联新设备',
			}
		},
		created() {},
		methods: {
			//切换默认手环
			save() {
				this.isLoading = true;
				API_Device.addWatch(this.subForm).then(response => {
					this.isLoading = false;

					mui.toast('添加成功');
					this.$router.push({
						name: 'CommonDeviceList'
					})
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//微信扫二维码
			scanCode() {
				WxJsApi.scanQRCode(1).then(res => {
					this.subForm.deviceNo = res;
				}).catch(error => {
					mui.toast(error);
				})
			},

			asynCallBack() {},
		},
		mounted() {
			//获取微信配置
			WxJsApi.getWxConfig();
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				menu_list: 'menu_list',
				common_menu_list: 'common_menu_list',
				persion_home_model: 'persion_home_model'
			})
		}
	}
</script>

<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>
