<template>
	<!-- 设备台账 -->
	<view class="card_ledger">
		<uv-navbar title="设备台账" :placeholder="true" :titleStyle="{color:'#ffffff'}" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="leftClick"></uv-navbar>
		<view class="head_sub">
			<uv-subsection :list="listType" mode="button" :current="current" activeColor="#3c9cff"
				inactiveColor="#ffffff"
				custom-item-style="border-radius: 6rpx;background-color: rgba(97, 156, 255, .5);" bgColor="#1d345e"
				@change="change">
			</uv-subsection>
		</view>
		<view style="margin: 0rpx 20rpx;" v-if="workData.length > 0">
			<view class="item_order_work" v-for="(item,index) in workData" :key="index" @click="goLedgerDetails(item)">
				<uv-image class="logo_ledger" width="150rpx" height="150rpx" radius="10rpx" :src="item.img"
					mode="widthFix" errorIcon="bell-fill">
				</uv-image>
				<view style="flex: 1;">
					<view class="space_between">
						<view class="white_color">{{item.projectName}}</view>
						<view class="state_title" :style="{color:getOrderColor(item.orderStatus)}">
							{{getOrderTitle(item.orderStatus)}}
						</view>
					</view>
					<view class="white_color">设备编号: {{item.orderNo}}</view>
					<view class="white_color">所属部门: {{item.orderContent}}</view>
					<view class="white_color" style="margin-bottom: 0rpx;">提交时间: {{item.updateTime}}</view>
				</view>
			</view>
		</view>
		<view style="margin-top:30%;" v-else>
			<x-empty></x-empty>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onShow, onReady } from "@dcloudio/uni-app";
	onReady(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	})
	onShow(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	});
	const listType = ref([{
		id: '99',
		color: '#22c55e',
		name: '全部',
	}, {
		id: '0',
		color: '#22c55e',
		name: '在用',
	}, {
		id: '1',
		color: '#efc43f',
		name: '维修中',
	}, {
		id: '2',
		color: '#f26a6a',
		name: '报废'
	}, {
		id: '3',
		color: '#909399',
		name: '闲置'
	}])
	const workData : any = ref([{
		projectName: '工业机器人 KR210',
		orderNo: 'EK864467',
		orderStatus: 0,
		img: '/static/logo.png',
		orderContent: '自动化车间',
		updateTime: '2025-06-03 15:23:13',
	}, {
		projectName: '工业机器人 KR210',
		orderNo: 'EK864467',
		orderStatus: 1,
		img: '/static/logo.png',
		orderContent: '自动化车间',
		updateTime: '2025-06-03 15:23:13',
	}, {
		projectName: '工业机器人 KR210',
		orderNo: 'EK864467',
		orderStatus: 2,
		orderContent: '自动化车间',
		updateTime: '2025-06-03 15:23:13',
	}, {
		projectName: '工业机器人 KR210',
		orderNo: 'EK864467',
		orderStatus: 3,
		img: '',
		orderContent: '自动化车间',
		updateTime: '2025-06-03 15:23:13',
	}])
	const current = ref(0)
	// 选择
	function change(index : any) {
		current.value = index
	}
	// 订单状态汉化
	function getOrderColor(value : any) {
		let title = ''
		listType.value.forEach((item : any) => {
			if (item.id == value) {
				title = item.color
			}
		})
		return title
	}
	// 订单状态汉化
	function getOrderTitle(value : any) {
		let title = ''
		listType.value.forEach((item : any) => {
			if (item.id == value) {
				title = item.name
			}
		})
		return title
	}
	// 跳转设备详情
	function goLedgerDetails(params : any) {
		console.log(params, 2224)
		uni.navigateTo({
			url: '/pages/ledger/details',
		})
	}
	function leftClick() {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	.head_sub {
		padding: 20rpx;
	}

	.logo_ledger {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

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

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

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