<template>
	<van-pull-refresh v-model="loading" @refresh="onRefresh">
		<div class="equipment">
			<van-list
				v-model:loading="loading"
				:finished="finished"
				finished-text="没有更多了"
				@load="onLoad"
			>
				<ul>
					<li @click="toDtl(i)" v-for="i in listData" :key="i.id">
						<div class="title">{{ i.deviceName }}</div>
						<div class="content">
							<div class="item">
								<div class="label">型号</div>
								<div class="value">{{ i.productName}}</div>
							</div>
							<div class="item">
								<div class="label">今日产量</div>
								<div class="value">0</div>
							</div>
						</div>
						<div class="foot-tag">
							<div class="tag" v-if="i.other.ebc">
								<div class="icon">
									<van-icon name="location-o" />
								</div>
								<div class="text">EBC</div>
							</div>
							<div class="tag" v-if="i.other.jiaka">
								<div class="icon">
									<van-icon name="location-o" />
								</div>
								<div class="text">贾卡</div>
							</div> 
							<div class="tag"  v-if="i.other.hengyi">
								<div class="icon">
									<van-icon name="location-o" />
								</div>
								<div class="text">横移</div>
							</div>
						</div>
						<div class="type stop">运行</div>
					</li>
				</ul>
			</van-list>
		</div>
	</van-pull-refresh>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
const loading = ref(false)
const finished = ref(false);
const proxy = getCurrentInstance().proxy
const listData = ref([])
const onRefresh = () => {
	setTimeout(() => {
		loading.value = false
	}, 500)
}
const onLoad = () => {
    setTimeout(() => {
        loading.value = false
        finished.value = true
    }, 500)
}

const toDtl = (row) => {
	proxy.$router.push('/main/warpKnitting/' + row.deviceId)
}
const getList = () => {
	proxy.post('/tdaDevice/page').then(res => {
		listData.value = res.data.rows
		console.log(res)
	})
}
getList()
</script>

<style lang="scss" scoped>
.equipment {
	background-color: #f1f1f1;
	padding: 12px;
	color: #333;
	min-height: 80vh;
	font-weight: 400;
	ul {
		li {
			background: #fff;
			border-radius: 8px;
			margin-top: 12px;
			padding: 0 12px;
			position: relative;
			.type {
				position: absolute;
				top: 0;
				right: 0;
				background: #ff8c33;
				color: #fff;
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				border-radius: 0 8px 0 8px;
				width: 60px;
				text-align: center;
			}
			//成功
			.success {
				background: #3fbf31;
				color: #fff;
			}
			.error {
				background: #f6514f;
				color: #fff;
			}
			.stop {
				background: #dddddd;
				color: #999999;
			}
			.title {
				font-size: 16px;
				font-weight: bold;
				height: 48px;
				line-height: 48px;
			}
			.content {
				display: flex;
				.item {
					flex: 1;
					.label {
						font-size: 12px;
						color: #999;
						margin-bottom: 8px;
					}
					.value {
						font-size: 14px;
						color: #333;
					}
				}
			}
			.foot-tag {
				display: flex;
				margin-top: 12px;
				color: #333;
				font-size: 12px;
				font-weight: 400;
				height: 44px;
				border-top: 1px solid #ddd;
				padding-top: 12px;
				box-sizing: border-box;
				.tag {
					margin-right: 24px;
					display: flex;
					align-items: left;
					.icon {
						margin-right: 8px;
						height: 20px;
						width: 20px;
						line-height: 20px;
						text-align: center;
						font-size: 12px;
						border-radius: 4px;
						background: #ff8c33;
						color: #fff;
					}
					.text {
						font-size: 12px;
						line-height: 20px;
						color: #999;
					}
				}
			}
		}
	}
}
</style>