<template>
	<view class="back-content">
		<!-- 轮播图 -->
		<swiper class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true">
			<swiper-item v-if="infoData.backlogPhotoList && infoData.backlogPhotoList.length" v-for="(item,index) in infoData.backlogPhotoList" :key="index">
				<div class="swiper-item uni-bg-red">
					<!-- <image class="swiper-item-imgse" :fade-show='true' :src="item.photo"></image> -->
					<u-image mode="scaleToFill" width="750upx" height="400upx" :src="item.photo"></u-image>
				</div>
			</swiper-item>
			<u-image v-else mode="scaleToFill" width="750upx" height="400upx" src="/static/noPic.jpg"></u-image>
		</swiper>
		<view class="back-text">
			<!-- 门店 -->
			<view class="text-item">
				{{infoData.storeName}}
			</view>
			<!-- 处理人 -->
			<view class="text-item">
				<view>
					<text>处理人</text>
					<text class="margin-left ellipsis-one">张三丰</text>
				</view>
				<view class="time ">
					{{infoData.effectiveEndTime}} 到期
				</view>
			</view>
			<!-- 创建人 -->
			<view class="text-item">
				<view>
					<text>创建人</text>
					<text class="margin-left ellipsis-one">张三丰</text>
				</view>
				<view class="time">
					{{infoData.createTime}} 创建
				</view>
			</view>
			<!-- 指标 -->
			<view class="text-item">
				<view>
					考评指标
				</view>
				<view class="margin-left">
					{{infoData.clsName}}
				</view>
			</view>
			<!-- 描述 -->
			<view class="text-item">
				<view>
					描述
				</view>
				<view class="margin-left">
					{{infoData.problemDesc}}
				</view>
			</view>
		</view>
		<view class="step-content">
			<u-steps :list="numList" direction ="column" :current="0"></u-steps>
		</view>
		<view class="footer">
			<u-button v-if="infoData.status=='待整改'" type="primary">整改完成</u-button>
			<view v-else-if="infoData.status=='待审核'" class="check-pending">
				<u-button class="act-btn" type="error">整改不通过</u-button>
				<u-button class="act-btn" type="success">整改通过</u-button>
			</view>
			<view v-else class="comment-input">
				<input type="text" v-model="comment" @confirm="sendComment" placeholder="请输入评论..."/>
				<view>整改状态：{{infoData.status}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getBackLogDetail } from '@/api/backLog.js'
	export default {
		components: {
		},
		data() {
			return {
				infoData:{}, // 详情数据
				numList: [
					{
						name: '2020-08-09 \xa0\xa0\xa0\xa0\审核问题 \xa0\xa0\xa0\xa0\审核通过',
					}, {
						name: '2020-08-09 审核问题  审核不通过'
					}, {
						name: '2020-08-09 \xa0\xa0\xa0\xa0\创建问题 \xa0\xa0\xa0\xa0\ 抄送 \xa0\xa0\xa0\xa0\所有人'
					},
				 ],
				 comment: '' // 评论
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.getData(option.id)
		},
		methods: {
			// 获取详情数据
			getData (id) {
				getBackLogDetail({id:id}).then(res=>{
					if(res.status==200){
						this.infoData = res.data
					} else {
						this.toashMsg(res.message)
						this.infoData = {}
					}
				})
			},
			sendComment (v) {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back-content {
		background-color: #eee;
		height: 100%;
		display: flex;
		flex-direction: column;
		// 轮播图
		.top-ad-swiper{
			height: 340upx;
		}
		.swiper-item-imgse{
			width: 750upx;
			height: 340upx;
		}
		// 详情内容
		.back-text{
			background: #ffffff;
			padding: 10upx 20upx;
			margin: 20upx 0;
			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{
					background-color: #f4f4f4;
					padding: 20upx;
					border-radius: 10upx;
				}
				view{
					margin-top: 20upx;
				}
			}
		}
	}
</style>
