<template>
	<div class="serveMain" v-loading="loading" element-loading-text="加载中...">
		<div class="feedHeader">
			<span class="name">问题描述</span>
			<span class="date">{{info.created_at}}</span>
		</div>
		<div class="describe">{{info.remark}}</div>
		<div class="attachment">
			<span class="imgView" v-for="(item,index) in info.attachment" :key="index">
				<el-image class="img" preview-teleported :preview-src-list="[item]" :src="item"></el-image>
			</span>
		</div>
		<div v-for="(item,index) in info.reply_item" :key="index">
			<div class="intelligenceCustomer formInputText">
				<div class="cardView">
					<div class="avatar">
						<el-avatar :src="item.user_info && item.user_info.avatar"></el-avatar>
					</div>
					<div class="rightView">
						<div class="userHeader">
							<span class="name">{{item.user_info && item.user_info.name===''?'匿名':item.user_info.name}}</span>
							<span class="time">{{item.created_at}}</span>
						</div>
						<div class="text" v-html="item.remark"></div>
					</div>
				</div>
				<div class="fileList">
					<div class="imgListSpam" v-for="(em,ind) in item.attachment" :key="ind">
						<span class="imgSpan" v-if="['png','jpg','jpeg','gif'].indexOf(em.type) !==-1">
							<el-image class="img" :src="em.url" preview-teleported :preview-src-list="[em.url]"></el-image>
						</span>
					</div>
				</div>
				<div class="fileList fileListMargin">
					<div class="fileListSpam" v-for="(em,ind) in item.attachment" :key="ind">
						<span class="fileSpan" v-if="['png','jpg','jpeg','gif'].indexOf(em.type) ===-1" @click="linkFile(em)">
							<fileType size="22px" :fileType="em.type" />
							<span class="name">{{em.name}}</span>
						</span>
					</div>
				</div>
			</div>
		</div>
		<div class="operateView" v-if="saveShow">
			<div class="uploadList">
				<uploadListFile :list="submitParams.attachment" @uploadFileSuccess="uploadFileSuccess"></uploadListFile>
			</div>
			<el-input class="formInputText" v-model="submitParams.remark" type="textarea" :rows="4" resize="none" placeholder="请描述您的问题"></el-input>
		</div>
		<div class="saveView">
			<el-button :size="size" type="primary" @click="saveShow=true" v-if="!saveShow">继续提问</el-button>
			<el-button :size="size" type="primary" @click="save" v-else>提 交</el-button>
		</div>
	</div>
</template>

<script>
import fileType from "@/views/docsManager/fileType"
import uploadListFile from "@/views/personalCenter/components/uploadListFile";
export default {
	name: "feedbackDetail",
	components:{
		uploadListFile,
		fileType
	},
	data(){
		return{
			size:"small",
			loading:false,
			params:{},
			saveShow:false,

			info:{},
			submitParams:{
				work_order_id:"",
				attachment:[],
				remark:"",
			}
		}
	},
	mounted() {

	},
	methods:{
		setInfoParams(params){
			this.params = params;
			this.submitParams.work_order_id = params.id;
			this.getInfo();
		},
		async getInfo() {
			let params = {
				work_order_id:this.params.id
			}
			this.loading = true;
			const res = await this.$API.customer.workOrderInfo.post(params);
			this.loading = false;
			if(res.code == 200){
				this.info = res.data;
			}
		},
		uploadFileSuccess(fileList){
			this.submitParams.attachment = fileList;
		},
		linkFile(em){
			window.location.href = em.url;
		},
		async save() {
			const res = await this.$API.customer.replyOrder.post(this.submitParams);
			if(res.code == 200){
				this.submitParams.attachment = [];
				this.submitParams.remark = "";

				await this.getInfo();
			}
		}
	}
}
</script>

<style scoped lang="scss">
.serveMain{
	min-height: 100%;
	.feedHeader{
		display: flex;
		align-items: center;
		.name{color: #333;font-weight: 500;}
		.date{margin-left: 10px;font-size: 12px;color: #888}
	}
	.describe{
		margin: 10px 0;
	}
	.attachment{
		.imgView{
			.img{width: 80px;height: 80px;border-radius: 4px;margin: 0 6px 6px 0;}
		}
	}
	.backShow{
		background: #f5f5f5;
	}
	.intelligenceCustomer{
		border-radius: 4px;
		padding: 10px;
		border-bottom: 1px solid #f5f5f5;
		.title{color: #333;font-weight: 500;margin-bottom: 10px;}
		.cardView{
			display: flex;
			align-items: center;
			.rightView{
				margin-left: 10px;
				.userHeader{
					margin-bottom: 5px;font-size: 12px;color: #888;
					.time{margin-left: 5px;}
				}
				.text{line-height: 20px;}
			}
		}
		.fileList{
			margin-top: 10px;
			margin-left: 50px;
			display: flex;
			align-items: center;
			.imgFloat{
				float: left;
			}
			.imgSpan{
				.img{
					width: 60px;height: 60px;border-radius: 4px;margin: 0 6px 6px 0;
				}
			}
			.fileSpan{
				display: flex;align-items: center;margin:0 10px 8px 0;
				background: #F6F6F6;
				padding: 4px 30px 4px 10px;
				cursor: pointer;
			}
		}
		.fileListMargin{
			margin-top: 0;
		}
	}
	.operateView{
		margin-top: 15px;
		margin-bottom: 10px;
		.uploadList{
			margin-bottom: 10px;
		}
	}
	.saveView{
		margin-top: 15px;
	}
}

.formInputText{
	width: 800px;
}
</style>
