<template>
	<view class="back-content">
		<!-- 轮播图 -->
		<swiper v-if="backlogPhotoList.length && status!='loading'" class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true">
			<swiper-item @click="showImg" v-for="(item,index) in backlogPhotoList" :key="index">
				<div class="swiper-item uni-bg-red">
					<u-image mode="aspectFit" width="750upx" height="400upx" :src="item"></u-image>
				</div>
			</swiper-item>
		</swiper>
		<view v-else class="noPic">
			暂无图片
		</view>
		<view class="back-text">
			<!-- 门店 -->
			<view class="text-item">
				<view class="ellipsis-one">
					{{infoData.storeName}}
				</view>
				<view class="time ">
					{{infoData.effectiveEndTime}} 到期
				</view>
			</view>
			<!-- 创建人 --> 
			<view class="text-item">
				<view>
					<text>创建人</text>
					<text class="margin-left ellipsis-one">{{infoData.putUserName}}</text>
				</view>
				<view class="time">
					{{infoData.createTime}} 创建
				</view>
			</view>
			<!-- 指标 -->
			<view class="text-item">
				<view>
					考评指标
				</view>
				<view v-if="infoData.clsName" class="margin-left">
					{{infoData.clsName}}
				</view>
				<view v-else class="ygq">
					<u-icon name="info-circle"></u-icon>
					 未关联问题项
				</view>
			</view>
			<!-- 描述 -->
			<view class="text-item">
				<view>
					描述
				</view>
				<view :class="['margin-left',infoData.problemDesc?'':'ygq']">
					{{infoData.problemDesc?infoData.problemDesc:'暂无'}}
				</view>
			</view>
		</view>
		<view class="step-content">
			<u-steps :list="numList" direction ="column" :current="0"></u-steps>
		</view>
		<view class="footer">
			<!-- receiveFlag   接收人/责任人标记 只有处理人可以整改-->
			<!-- 目前版本不做 -->
			<!-- <u-button @click="handleSubmit('SOLVE')" v-if="infoData.receiveFlag && infoData.receiveFlag == 1 && infoData.statusDictValue=='待整改'" type="primary">整改完成</u-button> -->
			<!-- putFlag  创建人标记 只有创建人可以审核-->
			<view v-if="infoData.putFlag && infoData.putFlag == 1 && infoData.statusDictValue=='待审核'" class="check-pending">
				<u-button @click="handleSubmit('AUDIT_NO')" class="act-btn" type="error">整改不通过</u-button>
				<u-button @click="handleSubmit('AUDIT_YES')" class="act-btn" type="success">整改通过</u-button>
			</view>
			<!-- copyFlag    抄送标识  只有抄送人可以评论-->
			<view v-if="infoData.copyFlag && infoData.copyFlag==1" class="comment-input">
				<view class="input-cont">
					<textarea auto-height :class="[isFocus?'active':'']" v-model="comment" @focus="isFocus = true" placeholder="请输入评论..."/>
					<u-button @click="handleSubmit('COMMENTS')" :disabled="!comment" class="input-btn" v-if="isFocus" size="mini" type="warning">发送</u-button>
				</view>
				<view>整改状态：<text :class="clsStatus(infoData.statusDictValue)">{{infoData.statusDictValue}}</text></view>
			</view>
		</view>  
	</view>
</template>

