<template>
	<el-container class="mainBox mainHeaderNoBorderPadding">
		<div class="header">问题详情</div>
		<div class="content">
			<el-main class="nopadding" v-loading="loading" element-loading-text="加载中...">
				<el-scrollbar>
					<div class="faqMain">
						<div class="mainBack">
							<div class="describe">
								<span class="name">机器序列号</span>
								<span class="text">{{info.serial_number}}</span>
							</div>
							<div class="describe">
								<span class="name">购 买 时 间</span>
								<span class="text">{{info.purchase_time}}</span>
							</div>
							<div class="describe">
								<span class="name">问 题 描 述</span>
								<span class="text">{{info.remark}}</span>
							</div>
							<div class="imgList">
								<el-image class="img" v-for="(em,index) in info.attachment" :key="index" preview-teleported :preview-src-list="[em]" :src="em" fit="cover"></el-image>
							</div>
						</div>
						<div class="faqCardBox" v-for="(item,index) in info.reply_item" :key="index">
							<div class="leftView avatar">
								<el-avatar :size="36" :src="item.user_info && item.user_info.avatar" fit="contain">
									<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
								</el-avatar>
							</div>
							<div class="rightView">
								<div class="msgTitle">
									{{item.user_info && item.user_info.name?item.user_info.name:'匿名'}}
									<span class="time">{{item.created_at}}</span>
								</div>
								<div class="textCom">
									<div v-html="item.remark"></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="saveView">
							<div class="operateView">
								<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="saveBtn">
								<el-button :size="size" type="primary" @click="save">提 交</el-button>
							</div>
						</div>
					</div>
				</el-scrollbar>
			</el-main>
		</div>
	</el-container>
</template>

<script>
import fileType from "@/views/docsManager/fileType"
import uploadListFile from "@/views/personalCenter/components/uploadListFile";
export default {
	name: "faq-info",
	components:{
		fileType,
		uploadListFile
	},
	data(){
		return{
			size:"small",
			loading:false,
			id: this.$route.query.id,
			info:{},
			submitParams:{
				work_order_id:this.$route.query.id,
				attachment:[],
				remark:"",
			}
		}
	},
	mounted() {
		this.getInfo();
	},
	methods:{
		async getInfo() {
			let params = {
				work_order_id:Number(this.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">
.mainBox{
	display: flex;flex-direction: column;
	.header{
		flex-basis: 48px;
		display: flex;align-items: center;justify-content: flex-start;
		font-size: 14px;font-weight: bold;
		border-bottom: 1px solid #f4f4f4;
		margin: 0 -10px;
		padding: 0 10px;
	}
	.content{
		flex: 1;
		overflow: hidden;
		padding: 10px 0;
	}
}
.faqMain{
	.mainBack{
		background: #f6f6f6;
		padding: 10px;
		border-radius: 6px;
		position: relative;
		.describe{
			margin-bottom: 10px;
			.name{
				color: #222;
				margin-right: 15px;
			}
			.text{
				color: #222;font-weight: 500;
			}
			.time{
				color: #888888;
				margin-left: 10px;
			}
		}
		.imgList{
			display: flex;align-items: center;flex-wrap: wrap;
			.img{
				width: 88px;
				height: 88px;
				border-radius: 4px;
				margin-right: 10px;
			}
		}
	}
	.faqCardBox{
		border-bottom: 1px solid #f4f4f4;
		padding: 15px 0;
		display: flex;align-items: flex-start;
		.avatar{
			margin-right: 8px;
		}
		.rightView{
			.msgTitle{
				color: #555;
				.time{
					margin-left: 8px;
				}
			}
			.textCom{
				margin-top: 4px;
			}
			.fileList{
				margin-top: 10px;
				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;
			}
		}
	}
}
.saveView{
	width: 800px;
	margin-top: 20px;
	.saveBtn{
		margin-top: 20px;
	}
}
</style>
