<template>
	<view class="stop-check-item" >
		<view class="flex_sb" style="margin-bottom: 24rpx;">
			<view class="flex_center stop-check-item-label">
				{{serialNumber}}.{{stopCheckInfo.label || ''}}
				<bs-popup v-if="stopCheckInfo.description" :src="'/static/img/icon/question.png'" :placeholder="stopCheckInfo.description" @openPopup="openPopup" :popUp="popUp"></bs-popup>
				
			</view>
			<view class="stop-check-item-radio-group">
				<view :class="['stop-check-item-radio', isClick && !isNormal? 'stop-check-item-radio-abnormal':'']"
					@click="choiceAbnormal"></view>
				<view class="" style="margin-right: 32rpx;" @click="choiceAbnormal">
					异常
				</view>
				<view :class="['stop-check-item-radio', isClick && isNormal? 'stop-check-item-radio-normal':'']"
					@click="choiceNormal"></view>
				<view class="" @click="choiceNormal">
					正常
				</view>
			</view>
		</view>
		<bs-uploadStop ref="uploadStop" :required="stopCheckInfo.isTakePhotos" :maxCount="1"></bs-uploadStop>
		<u--textarea v-if="!isNormal" v-model="remark" placeholder="请输入备注……" :maxlength="200" count :height="162" :border="'none'"
			:placeholderStyle="'color:#BFBFBF'"></u--textarea>
		<u-line v-if="bottomLine" margin="39rpx 0"></u-line>
	</view>
</template>

<script>
	export default {
		name: "stopCheckItem",
		options: {
			// 组件可选值：isolated | apply-shared | shared
			// 页面组件可选值：page-isolated | page-apply-shared | page-shared
			styleIsolation: 'shared',
		},
		data() {
			return {
				isClick: false,
				isNormal: true,
				remark: '',
				
			};
		},
		props: {
			stopCheckInfo: {
				default: {},
				type: Object
			},
			bottomLine: {
				default: false,
				type: Boolean
			},
			serialNumber: {
				default: 1,
				type: Number
			},
			popUp: {
				default: false,
				type: Boolean
			}
		},
		methods: {

			openPopup(){
				this.$emit('openPopup',this.stopCheckInfo.id)
			},
			choiceAbnormal() {
				this.isClick = true
				this.isNormal = false
			},
			choiceNormal() {
				this.isClick = true
				this.isNormal = true
			},
			
			 getCheckResult() {
				return this.$refs.uploadStop.uploadImageSync().then(images=> {
					if (images === 'uploadImageError') return 'uploadImageError'
					return  {
					"id": this.stopCheckInfo.id,
					images,
					"result": this.isClick?(this.isNormal? "Normal":"Abnormal"):'',
					"remarks": this.remark,
					"code": this.stopCheckInfo.code,
					"label": this.stopCheckInfo.label,
					"description": this.stopCheckInfo.description,
					"assessmentWay": this.stopCheckInfo.assessmentWay,
					"totalScore": this.stopCheckInfo.totalScore,
					"takePhotos": this.stopCheckInfo.isTakePhotos,
					"classify": this.stopCheckInfo.classify
					
				}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.stop-check-item {
		&-radio-group {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&-radio {
			width: 40rpx;
			height: 40rpx;
			border: 2rpx solid #BFBFBF;
			border-radius: 20rpx;
			margin-right: 16rpx;

			&-abnormal {
				background-color: #EB2F48;
				border-width: 0;
				position: relative;

				&:after {
					position: absolute;
					content: "";
					width: 15rpx;
					height: 30rpx;
					left: 12rpx;
					border-color: #FFFFFF;
					border-style: solid;
					border-width: 0 4rpx 6rpx 0;
					transform: rotate(45deg);
				}
			}

			&-normal {
				background-color: #2E75E6;
				border-width: 0;
				position: relative;

				&:after {
					position: absolute;
					content: "";
					width: 15rpx;
					height: 30rpx;
					left: 12rpx;
					border-color: #FFFFFF;
					border-style: solid;
					border-width: 0 4rpx 6rpx 0;
					transform: rotate(45deg);
				}
			}

		}

		/deep/.u-textarea {
			background-color: #FAFAFA;
			margin-top: 24rpx;

			&__count {
				background: transparent !important;
			}
		}
		.stop-check-item-label{
			
		}
	}
</style>
