<template>
	<view>
		<view class="filter-bar">

		</view>
		<view class="task-item" v-for="(item,index) in taskList" :key="index">
			<view class="task-status" :style="`background-color:${item.status==1?'#60a7e9':'#c85449'}`">
				<text>
					{{item.status==1?'正常':'异常'}}
				</text>
			</view>
			<view class="task-title">
				{{item.name}}
			</view>
			<view class="task-content">
				<image src="@/static/inspector/inspector_example.png" mode=""></image>
				<view class="desc-list">
					<view class="desc-item">
						<text class="desc-key">检查部位: </text>
						<text class="desc-value">{{item.part}}</text>
					</view>
					<view class="desc-item">
						<text class="desc-key">巡检单位: </text>
						<text class="desc-value">{{item.unit}}</text>
					</view>
					<view class="desc-item">
						<text class="desc-key">检查情况: </text>
						<text class="desc-value">{{item.situation}}</text>
					</view>
					<view class="desc-item">
						<text class="desc-key">巡检人员: </text>
						<text class="desc-value">{{item.staff}}</text>
					</view>
					<view class="desc-item">
						<text class="desc-key">纠正预防措施: </text>
						<text class="desc-value">{{item.measure}}</text>
					</view>
					<view class="desc-item">
						<text class="desc-key">巡检日期: </text>
						<text class="desc-value">{{item.date}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 质量巡检任务列表
				taskList: [{
					name: '巡检任务1',
					part: '南侧立柱',
					unit: '遵宜科技',
					situation: '正常',
					staff: '金一南',
					measure: '无',
					date: '2020-06-13',
					status: 1
				}, {
					name: '巡检任务1',
					part: '南侧立柱',
					unit: '遵宜科技',
					situation: '正常',
					staff: '金一南',
					measure: '无',
					date: '2020-06-13',
					status: 0
				}, {
					name: '巡检任务1',
					part: '南侧立柱',
					unit: '遵宜科技',
					situation: '正常',
					staff: '金一南',
					measure: '无',
					date: '2020-06-13',
					status: 1
				}, {
					name: '巡检任务1',
					part: '南侧立柱',
					unit: '遵宜科技',
					situation: '正常',
					staff: '金一南',
					measure: '无',
					date: '2020-06-13',
					status: 1
				}, {
					name: '巡检任务1',
					part: '南侧立柱',
					unit: '遵宜科技',
					situation: '正常',
					staff: '金一南',
					measure: '无',
					date: '2020-06-13',
					status: 1
				}, ]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.task-item {
		margin: 0 16rpx 0;
		border-radius: 20rpx;
		position: relative;
		padding: 22rpx 34rpx 34rpx;
		box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.4);

		.task-status {
			position: absolute;
			top: 0;
			right: 0;
			width: 88px;
			height: 31px;
			border-radius: 0px 10px 1px 26px;
			box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.4);
			background-color: #60a7e9;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				color: #EFEFEF;
				font-size: 28rpx;
			}
		}

		.task-title {
			font-size: 32rpx;
			margin-left: 14rpx;
		}

		.task-content {
			margin-top: 16rpx;
			display: flex;

			image {
				height: 182rpx;
				width: 132rpx;
			}

			.desc-list {
				display: flex;
				flex-wrap: wrap;
				margin-left: 8rpx;
				width: 510rpx;

				.desc-item {
					width: 50%;

					.desc-key {
						color: #9a9a9a;
						font-size: 12rpx;
					}

					.desc-value {
						color: #101010;
						font-size: 13rpx;
						font-weight: 700;
					}
				}
			}
		}
	}

	.task-item:not(:last-child) {
		margin-bottom: 34rpx;
	}
</style>