<script>
	import { getBackLogDetail, getBackLogRecord, handleBackLog } from '@/api/backLog.js'
	export default {
		components: {
		}, 
		data() {
			return {
				status: 'loading',
				backlogId: '', // 待办id
				infoData:{}, // 详情数据
				backlogPhotoList: [], // 图片列表
				numList: [],
				comment: '', // 评论
				isFocus: false  // 评论键盘是否弹起
			}
		},
		onLoad(option) {
			this.backlogId = option.id
			this.getData(option.id)
			this.getRecordData(option.id)
		},
		methods: {
			// 图片预览
			showImg () {
				uni.previewImage({
					urls: this.backlogPhotoList
				})
			},
			// 获取详情数据
			getData (id) {
				this.status = 'loading'
				getBackLogDetail({id:id}).then(res=>{
					// console.log(res,'rrrrrrrr')
					if(res.status==200){
						this.infoData = res.data 
						let arr = []
						this.infoData.backlogPhotoList.map(item=>{
							if(item.photoPath) {
								arr.push(item.photoPath)
							}
						})
						this.backlogPhotoList = arr
					} else {
						this.toashMsg(res.message)
						this.infoData = {}
						this.backlogPhotoList = []
					}
					this.status = 'nomore' 
				})
			},
			// 获取进度数据
			getRecordData (id) { 
				getBackLogRecord({id:id}).then(res=>{
					if(res.status==200){
						let arr = []
						res.data.map(item=>{
							const p = {}
							const k = '\xa0\xa0\xa0\xa0\xa0\xa0'
							p.name = item.handleTime + k + item.handleTypeDictValue + k + (item.handleDesc ? item.handleDesc : '')
							arr.push(p)
						})
						this.numList = arr
					} else {
						this.toashMsg(res.message)
						this.numList = []
					}
				})
			},
			// 提交处理 
			//type: SOLVE("SOLVE", "整改问题"),AUDIT_YES("AUDIT_YES", "审核通过"),AUDIT_NO("AUDIT_NO", "审核不通过"),COMMENTS("COMMENTS", "发表评论");
			handleSubmit(type) {
				const params = {
					id: this.backlogId,
					handleDesc: this.comment,
					handleType: type
				}
				handleBackLog(params).then(res=>{
					this.toashMsg(res.message)
					if(res.status==200){
						if (type=='COMMENTS') {
							this.comment = ''
							this.isFocus = false
							this.getRecordData(this.backlogId)
						} else {
							setTimeout(()=>{
								uni.navigateBack()
							},300)
						}
					}
				})
			},
			// 状态颜色处理
			clsStatus(status){
				if(status == '待审核'){
					return 'dsh'
				}
				if(status == '待整改'){
					return 'dzg'
				}
				if(status == '整改完成'){
					return 'ywc'
				}
				if(status == '已过期'){
					return 'ygq'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back-content {
		background-color: #eee;
		height: 100%;
		display: flex;
		flex-direction: column;
		// 轮播图
		.top-ad-swiper{
			height: 340upx;
		}
		.noPic{
			width: 750upx;
			height: 400upx;
			font-size: 38upx;
			text-align: center;
			line-height: 400upx;
			color: #666;
		}
		// 详情内容
		.back-text{
			background: #ffffff;
			padding: 10upx 20upx;
			margin-bottom: 20upx;
			border-radius: 6upx;
			box-shadow: 1px 1px 3px #EEEEEE;
			.text-item{
				display: flex;
				align-items: center;
				padding: 10upx 10upx;
				font-size: 28upx;
				justify-content: space-between;
				.margin-left{
					margin-left: 30upx;
				}
				.time{
					color: #888;
					font-size: 26upx;
					margin-left: 10upx;
				}
				> view{
					&:first-child{
						flex: 1;
					}
				}
			}
		}
		// 步骤条
		.step-content {
			padding: 0 20upx;
			background-color: #fff;
			flex: 1;
			overflow-y: scroll;
		}
		// 底部按钮
		.footer {
			background-color: #fff;
			// margin-top: 20upx;
			.check-pending{
				display: flex;
				.act-btn {
					width: 50%;
				}
			}
			.comment-input{
				width: 100%;
				padding: 20upx;
				.input-cont{
					width: 100%;
					background-color: #f4f4f4;
					border-radius: 10upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20upx;
					textarea{
						padding: 20upx;
						height: 100%; 
						flex: 1;
					}
					.active{
						background-color: #fff;
						margin: 20upx 20upx 20upx 0;
					}
					.input-btn{
						padding: 20upx;
						height: 60upx;
					}
				}
				view{
					margin-top: 20upx;
				}
			}
			.dsh{
				color: red;
			}
			.dzg{
				color: #007AFF;
			}
			.ywc {
				color: #10c71e;
			}
		}
		.ygq {
			color: #999;
		}
	}
</style>
