<template>
	<view class="content indexCarList">
		<!-- 头部 -->
		<headerIndex :isArea="false" v-if="isShow"></headerIndex>
		<!-- 蓝牙提示区 -->
		<view v-if="userList.length">
			<view class="bleTips" v-if="islink==0">
				{{textLink}}
			</view>
			<view class="bleTips2 bleTips" v-else @click="openBluetoothAdapter">
				{{textLink}}
			</view>
		</view>

		<view class="notice" v-if="notices.length">
			<text>{{$t('index.notice')}}</text>
			<!--  -->
			<swiper class="swiper" vertical="true" autoplay="true">
				<swiper-item v-for="(item,index) in notices" :key="index" @click="$tools.NewsPtype(item)">
					<view class='overflow'>{{item.title}}</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 工具区 -->
		<view class="tools_l">
			<view class="list" @click="handleTool('/pageTwo/home/bmi')">
				<image src="../../static/q4.png"></image>
				<view class="text">{{$t("common.titleBmi")}}</view>
			</view>
			<view class="list" @click="handleTool('/pageTwo/home/inheritHeighet')">
				<image src="../../static/q6.png"></image>
				<view class="text">{{$t("common.titleInheritHeighet")}}</view>
			</view>
			<view class="list" @click="handleTool('/pageTwo/home/childPK')" v-if="Number(userInfo.age)<=16">
				<image src="../../static/q11.png"></image>
				<view class="text">{{$t("common.titleIncrement")}}</view>
			</view>
			<view class="list" @click="handleTool('/pageTwo/history/history?acd_id=2')" v-if="Number(userInfo.age)>16">
				<image src="../../static/q8.png"></image>
				<view class="text">{{$t("common.titleHistory")}}</view>
			</view>
			<view class="list" @click="handleTool('/pageTwo/compk/contrast?acd_id=2')">
				<image src="../../static/q3.png"></image>
				<view class="text">{{$t("common.titleContrast")}}</view>
			</view>
			<view class="list" @click="handleTool('/pages/body/body?acd_id=2')">
				<image src="../../static/q5.png"></image>
				<view class="text">{{$t("common.titleBody")}}</view>
			</view>
			<view class="list" @click="handleTool()">
				<image src="../../static/q7.png"></image>
				<view class="text">{{$t("index.manualRecording")}}</view>
			</view>

		</view>

		<!-- 身体数据 -->
		<view class="report">
			<view class="bold mt-10 ml-10 title" v-if="info&&info.top_list.length">
				<view>{{$t('index.body')}}</view>
				<view class="time">{{info?info.record_time:''}}</view>
			</view>
			<view class="box" v-if="info&&info.top_list.length" v-for="(item,index) in info.top_list">
				<view class="data data2" :style="{height:(item.difference_val?'60px':'auto')}">
					<view class="left" :class="[item.difference_val?'':'left2']">
						<view class="name bold">{{item.name}}</view>
						<view>
							<text class="bold mr-5"
								:class="[item.difference_val?'size26':'size14']">{{item.value}}</text>{{item.unit}}
						</view>
					</view>
					<view class="right" v-if="item.difference_val">
						<view style="width: 100%;">{{$t("index.ideal")}}{{item.name}}</view>
						<view class="lixiang">
							<view class="mr-10"><text class="mr-5">{{item.standard_val}}</text>{{item.unit}}</view>
							<view>
								<icon class="t-icon t-icon-shang" v-if="Number(item.difference_val)>0"></icon>
								<icon class="t-icon t-icon-xia" v-if="Number(item.difference_val)<0"></icon>
								{{item.difference_val}}
							</view>
						</view>
					</view>
				</view>
				<view class="myinfoPage">
					<view class="desc">
						<view v-if="item.desc" class="ming size12">{{item.desc}}</view>
						<view :class="[item.list.length?'statuevue':'']" v-if="item.list">
							<view class="bi">
								<view :style="'left:'+item.offset+'%'" class="peobox">
									<view class="xx"></view>
								</view>
								<view class="item" v-for="(ite , ind) in item.list" :key="ind"
									:style="{backgroundColor:ite.color}">
									<view class="span1">{{ite.text}}</view>
									<view class="span" v-if="ind<item.list.length-1">{{ite.max_val}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="item2">
					<view class="item2_data" :style="userInfo.stage=='婴儿'?'width:25%':'width:33%'"
						v-for="(item,index) in info.top_list" @click="handleToggleTop(item,index)">
						<view class="data" :class="[activeHeight==index?'activeHeight':'']">
							<view class="c666 mb-5">{{item.name}}</view>
							<view><text>{{item.value}}</text>{{item.unit}}</view>
						</view>
					</view>
					<view class="myinfoPage" v-if="infoListTop">
						<view class="desc">
							<view v-if="infoListTop.desc" class="ming">{{infoListTop.desc}}</view>
							<view :class="[infoListTop.list.length?'statuevue':'']" v-if="infoListTop.list">
								<view class="bi">
									<view :style="'left:'+infoListTop.offset+'%'" class="peobox">
										<view class="xx"></view>
									</view>
									<view class="item" v-for="(ite , ind) in infoListTop.list" :key="ind"
										:style="{backgroundColor:ite.color}">
										<view class="span1">{{ite.text}}</view>
										<view class="span" v-if="ind<infoListTop.list.length-1">{{ite.max_val}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			<view class="nolist" v-if="!info">
				<image src="../../static/none.png"></image>
				<text>{{$t('index.none')}}</text>
			</view>
			<view class="box2" v-if="info&&info.body_type_value">
				<view>{{$t('index.BodyScore')}}：{{info?info.score_value:0}}{{$t("index.number")}}</view>
				<view>{{$t('index.BodyType')}}：{{info?info.body_type_value:$t("index.no")}}</view>
			</view>
			<view class="bold mt-10 ml-10" v-if="info&&info.bottom_list.length">{{$t('index.otherData')}}</view>
			<view class="ml-10 mr-10" v-if="info&&info.bottom_list.length">
				<view class="myinfoPage">
					<view class="box1">
						<uni-collapse accordion>
							<uni-collapse-item class="list" v-for="(item,index) in info.bottom_list" :key="index">
								<template v-slot:title>
									<uni-list-item class="block">
										<view class="name">
											<icon class="t-icon iconfont" :class="'t-icon-'+item.key_name">
											</icon>
											<text>{{item.name}}</text>
										</view>
										<view class="val" v-if="item.key_name=='key_name'"> - </view>
										<view class="val" v-else>{{item.value?item.value:'0'}}{{item.unit}}
										</view>
										<view class="level">
											<view class="btnf"
												:style="{backgroundColor:(item.standard=='异常'?'#FFF':item.color)}"
												:class="[item.standard=='异常'?'btnC':'']">
												{{item.standard=='异常'?'-':item.standard}}
											</view>
										</view>
									</uni-list-item>
								</template>
								<view class="desc">
									<view v-if="item.desc" class="ming size12">{{item.desc}}</view>
									<view :class="[item.list.length?'statuevue':'']" v-if="item.list">
										<view class="bi" v-if="item.key_name!='kcal'">
											<view :style="'left:'+item.offset+'%'" class="peobox">
												<view class="xx"></view>
											</view>
											<view class="item" v-for="(ite , ind) in item.list" :key="ind"
												:style="{backgroundColor:ite.color}">
												<view class="span1">{{ite.text}}</view>
												<view class="span" v-if="ind<item.list.length-1">{{ite.max_val}}
												</view>
											</view>
										</view>
										<view v-else>
											<view class="kcalClass" v-if="item.list&&item.list.length">
												{{$t("index.Standard")}}:{{item.list[0].max_val}}kcal
											</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>
				</view>
			</view>
			<!-- 数据参考 -->
			<view class="tips c999 ml-15 mb-15" v-if="info.literature.length">
				<text>*{{$t("index.dataReference")}}：</text>
				<text v-for="(item,index) in info.literature" :key="index">
					{{item}}
				</text>
			</view>
			<view class="tips2 ml-10" v-if="info.bottom_list">
				<uni-icons type="info-filled" color="red"></uni-icons>
				{{$t("index.referencetips")}}
			</view>
			<!-- banner -->
			<view class="f_banner" v-if="banner.length">
				<swiper class="swiper" indicator-dots="true" autoplay="true">
					<swiper-item v-for="(image, index) in banner" :key="index" @click="$tools.NewsPtype(image)">
						<image :src="image.pic" mode="aspectFill" />
					</swiper-item>
				</swiper>
			</view>

			<!-- 成长建议 -->
			<view v-if="cplist.sleeplist.length||cplist.nutritionlist.length" class="ml-10 mr-10">
				<view class="bold mt-10">{{$t("index.growthAdvice")}}</view>
				<view class="jianyi_box">
					<view class="jianyi">
						<view @click="proposalnd=1" :class="{active:proposalnd==1}">
							<image src="../../static/icon4.png"></image>
							<text>{{$t("index.nutrition")}}</text>
						</view>
						<view @click="proposalnd=2" :class="{active:proposalnd==2}">
							<image src="../../static/icon1.png"></image>
							<text>{{$t("index.sleep")}}</text>
						</view>
						<view @click="proposalnd=3" :class="{active:proposalnd==3}">
							<image src="../../static/icon3.png"></image>
							<text>{{$t("index.movement")}}</text>
						</view>
						<view @click="proposalnd=4" :class="{active:proposalnd==4}">
							<image src="../../static/icon2.png"></image>
							<text>{{$t("index.emotion")}}</text>
						</view>
					</view>
					<view>
						<view v-if="proposalnd==1&&cplist.nutritionlist.length" class="jianyi-con">
							<text v-for="(item,index) in cplist.nutritionlist" :key="index">{{item}}</text>
						</view>
						<view v-if="proposalnd==2&&cplist.sleeplist.length" class="jianyi-con">
							<text v-for="(item,index) in cplist.sleeplist" :key="index">{{item}}</text>
						</view>
						<view v-if="proposalnd==3&&cplist.sportlist.length" class="jianyi-con">
							<text v-for="(item,index) in cplist.sportlist" :key="index">{{item}}</text>
						</view>
						<view v-if="proposalnd==4&&cplist.moodlist.length" class="jianyi-con">
							<text v-for="(item,index) in cplist.moodlist" :key="index">{{item}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 弹框广告 -->
		<view class="wrapper" v-if="isCoupon">
			<view class="bg" @click="isCoupon=false">
				<view class="edit">
					<swiper class="text" autoplay="true">
						<swiper-item v-for="(ite,ind) in pop" :key="ind" @click="$tools.NewsPtype(ite)">
							<image :src="ite.pic" mode="aspectFill" />
							<view class="bold mt-5">{{ite.title}}</view>
						</swiper-item>
					</swiper>
					<uni-icons type="clear" @click="isCoupon=false" size="40" class="clear"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 手动 -->
		<record :rtype="rtype"></record>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	let myTime;
	import headerIndex from "@/element/headerIndex.vue"
	import record from '@/element/manuallyAdd/weightAdd.vue';
	import {
		I18nT
	} from "vue-i18n";
	export default {
		data() {
			return {
				rtype: 2,
				transition: 1.6,
				isShow: true,
				infoListTop: {},
				activeHeight: 0,
				deviceName: "",
				deviceId: "",
				serviceId: "",
				write: "",
				notify: "",
				devicesList: [],
				islink: 0, //-1重新连接
				textLink: "",
				proposalnd: 1,
				unit: "",
				language: "",
			}
		},
		components: {
			record,
			headerIndex
		},
		computed: {
			...mapState(["user", "familayList", 'MeasureResult', "bannerCon", "isConnected", "isBluetoothTyle"]),
			userInfo() {
				return this.user
			},
			userList() {
				return this.familayList
			},
			cplist() {
				return this.MeasureResult.cplist
			},
			info() {
				let that = this
				that.infoListTop = that.MeasureResult.top_list[0] ? that.MeasureResult.top_list[0] : {}
				that.activeHeight = 0
				return that.MeasureResult
			},
			isCoupon() {
				return this.bannerCon.isCoupon
			},
			notices() {
				return this.bannerCon.notices
			},
			banner() {
				return this.bannerCon.banner
			},
			pop() {
				return this.bannerCon.pop
			},

		},
		onLoad() {
			let that = this
			uni.onBluetoothAdapterStateChange(function(res) {
				that.$store.commit("changeBluetooth", res.available);
			})
			if (uni.getStorageSync('token')) {
				that.openBluetoothAdapter()
			}
			that.onBLEConnectionStateChange()
		},
		onPullDownRefresh() {
			let that = this
			that.isShow = true
			that.onBLEConnectionStateChange()
			uni.stopPullDownRefresh()
		},
		watch: {
			isConnected: function() {
				let that = this
				if (!that.isConnected) {
					that.textLink = that.$t("linkBluetooth.startlinkBluetooth")
					that.islink = -1
				}
			},
			isBluetoothTyle: function() {
				let that = this
				if (!that.isBluetoothTyle) {
					that.textLink = that.$t("linkBluetooth.startlinkBluetooth")
					that.islink = -1
				}
			}
		},
		onShow() {
			let that = this
			that.language = uni.getStorageSync('language')
			console.log("onshow首页", that.language)
			uni.onBluetoothAdapterStateChange(function(res) {
				that.$store.commit("changeBluetooth", res.available);
			})
			if (uni.getStorageSync('isBle') && uni.getStorageSync('isBle') == true) {
				that.openBluetoothAdapter()
				uni.setStorageSync('isBle', false)
			}
		},
		methods: {
			detail(ite) {
				uni.navigateTo({
					url: "/pageTwo/webview/webview?id=" + ite.id + '&url=' + ite.jump_url
				})
			},
			// 设置数据页卡片
			handleCard() {
				uni.navigateTo({
					url: "/pageTwo/cardList/card"
				})
			},
			handleTool(path) {
				let that = this
				console.log("1111", path)
				if (path == "" || path == undefined) {
					that.handlerRecord(2)
				} else {
					uni.navigateTo({
						url: path
					})
				}
			},
			// 报告页
			handlerReport(item) {
				console.log("item", item)
				let device = item.device_determine ? 1 : 0
				uni.navigateTo({
					url: item.page_url_report + "?acd_id=" + item.acd_id + '&device=' + device
				})
			},
			// 手动添加
			handlerRecord() {
				this.$store.commit('changeRecord', true)
			},
			// 添加成员
			handleAddUser() {
				uni.navigateTo({
					url: "/pageTwo/my/userInfo"
				})
			},
			handleToggleTop(item, index) {
				this.infoListTop = item
				this.activeHeight = index
			},
			navTo(url) {
				console.log("url", url)

				uni.navigateTo({
					url: url
				})
			},
			// 初始化蓝牙
			openBluetoothAdapter() {
				let that = this
				that.devicesList = []
				uni.openBluetoothAdapter({
					success: e => {
						that.islink = 0
						that.textLink = that.$t("linkBluetooth.searchBluetooth")
						console.log("蓝牙初始化成功")
						that.startBluetoothDeviceDiscovery()
					},
					fail: err => {
						that.islink = -1
						that.textLink = that.$tools.getBluetoothAdapter(err)
						console.log('初始化蓝牙失败:' + err);
						return
					}
				});
			},
			// 开始搜寻附近的蓝牙外围设备
			startBluetoothDeviceDiscovery() {
				let that = this
				uni.startBluetoothDevicesDiscovery({
					allowDuplicatesKey: true, //是否允许重复上报同一设备
					interval: 200,
					success: res => {
						console.log("搜索设备")
						that.onBluetoothDeviceFound();
					},
					fail: res => {}
				});
			},
			/**
			 * 发现外围设备
			 */
			onBluetoothDeviceFound() {
				var that = this;
				uni.onBluetoothDeviceFound(res => {
					res.devices.forEach(device => {
						// console.log("name", device.name)
						if (!device.name && !device.localName) {
							device.advertisData = device.advertisData ? device.advertisData : ''
							let value = that.$tools.ab2hex(device.advertisData, "")
							let type = value.substring(0, 2)
							let id = value.substring(12, 16)
							if (type.toLowerCase() == 'c0') {
								console.log(value, "id", id)
								clearTimeout(myTime);
								that.deviceName = "c00002"
								device.deviceId = device.deviceId
								that.handleDevice(device)
							}
							return
						}
						if (device.name.indexOf("G02") != -1) {
							clearTimeout(myTime);
							that.deviceId = device.deviceId;
							that.$Bluetooth.stopBluetoothDevicesDiscovery()
							that.handleDevice(device)
							return
						}
						if (device.name.indexOf("Chipsea_BLE") != -1) {
							clearTimeout(myTime);
							that.deviceId = device.deviceId;
							that.$Bluetooth.stopBluetoothDevicesDiscovery()
							that.handleDevice(device)
							return
						}
						if (device.name.indexOf('YPC') != -1) {
							clearTimeout(myTime);
							device.deviceId = device.deviceId
							that.$Bluetooth.stopBluetoothDevicesDiscovery()
							that.handleDevice(device)
							return
						}
						if (device.name.toLowerCase().indexOf('da') != -1) {
							clearTimeout(myTime);
							device.deviceId = device.deviceId
							that.handleDevice(device)
							return
						}
						if (device.name.toLowerCase().indexOf('pcl') != -1 || (device.localName && device
								.localName.toLowerCase().indexOf('pcl') != -1)) {
							clearTimeout(myTime);
							that.deviceName = device.name
							that.deviceId = device.deviceId;
							that.handleDevice(device)
							return
						}
					})
				});
				that.handleMyTime()
			},
			handleDevice(device) {
				let that = this
				const foundDevices = that.devicesList
				const idx = that.$tools.inArray(foundDevices, "deviceId", device.deviceId)
				console.log("1111111", device.name)
				if (idx === -1) {
					// 体脂秤
					if (device.name.toLowerCase().indexOf("pcl") != -1) {
						that.devicesList.push(device)
						uni.navigateTo({
							url: "/pageTwo/devices/PCL?deviceId=" + device.deviceId
						})
						return
					}
					// 思迈德协议，假阻抗，体脂秤
					if (that.deviceName == "c00002") {
						that.devicesList.push(device)
						uni.navigateTo({
							url: "/pageTwo/devices/PCL22?deviceId=" + device.deviceId
						})
						return
					}
					// 思迈德协议，假阻抗，体脂秤
					if (device.name.toLowerCase() == "da") {
						that.devicesList.push(device)
						uni.navigateTo({
							url: "/pageTwo/devices/PCL22S?deviceId=" + device.deviceId
						})
						return
					}
					// 身高仪
					if (device.name.indexOf("G02") != -1) {
						that.devicesList.push(device)
						uni.navigateTo({
							url: "/pageTwo/devices/G02?deviceId=" + device.deviceId
						})
						return
					}
					// 跳绳
					if (device.name.indexOf("YPC") != -1) {
						that.devicesList.push(device)
						uni.navigateTo({
							url: "/pages/skiping/skip?deviceId=" + device.deviceId
						})
						return
					}
					// 婴儿秤
					if (device.name.indexOf("Chipsea_BLE") != -1) {
						that.devicesList.push(device)
						uni.navigateTo({
							url: "/pageTwo/devices/B20?deviceId=" + device.deviceId
						})
						return
					}

				}
			},
			handleMyTime() {
				var that = this;
				myTime = setTimeout(function() {
					if (!that.devicesList.length) {
						that.islink = -1
						that.textLink = that.$t("linkBluetooth.Nodevicefound")
						clearTimeout(myTime);
						that.$Bluetooth.stopBluetoothDevicesDiscovery()
					}
				}, 50000);
			},
			// 从广播秤返回后更改蓝牙状态
			getBlereload() {
				let that = this
				that.islink = -1
				that.textLink = that.$t("linkBluetooth.remeasure")
			},
			// 监听蓝牙连接状态
			onBLEConnectionStateChange() {
				let that = this
				uni.onBLEConnectionStateChange(function(res) {
					console.log("监听蓝牙连接状态", res.connected)
					that.$store.commit("changeConnected", res.connected);
				})
			},
			/**
			 * 断开蓝牙模块
			 */
			closeBluetoothAdapter() {
				let that = this;
				uni.closeBluetoothAdapter({
					success: res => {
						console.log('蓝牙模块关闭成功');
					}
				})
			},
			/**
			 * 断开蓝牙连接
			 */
			closeBLEConnection() {
				var that = this;
				uni.closeBLEConnection({
					deviceId: that.deviceId,
					success: res => {
						console.log('断开蓝牙连接成功');
						that.$store.commit("changeConnected", false);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/body.scss";

	/deep/.header {
		width: 100%;

		.top {
			color: #fff;
			background: $maincolor ;
		}
	}

	/deep/.cityList {
		margin-top: -36px;
	}

	/deep/.box {
		padding: 10px 10px 1px !important;
	}

	.list {
		margin-top: 0rpx;
		padding: 0;
	}

	.blueBtn {
		color: #fff;
		padding: 5px !important;
		background-color: #2397f1;
	}

	.orangeBtn {
		color: #fff;
		padding: 5px !important;
		background-color: #FF974C;
	}

	.border {
		border-bottom: 1px solid #f7f7f7;
	}

	.target {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 99;

		.bold {
			width: 45%;
			text-align: left;
		}

		.btnGroup {
			width: 50%;
			display: flex;
			justify-content: space-between;
		}
	}

	.item {
		position: relative;
		z-index: 99;
	}

	.size32 {
		font-size: 80rpx;
	}

	.card {
		position: relative;
		overflow: hidden;
	}


	.boxBg {
		width: 250rpx;
		height: 215rpx;
		position: absolute;
		right: 15px;
		z-index: 9;
		bottom: -50rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		min-height: 100vh;
		padding-bottom: 15px;
		background-color: #f7f7f7;
	}

	.bleTips {
		height: 35px;
		line-height: 35px;
		margin: 10px;
		background: #fff;
		border-radius: 10px;
		text-align: center;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;
	}

	.bleTips2 {
		background: #fea606;
		color: #fff;
	}

	// 工具
	.tools_l {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-top: 15px;
		background: #fff;
		justify-content: space-between;

		.list {
			width: 33%;
			text-align: center;
			font-size: 14px;
			margin-bottom: 20px;

			.text {
				margin-top: 5px;
				color: #666;
				font-size: 14px;
			}
		}

		image {
			width: 35px;
			height: 35px;
		}
	}

	.activeHeight {
		padding-bottom: 10px;
		border-bottom: 2px solid $maincolor;
	}

	.title {
		display: flex;
		margin-right: 10px;
		justify-content: space-between;
	}

	.data2 {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		// height: 60px;
		line-height: 30px;

		.name {
			width: 100%;
		}

		.left2 {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.name {
				width: 50%;
			}
		}

		.right {
			width: 50%;
			display: flex;
			flex-wrap: wrap;
			font-size: 14px;
			text-align: right;

			.lixiang {
				width: 100%;
				display: flex;
				align-items: baseline;
				justify-content: flex-end;
				// justify-content: space-between;

				view {
					display: flex;
					align-items: baseline;
				}

				text {
					color: $maincolor;
					font-size: 22px;
					font-weight: bold;
				}
			}
		}
	}
</style>