<template>
	<view class="home_box_card">
		<uv-navbar title="IBMS楼宇集成系统" :placeholder="true" :titleStyle="{color:'#ffffff'}" bgColor="#1d345e"
			leftIcon=""></uv-navbar>
		<view class="text-area">
			<view class="area_first" v-for="(item,index) in list" :key="index" @click="goSubpage(item)">
				<image class="logo_first" :src="'/static/icon/'+item.value+'.png'" mode="widthFix" />
				<view class="title_first">{{item.title}}</view>
			</view>
		</view>
		<view class="card_configuration" @click="goConfiguration">
			<view style="display: flex;align-items: center;">
				<uv-icon name="grid" color="#4189db" size="28"></uv-icon>
				<view style="color:#fff;font-size: 28rpx;margin-left: 10rpx;">设备监控中心</view>
			</view>
			<uv-icon name="arrow-right" color="#ffffff" size="18"></uv-icon>
		</view>
		<view class="alarms_box">
			<view class="alarms_headTitle">待处理工单</view>
			<view style="width: calc(100% - 40rpx);margin: 0rpx 20rpx;" v-if="ticketsList.length > 0">
				<view class="item_tickets" v-for="(item,index) in ticketsList" :key="index"
					@click="goWorkDetails(item)">
					<view class="space_between">
						<view class="white_color">{{item.orderNo}}</view>
						<view class="state_title" :style="{color:'#409EFF'}">
							{{getTypeTick(workTypeData)}}
						</view>
					</view>
					<view class="white_color">类型: {{item.projectName}}</view>
					<view class="white_color">地点: {{item.orderContent}}</view>
					<view class="white_color" v-if="item.describe">描述: {{item.describe}}</view>
					<view class="white_color">
						联系人:
						<span>{{item.updateBy}}</span>
						<span class="tickets_phone_title">{{item.phone}}</span>
					</view>
					<view class="white_color">提交时间: {{item.updateTime}}</view>
				</view>
			</view>
			<view style="margin-bottom:30rpx" v-else>
				<x-empty></x-empty>
			</view>
		</view>
		<!-- <view class="alarms_box">
			<view class="alarms_headTitle">实时报警</view>
			<view style="margin-bottom:30rpx">
				<x-empty></x-empty>
			</view>
		</view> -->
	</view>
</template>

<script setup lang="ts">
	import { setLocalStorage } from "@/utils/cache";
	import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
	import { ref, watch } from 'vue'
	const props = defineProps({
		ticketsData: {
			type: Array,
			default: () => ([])
		},
		workTypeData: {
			type: Array,
			default: () => ([])
		},
	});
	const ticketsList : any = ref([])
	const list = ref([{
		title: '报警管理',
		value: 'alarms'
	}, {
		title: '监控管理',
		value: 'monitoring'
	}, {
		title: '故障报修',
		value: 'repairs'
	}, {
		title: '工单处理',
		value: 'tickets'
	}, {
		title: '巡检管理',
		value: 'routing'
	}, {
		title: '设备台账',
		value: 'ledger'
	}])
	watch(() => props.ticketsData, (newVal : any) => {
		if (newVal) {
			ticketsList.value = newVal
		}
	},
		{ deep: true, immediate: true }
	);
	// 工单状态
	function getTypeTick(value : any) {
		let title = ''
		value.forEach((item : any) => {
			if (item.icon == "underway") {
				title = item.title
			}
		})
		return title
	}
	// 跳转详情
	function goWorkDetails(params : any) {
		setLocalStorage("ticketsDetails", params);
		uni.navigateTo({
			url: '/pages/tickets/details',
		})
	}
	// 跳转设备组态
	function goConfiguration() {
		uni.navigateTo({
			url: '/pages/configuration/index',
		})
	}
	function goSubpage(params : any) {
		let pathUrl = `/pages/${params.value}/index`
		uni.navigateTo({
			url: pathUrl
		});
	}
</script>

<style>
	.home_box_card {
		width: calc(100% - 60rpx);
		margin: 30rpx;
	}

	.text-area {
		padding: 10rpx 0rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		background-color: rgba(85, 110, 143, .3);
		/* background-image: linear-gradient(to left, rgba(85, 110, 143, .3) 0%, rgba(65, 81, 121, 1) 100%); */
		border-radius: 10rpx;
	}

	.area_first {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 30%;
		margin: 18rpx 0rpx;
	}

	.logo_first {
		width: 60rpx;
		height: 60rpx;
	}

	.title_first {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #ffffff;
	}

	.card_configuration {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 0rpx 20rpx;
		height: 90rpx;
		background-color: rgba(85, 110, 143, .3);
		border-radius: 10rpx;
	}

	.alarms_box {
		/* padding: 30rpx 0rpx; */
		background-color: rgba(85, 110, 143, .3);
		/* background-image: linear-gradient(to top, rgba(85, 110, 143, .3) 0%, rgba(85, 110, 143, 1) 100%); */
		color: #fff;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		border-top: 2rpx solid rgba(0, 255, 240, .6);
		border-radius: 10rpx;
	}

	.alarms_headTitle {
		width: 100%;
		padding: 20rpx 0rpx;
		margin-bottom: 30rpx;
		font-size: 28rpx;
		text-align: center;
		border-bottom: 2rpx solid rgba(191, 191, 191, .2);
	}

	.item_tickets {
		padding: 25rpx;
		background-color: rgba(85, 110, 143, .3);
		margin-bottom: 30rpx;
		border-radius: 10rpx;
	}

	.white_color {
		color: #fff;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.tickets_phone_title {
		padding-left: 20rpx;
	}

	.state_title {
		color: #1af0f7;
		font-size: 28rpx;
	}
</style>