<template>
	<view class="container">
		<tui-list-cell :hover="false">
			<view class="fs-flex__between"><view>养护编码</view><view>{{info.maintainNo}}</view></view>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<view class="fs-flex__between fs-ellipsis"><view>植物类型</view><view class="fs-ml20  fs-ellipsis">{{info.plantTypeName}}</view></view>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<view class="fs-flex__between"><view>养护类型</view><view>{{info.maintainTypeName}}</view></view>
		</tui-list-cell>
		<!--
		<tui-list-cell :hover="false">
			<view class="fs-flex__between"><view>规 格</view><view>{{info.specifications}}</view></view>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<view class="fs-flex__between"><view>绿地面积</view><view>{{info.maintainNum}}{{info.numUnitName}}</view></view>
		</tui-list-cell>
		-->
		<!--浇水-->
		<!--
		<block v-if="info.maintainTypeId == 2">
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view>水源类型</view><view>{{info.wateringTypeName}}</view></view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view>浇水方式</view><view>{{info.wateringModeName}}</view></view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view>浇水量</view><view>{{info.maintainAmount}}{{info.amountUnitName}}</view></view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view class="basis">养护描述</view><view>{{info.remark}}</view></view>
			</tui-list-cell>
		</block>
		-->
		<!--修剪-->
		<!--
		<block v-else-if="info.maintainTypeId == 3">
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view>修剪量</view><view>{{info.maintainAmount}}{{info.amountUnitName}}</view></view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view class="basis">修剪措施</view><view>{{info.trimRemark}}</view></view>
			</tui-list-cell>
		</block>
		-->
		<!--有害生物防治-->
		<!--
		<block v-else-if="info.maintainTypeId == 4">
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view>防治方式</view><view>{{info.pcoModeName}}</view></view>
			</tui-list-cell>
		</block>
		-->
		<!--中耕除草-->
		<!--
		<block v-else-if="info.maintainTypeId == 5">
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view class="basis">除草措施</view><view>{{info.weedRemark}}</view></view>
			</tui-list-cell>
		</block>
		-->
		<!--补植-->
		<!--
		<block v-else-if="info.maintainTypeId == 6">
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view>处理类型</view><view>{{info.replantingType}}</view></view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view class="basis">处理措施"</view><view>{{info.replantingTypeRemark}}</view></view>
			</tui-list-cell>
		</block>
		-->
		<!--清理保洁-->
		<!--
		<block v-else-if="info.maintainTypeId == 8">
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view class="basis">附属设施维护措施</view><view>{{info.ancillaryFacilitiesRemark}}</view></view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view class="basis">绿化保洁措施</view><view>{{info.cleaningMeasuresRemark}}</view></view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view class="basis">景观水体维护措施</view><view>{{info.scenicWaterRemark}}</view></view>
			</tui-list-cell>
		</block>
		-->
		<!--施肥-->
		<!--
		<block v-else-if="info.maintainTypeId == 10">
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view>施肥种类</view><view>{{info.fertilizeTypeName}}</view></view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view>施肥方式</view><view>{{info.fertilizeModeName}}</view></view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="fs-flex__between"><view>施肥量</view><view>{{info.maintainAmount}}{{info.amountUnitName}}</view></view>
			</tui-list-cell>
		</block>
		<tui-list-cell :hover="false">
			<view class="fs-flex__between"><view>操作时长</view><view>{{info.operationDuration}}天</view></view>
		</tui-list-cell>
		-->
		<tui-list-cell :hover="false">
			<view class="fs-flex__between"><view>共同处理人</view><view>{{info.togetherPerson}}</view></view>
		</tui-list-cell>
		<!--
		<tui-list-cell :hover="false">
			<block v-for="(item,index) in info.materialDetailList">
				<view class="fs-flex__between"><view>{{index == 0 ? '耗材明细' : ''}}</view><view>{{item.typeName}}/{{item.typeDetailName}}，{{item.userCount}}{{item.unitName}}</view></view>
			</block>
		</tui-list-cell>
		-->
		<tui-list-cell :hover="false">
			<view class="fs-flex__between">
				<view>处理开始照片</view>
				<view class="fs-flex">
					<view class="fs-ml20" v-for="(value, key) in info.beginImgList">
						<tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('beginImgList',key)"></tui-lazyload-img>
					</view>
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<view class="fs-flex__between">
				<view>进行中照片</view>
				<view class="fs-flex">
					<view class="fs-ml20" v-for="(value, key) in info.workingImgList">
						<tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('workingImgList',key)"></tui-lazyload-img>
					</view>
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<view class="fs-flex__between">
				<view>结束照片</view>
				<view class="fs-flex">
					<view class="fs-ml20" v-for="(value, key) in info.endImgList">
						<tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('endImgList',key)"></tui-lazyload-img>
					</view>
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<view class="fs-flex__between">
				<view>人员照片</view>
				<view class="fs-flex">
					<view class="fs-ml20" v-for="(value, key) in info.staffImgList">
						<tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('staffImgList',key)"></tui-lazyload-img>
					</view>
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell :hover="false" unlined>
			<view class="fs-flex__between fs-safe__area">
				<view>使用材料照片</view>
				<view class="fs-flex">
					<view class="fs-ml20" v-for="(value, key) in info.materialImgList">
						<tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('materialImgList',key)"></tui-lazyload-img>
					</view>
				</view>
			</view>
		</tui-list-cell>
	</view>
</template>

<script>
import { apiTaskHandleDetail } from '@/api/work'
export default {
	data() {
		return {
			info: {},
      problem_no:''
		}
	},
	onLoad(options) {
    this.problem_no = options.problem_no
	},
  onShow(){
    this.getTaskDetail()
  },
	methods: {
		// 获取任务详情
		getTaskDetail() {
			apiTaskHandleDetail({data:{problem_no:this.problem_no}}).then(res => {
				const togetherPerson = res.data.commonStaffList.map(item => item.userName)
				res.data.togetherPerson = togetherPerson.join()
				this.info = res.data
			})
		},
		// 图片预览
		previewImage(index, key) {
			const imageList = this.info[index]
			uni.previewImage({
				current: imageList[key],
				loop: true,
				urls: imageList
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.basis {
	flex-basis: 180rpx;
	flex-shrink: 0;
}
</style>

