<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">
		<view class="ul fs-p20">
			<view class="li fs-bg__white fs-p30 fs-size__h4 fs-radius__sm fs-mt20" v-for="(item, index) in dataList">
				<view class="fs-color__subtitle">{{item.remark}}</view>
				<view v-if="item.imgList.length" class="fs-flex fs-mt20">
					<view class="fs-mr30" v-for="(value, key) in item.imgList">
						<tui-lazyload-img radius="12rpx" width="200rpx" height="200rpx" mode="aspectFill" :src="value" @click="previewImage(index,key)"></tui-lazyload-img>
					</view>
				</view>
				<view class="fs-mt20 fs-align__right fs-color__label">{{item.createTime}}</view>
			</view>
		</view>
		</z-paging>
	</view>
</template>

<script>
import { apiInspectionRecord } from '@/api/work'
export default {
	data() {
		return {
			planNo: '',
			dataList: []
		}
	},
	onLoad(options) {
		this.planNo = options.planno
	},
  onShow(){
    if (this.$refs.paging) {
      this.$refs.paging.refresh() // 重置到第一页并触发query事件
    }
  },
	methods: {
		// 获取巡检记录
		queryList(pageNo, pageSize) {
			const params = {
				pageReq: {isAsc: 'desc', orderByColumn: 'id', pageNum: pageNo, pageSize: pageSize},
				planNo: this.planNo
			}
			apiInspectionRecord({data:params}).then(res => {
				this.$refs.paging.complete(res.rows)
			})
		},
		// 图片预览
		previewImage(index, key) {
			const imageList = this.dataList[index].imgList
			uni.previewImage({
				current: imageList[key],
				loop: true,
				urls: imageList
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.ul .li:first-child {
	margin-top: 0;
}
</style>
