<template>
	<view class="content indexCarList">
		<!-- 头部 -->
		<headerIndex :isArea="false"></headerIndex>
		<!-- 卡片数据 -->
		<view class="radius50"></view>
		<view class="list" v-if="user">
			<view v-for="(item,index) in user.card_data_list">
				<!-- 标题 -->
				<view class="card box" @click="handlerReport(item)" :style="{'backgroundColor':item.background_color}">
					<view class="boxBg">
						<image :src="item.background_pic"></image>
					</view>
					<view class="title border">
						<view class="name2">{{item.card_name}}</view>
						<view class="time">
							{{item.record_time}}
							<uni-icons type="right" size="20" v-if="item.inside_data[0].value"></uni-icons>
						</view>
					</view>
					<view class="target item">
						<view class="bold size16 c666" v-if="item.acd_id!=2">本次数据</view>
						<view class="bold size14" v-else>
							<text class="size32">{{item.inside_data[1].value}}</text>
							{{item.inside_data[1].unit}}
						</view>
						<view class="btnGroup">
							<view class="blueBtn" v-if="item.acd_id==2" @click.stop
								@click="$Bluetooth.handleDevicesMac(item.device_determine,item.acd_id)">蓝牙连接</view>
							<view class="blueBtn" v-else-if="item.acd_id==6">蓝牙连接</view>
							<view v-else></view>
							<view class="orangeBtn" @click="handlerRecord(item.acd_id)" @click.stop>手动记录</view>
						</view>
					</view>
					<!-- 内容 -->
					<view class="item title"
						:style="{'justifyContent':item.inside_data.length>2?'space-between':'center'}">
						<view v-for="(ite,ind) in item.inside_data" :class="[item.inside_data.length>3?'item2':'']">
							<view class="weight "><text>{{ite.value?ite.value:'-'}}</text>{{ite.unit}}</view>
							<view class="name mt-5" v-if="item.acd_id!=8">{{ite.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 设置数据卡片 -->
		<view class="setcard" @click="handleCard" v-if="userList.length">
			设置数据页卡片
		</view>
		<view class="nolist" v-else @click="handleAddUser" style="margin-top: 150px;">
			<image src="../../static/none.png"></image>
			<text>请先添加成员</text>
		</view>
		<!-- 手动 -->
		<record :rtype="rtype"></record>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import headerIndex from "@/element/headerIndex.vue"
	import record from '@/element/manuallyAdd/record.vue';
	export default {
		data() {
			return {
				rtype: 0,
				transition: 1.6
			}
		},
		components: {
			record,
			headerIndex
		},
		computed: {
			...mapState(["user", "familayList"]),
			userList() {
				return this.familayList
			},
		},
		onLoad(options) {
			let that = this
			console.log("首页options", options)
			if (options && options.type == 1) {
				that.handleUserList()
			}
		},
		onShow() {
			let that = this
			that.$Bluetooth.stopBluetoothDevicesDiscovery()
			uni.hideLoading()
		},
		onPullDownRefresh() {
			let that = this
			that.$store.dispatch('getUserInfo', {
				aud_id: uni.getStorageSync('userid')
			})
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		methods: {
			// 
			handlelenver(value) {
				let that = this
				let number = 0
				let length = that.list.length
				number = value / (that.list[0].max_val - that.list[length - 1].min_val) * 100
				return number.toFixed(0)
			},
			// 成员列表
			handleUserList() {
				let that = this
				that.$model.getUserList({
					type: 2
				}).then(res => {
					console.log("用户列表", res, uni.getStorageSync('userid'))
					if (res.code != 0) {
						that.$tools.msg(res.msg)
						return
					}
					that.$store.commit('changeFamilay', res.data)
					if (res.data.length) {
						that.$store.dispatch('getUserInfo', {
							aud_id: uni.getStorageSync('userid') ? uni.getStorageSync('userid') : res.data[
								0].id
						})
						that.$store.dispatch("getCardList", {
							aud_id: uni.getStorageSync('userid') ? uni.getStorageSync('userid') : res.data[
								0].id
						})
						that.handleLabelList(res.data[0].id)
						that.handlePublicRecord(res.data[0].id)
						that.handleCityList()
					}
				}).catch(err => {})
			},
			// 公共卡片列表
			handleLabelList(id) {
				let that = this
				that.$model.getLabelList({
					aud_id: uni.getStorageSync('userid') ? uni.getStorageSync('userid') : id
				}).then(res => {
					console.log("公共卡片项目", res)
					if (res.code == 0) {
						that.$store.commit('changeLabelList', res.data)
					}
				})
			},
			// 地区
			handleCityList() {
				let that = this
				that.$model.getGradeList({}).then((res) => {
					console.log("|全部地区", res.data)
					if (res.code != 0) return
					that.$store.commit('changeCityList', res.data.area_list)
					that.$store.commit('changeGradeList', res.data.grade_list)
					that.$store.commit('changeIdentityList', res.data.identity_list)
				})
			},
			// 公共手动记录内容
			handlePublicRecord(id) {
				let that = this
				that.$model.getPublicRecord({
					aud_id: uni.getStorageSync('userid') ? uni.getStorageSync('userid') : id
				}).then(res => {
					console.log("公共手动记录", res)
					if (res.code == 0) {
						that.$store.commit('changePublicRecord', res.data)
					}
				})
			},
			// 设置数据页卡片
			handleCard() {
				uni.navigateTo({
					url: "/pageTwo/cardList/card"
				})
			},
			// 报告页
			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(id) {
				this.rtype = id
				this.$store.commit('changeRecord', true)
			},
			// 添加成员
			handleAddUser() {
				uni.navigateTo({
					url: "/pageTwo/my/userInfo"
				})
			},
			navTo(url) {
				console.log("url", url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.header {
		width: 100%;

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

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

	.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;
	}
</style>