<template>
	<view @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
		<mSearch :mode="2" button="inside" @search="search($event)" ></mSearch>
		
		<view class="cu-list menu-avatar margin-top" v-for="(item,index) in deviceList" :key="index">
			<view class="cu-item arrow">
				<view class="cu-avatar round lg" style="background-image:url(/static/humiture.png);"></view>
				<view class="content padding-tb-sm">
					<view>
						<text class="text-xl margin-left-xs">{{item.deviceNickName}}</text> 
					</view>
					<view class="flex">
						<text class="flex-sub iconfont icon-wendu text-blue text-xs">
							<text class="text-black">{{item.temp}}&#8451;</text>
						</text>
						<text class="flex-sub iconfont icon-shidu text-blue text-xs ">
							<text class="text-black">{{item.rh}}%</text>
						</text>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{item.at}}</view>
				</view>
			</view>
		</view>

		<uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="vertical" @trigger="trigger"></uni-fab>
	</view>
</template>

<script>
import refresh from '@/components/refresh/refresh.vue';
import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
import uniFab from '@/components/uni-fab/uni-fab.vue';
import { getDeviceList,getDeviceLatestUpMessage } from '@/api/device.js'; 
export default {
	components: {
		refresh,
		mSearch,
		uniFab
	},
	data() {
		return {
			deviceList: [],
			pattern: {
                color: '#7A7E83',
                backgroundColor: '#fff',
                selectedColor: '#007AFF',
                buttonColor:"#007AFF"
            },
			content: [
                {
                    iconPath: '/static/dtu.png',
                    selectedIconPath: '/static/dtu.png',
                    text: '添加终端',
                    active: false
                }
            ]
		};
	},
	onLoad(){
		this.fetchDeviceList();
	},
	methods: {
		fetchDeviceList(){
			getDeviceList().then(response => {
				this.deviceList = []
				if(response.data.list && response.data.list.length > 0){
					response.data.list.forEach(item => {
						getDeviceLatestUpMessage(item.productId,item.deviceName).then(res =>{
							if(res.data && res.data.data && res.data.data.app && res.data.data.app.userdata && res.data.data.app.userdata.payload){
								const userdata = new Buffer(res.data.data.app.userdata.payload, 'base64');
								try{
									const json = JSON.parse(userdata.toString());
									Object.assign(item, json);
									item.at = new Date(res.data.timestamp).format('yyyy-MM-dd hh:mm:ss')
									this.deviceList.push(item)
								}catch(e){
								}
							}
						})
					})
				}
			})
		},
		refreshStart(e) {
			this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e){
			this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			this.$refs.refresh.refreshEnd(e);
		},
		isRefresh(){
			setTimeout(() => {
				this.fetchDeviceList()
				uni.showToast({
				icon: 'success',
				title: '刷新成功'
				})
				this.$refs.refresh.endAfter() //刷新结束调用
			}, 1000)
		},
		search(val) {
			let tempList = [];
			this.deviceList.forEach((item) => {
				if(item.id.indexOf(val) !== -1){
					tempList.push(item);
				}
			})
			this.deviceList = tempList;
		},
		handleClickItem(item){
			uni.navigateTo({
				url: `detail/index?productId=${item.productId}&deviceName=${item.deviceName}`
			})
		},
		trigger(e) {
			console.log(e);
			this.content[e.index].active = !e.item.active;
			uni.scanCode({
			    onlyFromCamera: true,
			    success: function (res) {
					console.log(res)
			        console.log('条码类型：' + res.scanType);
			        console.log('条码内容：' + res.result);
			    }
			});
        }
	}
};
</script>

<style>
	.content {
		margin-top: 10upx;
		width: 100%;
	}
</style>
