<template>
	<view class="content">
		<!-- 图标文字tip -->
		<view class="flex justify-between text-gray padding-lr-xs">
			<view class="flex">
				<u-icon name="/static/images/home/hege.png"></u-icon>
				<view class="margin-left-xs">
					已安检且安检合格
				</view>
			</view>
			<view class="flex">
				<u-icon name="/static/images/home/fengxiang.png"></u-icon>
				<view class="margin-left-xs">
					已安检存在风险
				</view>
			</view>
		</view>
		<!-- 安检项目栏 -->
		<view class="">
			<checkItem ref="checkItemRef" :rhaj="rhaj"></checkItem>
		</view>
		<!-- 现场拍照 -->
		<view class="cardCss">
			<view class="text-lg">
				现场拍照
				<text class="text-gray">(至少上传3张图片)</text>
			</view>
			<view class="uploadCss margin-top ">
				<view class="flex justify-start align-center">
					<u-grid col="4">
						<u-grid-item v-for="(item,index) in fileList" :key="index">
							<view class="uploadItemCss">
								<u-upload :fileList="item.file" :uploadText="item.name" uploadIcon="plus"
									@afterRead="afterRead" @delete="deletePic" :name="item.id" multiple
									:maxCount="1"></u-upload>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<!-- 安检结果 -->
		<view class="cardCss">
			<view class="text-lg">
				安检结果
			</view>
			<view class="margin-top">
				<u-radio-group v-model="radioValue" activeColor="#EE2F24">
					<u-radio :customStyle="{marginRight: '20px'}" v-for="(item, index) in radiolist" :key="index"
						:label="item.name" :name="item.name" @change="radioChange">
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<!-- 操作工签名 -->
		<view class="cardCss">
			<view class="text-lg">
				签名
			</view>
			<view class="margin-top">
				<view class="flex">
					操作工签名
					<text class="text-gray">(必填)</text>
				</view>
				<view class="margin-top-xs" @click="goSign(0)">
					<u-image class="signCss" :src="czgqmUrl" mode="aspectFit" v-if="czgqm"></u-image>
					<u-cell value="去签名" isLink v-else></u-cell>
				</view>
			</view>
		</view>
		<!-- 用户签名 -->
		<view class="cardCss">
			<view class="text-lg">
				签名
			</view>
			<view class="margin-top">
				<view class="flex">
					用户签名
					<text class="text-gray">(必填)</text>
				</view>
				<view class="margin-top-xs signCardcss" @click="goSign(1)">
					<u-image class="signCss" :src="yhqmUrl" mode="aspectFit" v-if="yhqm"></u-image>
					<u-cell value="去签名" isLink v-else></u-cell>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import checkItem from './components/checkItem.vue'
	export default {
		name: "step2",
		components: {
			checkItem
		},
		props: {
			rhaj: {
				type: Object,
				default: () => {}
			},
			ajjg: {
				type: String,
				default: ""
			},
			czgqm: {
				type: String,
				default: ""
			},
			yhqm: {
				type: String,
				default: ""
			},

		},
		watch: {
			ajjg: {
				handler() {
					// console.log("安检watch监听", this.ajjg);
					this.$nextTick(() => {
						// 重新触发mounted生命周期钩子
						this.radioValue = this.ajjg
						this.$forceUpdate();
					});
				},
				immediate: true,
				deep: true, // 深度监听ajjg的变化
			},
			czgqm: {
				handler() {
					// console.log("操作工签名watch监听", this.ajjg);
					this.$nextTick(() => {
						// 重新触发mounted生命周期钩子
						this.getCzgqm();
						this.$forceUpdate();
					});
				},
				immediate: true,
				deep: true, // 深度监听ajjg的变化
			},
			yhqm: {
				handler() {
					// console.log("用户签名watch监听", this.ajjg);
					this.$nextTick(() => {
						// 重新触发mounted生命周期钩子
						this.getYhqm();
						this.$forceUpdate();
					});
				},
				immediate: true,
				deep: true, // 深度监听ajjg的变化
			},
		},
		data() {
			return {
				fileList: [{
					id: '0',
					name: '用气环境',
					file: []
				}, {
					id: '1',
					name: '管瓶灶',
					file: []
				}, {
					id: '2',
					name: '阀代',
					file: []
				}, {
					id: '3',
					name: '报警器',
					file: []
				}, {
					id: '4',
					name: '其他',
					file: []
				}, ],
				radiolist: [{
						name: '无隐患',
						disabled: false
					},
					{
						name: '存在隐患',
						disabled: false
					},
				],
				radioValue: "",
				sign: false,
				yhqmUrl: "",
				czgqmUrl: ""
			}
		},
		computed: {

		},
		methods: {
			radioChange(e) {
				console.log(e);
				this.$emit('changeAJjg', e)
			},
			// 打开签名
			goSign(type) {
				uni.navigateTo({
					url: '/pages/home/appList/securityCheck/sign?type=' + type
				})
			},
			deletePic(event) {
				let current = parseInt(event.name);
				this.fileList[current].file.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event);
				let file = event.file;
				let current = parseInt(event.name);
				this.fileList[current].file.push({
					...file,
					status: 'uploading',
					message: '上传中'
				})
				let fileListLen = this.fileList[current].file.length;
				const result = await this.$api.fileApi.uploadFile(file[0].url);
				console.log(this.fileList[current]);
				this.fileList[current].file.splice(0, 1, {
					status: 'success',
					message: '',
					url: file[0].url,
					fileObj:JSON.stringify(result)
				})
				console.log(this.fileList);
			},
			async getCzgqm() {
				if (this.czgqm) {
					let JsonParse = JSON.parse(this.czgqm)
					this.czgqmUrl = await this.$getPhotoUrl(JsonParse[0].response.fileId);
				}
			},
			async getYhqm() {
				if (this.yhqm) {
					let JsonParse = JSON.parse(this.yhqm)
					this.yhqmUrl = await this.$getPhotoUrl(JsonParse[0].response.fileId);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 10px 12px;
	}

	.cardCss {
		background: #fff;
		padding: 20px 12px;
		border-radius: 10px;
		margin: 10px 5px;
		overflow: hidden;
	}

	.uploadCss {
		display: flex;
		align-items: flex-start;
	}

	/deep/.uploadItemCss .u-upload__button {
		background: #fff;
		border-radius: 10px;
		display: flex;
		border: 1px dashed #E8EAEF;
		// width: 100%;
		width: 60px !important;
		height: 60px !important;
		margin: 5px 0px;
	}

	/deep/.u-upload__wrap__preview__image {
		width: 60px !important;
		height: 60px !important;
	}

	/deep/.u-upload__wrap__preview {
		margin: 5px 0 !important;
	}

	/deep/ .signCss .u-image,
	.u-image__image {
		transform-origin: center center;
		/* 设置旋转中心点为元素中心 */
		width: 100% !important;
		// transform: rotate(-90deg);
		height: 100px !important;
		// scale: 2;
	}
</style>