<template>
	<view class="page-wrap">
		<view class="list-wrap">
			<view class="album">
				<view class="album-content">
					<view class="reporter">
						<u-avatar
							:text="detailData.CREATER_NAME ? detailData.CREATER_NAME.slice(0, 1) : ''"
							fontSize="16"
							randomBgColor
							style="margin-right: 8px"
						></u-avatar>
						<view>
							<u--text
								:text="`上报人：${detailData.CREATER_NAME || ''}`"
								type="primary"
								bold
								size="17"
							>sdf</u--text>
							<u--text
								:text="detailData.CREATE_TIME || ''"
								size="12"
							></u--text>
						</view>
					</view>
					<u--text
						margin="0 0 8px 0"
						:text="detailData.DESCRIPTION || ''"
					></u--text>
					<u-album :urls="detailData.urls" multipleSize="320" space="10" keyName="src"></u-album>
					<view class="ok-bar-wrap">
						<u-button type="primary" :disabled="tableKey !== '1'" @click="handleOk" :plain="true" :hairline="true" :text="tableKey !== '1' ? '已确认' : '确认'" ></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		initFilter,
		extendRule,
		extendInclude
	} from '../../../../utils/common'

	import {
		getSnapshotData, handleOkSnapshot
	} from '../../../../services/apply/FMServices/FMServices.js'
	import config from '../../../../config/common'

	export default {
		data() {
			return {
				sourceUrl: config.uni_app_web_source_url,
				currentId: '',
				tableKey: 0,
				detailData: {},
				lists: [],
			}
		},
		onLoad(opt) {
			this.currentId = opt.ID
			this.TaskID = opt.taskID ? opt.taskID : '';
			this.tableKey = opt.tableKey ? opt.tableKey : '0'
			this.loadData()
		},
		// onShow() {
		// 	this.loadData()
		// },
		methods: {
			loadData() {
				const orgId = uni.getStorageSync('orgId')
				const json = initFilter(orgId)
				extendRule(json, 'ID', 1, this.currentId)
				// extendInclude(json, "Nav_Files.Nav_ImgFile")
				getSnapshotData(json).then(res => {
					if (res) {
						this.detailData = res
						this.detailData.urls = res.Nav_Files.map(e => {
							return {
								src: this.sourceUrl + e.Nav_ImgFile.FILE_PATH
							}
						})
					}
				})
			},
			handleOk() {
				this.detailData.TaskID=this.TaskID
				handleOkSnapshot(this.detailData).then(res => {
					if (res) {
						uni.$showMsgFunc('确认成功!', () => {
							uni.navigateBack()
						}, 'success', 1000)
						// uni.showToast({
						// 	title: '确认成功！'
						// })
						// this.loadData()
					}
				})
			}
		},
		onReachBottom() {
			if (this.total > this.pageIndex * 10) {
				this.pageIndex++
			}
		},
		watch: {
			pageIndex() {
				this.loadData()
			}
		},
		computed: {}
	}
</script>


<style scoped>
	@import url("../../../../style/css/editTemplate.css");

	.sub-section {
		margin-bottom: 16px;
	}

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

	.reporter {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}

	.album-avatar {
		 /*background-color: $u-bg-color;*/
		 padding: 5px;
		 border-radius: 3px;
	 }

	.album-content {
		 margin-left: 10px;
		 flex: 1;
	}

	.ok-bar-wrap {
		position: fixed;
		width: 100%;
		left: 0;
		padding: 12px 16px;
		bottom: 0;
		box-sizing: border-box;
		background: #fff;
		box-shadow: 0 0 7px 0 rgba(0, 0, 0, .1);
	}

	.btn-groups button {
		width: 48%;
	}

	.content .field {
		font-size: 14px;
		line-height: 18px;
		margin-bottom: 4px;
	}

	.content .field .label {
		color: #666;
	}

	.content .field .value {
		color: #333333;
	}

	.card-title {
		margin-bottom: 6px;
		display: flex;
		font-weight: bold;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		font-size: 16px;
	}

	.card-title .left {
		display: flex;
		align-items: center;
	}

	.card-title .title-icon {
		margin-right: 4px;
	}
</style>
<style>
.page-wrap >>> .u-album__row__wrapper {
	margin-bottom: 10px !important;
}
</style>
