<template>
	<scroll-view
		class="view-container"
		scroll-y
	>
		<view
			class="box detail"
			style="margin-bottom: 12px"
		>
			<text
				class="wd-font-800 wd-text-16"
				style="padding-right: 100rpx"
			>
				{{ detail.title }}
			</text>
			<view class="tagList">
				<view
					class="tag"
					v-if="detail.priority"
				>
					{{
						$dict.echoDicValue(
							dictMap.task_priority,
							detail.priority
						)
					}}
				</view>
				<view
					v-for="(tag, index) in detail.tagList"
					:key="index"
					class="tag"
				>
					{{ tag }}
				</view>
			</view>
			<view
				class="wd-flex wd-text-13"
				style="justify-content: space-between"
			>
				<view
					class="wd-flex"
					style="align-items: center; gap: 8rpx"
				>
					<u-icon
						name="calendar"
						color="#17C653"
					/>
					<text class="wd-text-13 wd-ml-4px wd-font-800">
						{{
							`${$util.formatDate(
								detail.startDate,
								'YYYY年M月D日'
							)} 至 ${$util.formatDate(
								detail.endDate,
								'YYYY年M月D日'
							)}`
						}}
					</text>
				</view>
			</view>
			<cs-text-more
				:value="detail.description"
			></cs-text-more>
			<view
				class="wd-flex wd-items-center enterprise"
				@tap="goEnterprise(detail.enterprise)"
			>
				<u-avatar
					:src="detail.enterprise.files[0].url"
					shape="square"
					size="64"
				></u-avatar>
				<view
					class="wd-flex wd-flex-col"
					style="overflow: hidden"
				>
					<text class="wd-font-800 wd-text-15">
						{{ detail.enterprise.enterprisesName }}
					</text>
					<view
						class="wd-flex"
						style="margin-top: 4rpx"
					>
						<u-icon
							name="map"
							size="28rpx"
							color="#17C653"
						></u-icon>
						<text
							class="address wd-text-12"
							style="margin-left: 8rpx"
						>
							{{
								`${$dict.echoDicValue(
									dictMap.enterprises_area,
									detail.enterprise.region
								)} | ${detail.enterprise.address}`
							}}
						</text>
					</view>
					<view
						class="tagList"
						style="margin-top: 16rpx"
					>
						<view
							class="tag"
							v-for="(tag, index) in detail.enterprise
								.tagList"
							:key="index"
						>
							{{ tag }}
						</view>
					</view>
				</view>
			</view>
			<view class="audit">
				<cs-dict-tag
					:dict="dictMap.task_state"
					:value="detail.status"
				></cs-dict-tag>
			</view>
		</view>

		<view class="box record">
			<view class="wd-text-14 wd-font-800">结果反馈</view>
			<view
				class="row log"
				v-for="item in list"
				:key="item.id"
				@tap="goLog(item)"
			>
				<view style="margin-bottom: 24rpx">
					<text
						:style="{
							marginRight: '20rpx',
							fontWeight: 'bold',
							color: $dict.echoDictOption(
								dictMap.Inspections_status,
								item.status
							).remark,
						}"
					>
						{{
							$dict.echoDicValue(
								dictMap.Inspections_status,
								item.status
							)
						}}
					</text>
					<text>
						{{
							$util.formatDate(
								item.createTime,
								'YYYY/M/D h:m'
							)
						}}
					</text>
				</view>
				<scroll-view
					scroll-x="true"
					style="flex-flow: row nowrap; white-space: nowrap"
				>
					<view
						class="row"
						v-for="people in item.userList"
						:key="people.userId"
						style="
							display: inline-flex;
							gap: 24rpx;
							margin-right: 24rpx;
						"
					>
						<u-avatar
							:src="people.avtar"
							size="80rpx"
							shape="circle"
						></u-avatar>
						<view
							class="wd-flex wd-flex-col"
							style="gap: 4rpx"
						>
							<text>{{ people.realName }}</text>
							<text>{{ people.deptName }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view
				class="emty"
				v-if="list.length == 0"
			>
				<image
					class="image"
					src="/static/images/emty.png"
					mode="aspectFill"
				></image>
				<text
					class="wd-text-14"
					style="color: #99a1b7"
					>暂无处理结果</text
				>
			</view>
			<view class="audit">
				<cs-dict-tag
					:dict="dictMap.inspections_mark"
					:value="inspectionsState"
					color="#fff"
					:bgColor="setColor(inspectionsState)"
				></cs-dict-tag>
			</view>
		</view>

		<cs-bottom-wrapper>
			<view
				class="operation"
				v-if="[null, 0, 3].includes(inspectionsState)"
			>
				<view
					class="btn green"
					@tap="locate"
					>执法签到</view
				>
			</view>
			<view
				class="operation"
				v-else-if="inspectionsState == 1"
			>
				<view
					class="btn red"
					@tap="tackle(3)"
					>整改处理</view
				>
				<view
					class="btn green"
					@tap="tackle(2)"
					>审批通过</view
				>
			</view>
			<view
				class="operation"
				v-else
			>
				<view class="btn grey">任务完成</view>
			</view>
		</cs-bottom-wrapper>
	</scroll-view>
</template>

<script>
	import {
		getDeptTree,
		getDictBatchByType,
	} from '@/api/system/dict.js'
	import { TaskApi } from '@/api/task/index.js'
	import { getEnterPrise } from '@/api/enterprise/index.js'
	import { InspectionsApi } from '../../api/inspections'
	export default {
		data() {
			return {
				dictMap: {},
				// 任务详情
				detail: {
					id: '',
					description: '',
					priority: '',
					enterprise: {
						region: '',
						type: '',
					},
				},
				// 是否展开文本
				isShowAllText: false,
				// 查询条件
				queryParams: {
					taskId: '',
					recordId: '',
					enterpriseId: '',
				},
				list: [],
				inspectionsState: null,
			}
		},
		onLoad(res) {
			this.queryParams.taskId = res.taskId
			this.queryParams.recordId = res.recordId
			this.queryParams.enterpriseId = res.enterpriseId
			this.getDict()
			this.init()
		},
		onShow() {
			this.init()
		},
		methods: {
			/**
			 * 获取字典
			 */
			async getDict() {
				const dict = await getDictBatchByType({
					type: [
						'Inspections_status',
						'task_state',
						'inspections_mark',
						'enterprises_type',
						'enterprises_area',
						'task_priority',
					].join(','),
				})
				const dept = await getDeptTree()
				this.dictMap = {
					...dict.data,
					dept: dept.data,
				}
			},
			async init() {
				const res = await TaskApi.getDetail(
					this.queryParams.taskId
				)
				const enterprise = await getEnterPrise(
					this.queryParams.enterpriseId
				)
				this.detail = {
					...res.data,
					enterprise: enterprise.data,
				}
				const feedBack = await InspectionsApi.getFeedBack(
					this.queryParams.recordId
				)
				this.list = feedBack.data
				this.inspectionsState =
					this.list[this.list.length - 1]?.status || null
			},
			goEnterprise(enterprise) {
				uni.navigateTo({
					url: `/sub/enterprise/detail?id=${enterprise.id}`,
				})
			},
			viewPosition(enterprise) {
				const position = enterprise.gpsLocation
					.split(',')
					.map(i => Number(i))
				this.$util.viewPosition({
					lat: position[0],
					lng: position[1],
					name: enterprise.enterprisesName,
					address: enterprise.address,
				})
			},
			locate() {
				uni.navigateTo({
					url: `/sub/task/locate?inspectionsId=${this.queryParams.recordId}&enterpriseId=${this.queryParams.enterpriseId}`,
				})
			},
			setColor(status) {
				const colorMap = {
					1: '#F6B100',
					2: '#17C653',
					3: '#F8285A',
				}
				return colorMap[status]
			},
			tackle(state) {
				uni.navigateTo({
					url: `/sub/task/enforce?state=${state}&inspectionsId=${this.queryParams.recordId}`,
				})
			},
			goLog(record) {
				if ([2, 3].includes(record.status)) {
					uni.navigateTo({
						url: `/sub/task/log?id=${record.id}`,
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.view-container {
		padding: 0 24rpx;
		position: relative;
		padding-bottom: 200rpx;
		.box {
			background-color: #fff;
			border-radius: $cs-border-radius;
			padding: 32rpx;
			margin-top: 24rpx;
		}
		.row {
			border-radius: $cs-border-radius;
			padding: 24rpx;
			border: 2rpx solid #f9f9f9;
		}
		.detail {
			display: flex;
			flex-flow: column nowrap;
			gap: 24rpx;
			position: relative;
			overflow: hidden;

			.enterprise {
				border: 2rpx solid #f9f9f9;
				padding: 24rpx;
				border-radius: $cs-border-radius;
				gap: 24rpx;
				position: relative;
				overflow: hidden;
				font-size: 24rpx;
				.address {
					color: $uni-text-color-grey;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				&:active {
					background-color: $cs-color-touch;
				}
			}
			.audit {
				position: absolute;
				right: 0;
				top: 0;
				transform: translateX(36rpx) translateY(32rpx)
					rotateZ(45deg);
				transform-origin: 50% 50%;
			}
		}

		.record {
			position: relative;
			overflow: hidden;
			display: flex;
			flex-flow: column nowrap;
			gap: 24rpx;
			.emty {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 24rpx;
				border-radius: 16rpx;
				border: 2rpx solid
					var(--LightMode-Grey-Grey-100, #f9f9f9);
				padding: 48rpx 24rpx;
				border-radius: 16rpx;
				.image {
					width: 128rpx;
					height: 128rpx;
				}
			}
			.audit {
				position: absolute;
				right: 0;
				top: 0;
				transform: translateX(68rpx) translateY(19rpx)
					rotateZ(45deg);
				transform-origin: 50% 50%;
			}
		}
		.log {
			&:active {
				background-color: $cs-color-touch;
			}
		}
		.operation {
			padding: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 24rpx;
			.btn {
				flex: 1;
				border-radius: 16rpx;
				display: flex;
				padding: 24rpx 0;
				align-items: center;
				justify-content: center;
				font-weight: bold;
			}
			.green {
				background-color: $cs-color-main;
				color: #fff;
			}
			.red {
				background-color: #f8285a;
				color: #fff;
			}
			.grey {
				background-color: #f1f1f4;
				color: #99a1b7;
			}
		}
	}
</style>