<template>
	<div class="chatList_main">
		<div class="head">
			<el-row>
				<el-form-item>
					<el-input v-model="searchInfo.title" placeholder="主题" style="  margin: auto 20px;" />
				</el-form-item> 
				<el-form-item>
					<el-select clearable placeholder="状态" v-model="searchInfo.status" style="width: 240px">
						<el-option label="未处理" :value="1" />
						<el-option label="处理中" :value="2" />
						<el-option label="完结" :value="3" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="margin-left: 10px;" @click="GetList()">搜索</el-button>
				</el-form-item>
			</el-row>
		</div>
		<el-table border :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="id" label="Id" width="80" />
			<el-table-column prop="app_name" label="APP" />
			<el-table-column prop="userid" label="用户" />
			<el-table-column prop="title" label="主题" />
			<el-table-column prop="status" label="状态">
				<template #default="scope">
					<el-tag v-if="scope.row.status==0" class="ml-2" type="info">关闭</el-tag>
					<el-tag v-if="scope.row.status==1" class="ml-2" type="warning">未处理</el-tag>
					<el-tag v-if="scope.row.status==2" class="ml-2" type="danger">处理中</el-tag>
					<el-tag v-if="scope.row.status==3" class="ml-2" type="success">已完结</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间" width="180" />
			<el-table-column prop="status" label="操作" width="180">
				<template #default="scope">
					<el-button type="primary" size="small" round @click="DoClick(scope.row)">操作</el-button>
					<el-button type="danger" size="small" round @click="Del(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
				:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
				@size-change="PageSizeChange" @current-change="PageCurrentChange" />
		</div>
		<el-dialog v-model="dialogVisible" title="用户留言" width="40%" style="margin-top: 80px;" >
			<div class="chat_k" v-loading="loading">
				<div v-if="jianjie!=null">
					<div><span class="l_title">主题：</span>{{jianjie.title}}</div>
					<div><span  class="l_title">提交时间：</span>{{jianjie.created_at}}</div>
					<div v-if="jianjie.imgs.length>0">
						<div >附件：</div>
						<div v-for="(item,index) in jianjie.imgs" :key="index">
							<el-image class="fujian" :preview-src-list="jianjie.imgs" :src="item"/>
						</div>
					</div>
					
				</div>
				<div class="chatlist" ref="scrollContainer" id="container">
					<div v-for="(item,index) in chatList ">
						<div v-if="item.user_type==1" class="sendMsg">
							<div class="sendMsg_left">
								<div class="sendMsg_left_time">{{item.created_at.substring(5,19)}}</div>
								<div class="sendMsg_left_msg">
									<span v-if="item.msg_type==0">{{item.content}}</span>
									<span v-if="item.msg_type==1">
										<el-image class="msg_img"  :preview-src-list="previewList"   :initial-index="item.tu_id" :src="BaseUrl+item.content"/>
									</span>
								</div>
							</div>
							<div class="sendMsg_right">

								<img class="user_img" src="@/assets/kefu.png" />
								<div class="username">客服</div>
							</div>
						</div>
						<div v-if="item.user_type==0" class="receiveMsg">
							<div class="receiveMsg_left">
								<img class="user_img" src="@/assets/user.png" />
								<div class="username">顾客</div>
							</div>
							<div class="receiveMsg_right">
								<div class="receiveMsg_right_time">{{item.created_at.substring(5,19)}}</div>
								<div class="receiveMsg_right_msg">
									<span v-if="item.msg_type==0">{{item.content}}</span>
									<span v-if="item.msg_type==1">
										<el-image class="msg_img"  :preview-src-list="previewList"  :initial-index="item.tu_id" :src="BaseUrl+item.content"/> 
									</span>
								</div>
							</div>
						</div>
					</div>
					<div v-if="chatList.length==0" class="nolist">
						暂无内容
					</div>
				</div>
				<div style="display: flex; align-items: center;margin-top: 8px;">
					<div class="fp_row_left">状态：</div>
					<div class="fp_row_right">
						<el-radio-group v-model="WorkOrderStatus" @change="WorkOrderStatusChange">
							<el-radio-button label="1" value="1">未处理</el-radio-button>
							<el-radio-button label="2" value="2">处理中</el-radio-button>
							<el-radio-button label="3" value="3">完结</el-radio-button>
						</el-radio-group>
					</div>
				</div>
				<div class="sendk" v-if="jianjie !=null && jianjie.status !==3">
					
					<div style="display: flex;">
						<div style="width: 50px; margin-left: -10px;">
							<el-upload :action="UpFile_url" :show-file-list="false" :on-success="uploadsuccess"
								:headers="headers">
							
								<el-icon class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</div>
						
						<el-input style="width: 100%;" v-model="inputContent" type="textarea" placeholder="消息..." />
					</div>
					<div>
						<el-button strong secondary type="success" class="sendButton" @click="sendMsg">发送</el-button>
					</div>

				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		ChatGetWorkOrderList,
		ChatGetMsgList,
		ChatInsertMsg,
		UpFileUrl,GetWorkOrderInfo,ChangeWorkOrder,WorkOrderDel
	} from '@/api/api.js'

	let UpFile_url = UpFileUrl()
	let BaseUrl=import.meta.env.VITE_APP_FILE
	let headers = {
		Authorization: 'Bearer ' + sessionStorage.getItem("token")
	}
	let WorkOrderStatus=ref(null)

	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	let dialogVisible = ref(false);
	let searchInfo = ref({
		title:'',
		status:null
	})
	//获取列表
	const GetList = () => {
		loading.value = true
		ChatGetWorkOrderList({
			searchInfo: searchInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data
			}
		})
	}
	let chatList = ref([]);
	let seletedWorkOrder = ref(null)
	const DoClick = (row) => {
		seletedWorkOrder.value = row
		dialogVisible.value = true

		getmsglist()
		getJianJie()

	}
	let jianjie=ref(null)
	const getJianJie=()=>{ //获取工单简介
		loading.value = true
		GetWorkOrderInfo({
			WorkOrder: seletedWorkOrder.value.id
		}).then(res => {
			loading.value = false
			if (res.status) {
				 jianjie.value=res.data
				 WorkOrderStatus.value=res.data.status
				 jianjie.value.imgs.forEach((v,i)=>{
					 jianjie.value.imgs[i]=BaseUrl+v
				 })
			}
		})
	}
	let previewList=ref([])
	const getmsglist = () => {
		loading.value = true
		previewList.value=[]
		ChatGetMsgList({
			WorkOrder: seletedWorkOrder.value.id
		}).then(res => {
			loading.value = false
			if (res.status) {
				let iii=0
				chatList.value = res.data.list
				chatList.value.forEach((v,i)=>{
					if(v.msg_type==1){
						previewList.value.push(BaseUrl+v.content)
						chatList.value[i].tu_id=iii
						iii++
					}else{
						chatList.value[i].tu_id=null
					}
				})
		 
				toBottom()
			}
		})
	}
	const scrollContainer = ref(null);
	//滚动到聊天底部
	const toBottom = () => {
		nextTick(() => {
			const container = document.getElementById('container'); // 替换为你的容器元素ID

			//	container.scrollIntodiv(false);
			container.scrollTop = container.scrollHeight
		})

	}
	let inputContent = ref('')
	let MsgType = ref(0)
	//回复消息
	const sendMsg = () => {
		if (inputContent.value == '') return false
		let m = inputContent.value
		inputContent.value = ''
		loading.value = true
		ChatInsertMsg({
			WorkOrder: seletedWorkOrder.value.id,
			Msg: m,
			MsgType: MsgType.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				getmsglist()
			}

		})
		MsgType.value = 0
	}
	const uploadsuccess = (e) => {  //图片上传成功的钩子
		if (e.status) {
			inputContent.value = e.data
			MsgType.value = 1
			sendMsg()
		}
	}
	const WorkOrderStatusChange=()=>{ //更改工单状态
		ElMessageBox.confirm('确认更改工单状态吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				loading.value = true
				ChangeWorkOrder({
					WorkOrder: seletedWorkOrder.value.id,
					status:WorkOrderStatus.value
				}).then(res => {
					loading.value = false
					if (res.status) {
						ElMessage({
							message: '操作成功',
							type: 'success',
						})
						GetList()
						getJianJie()
					} else {
						ElMessage.error(res.msg)
					}
				})
			})
	}
	const Del=(id)=>{
		ElMessageBox.confirm('确认要删除此工单吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				loading.value = true
				WorkOrderDel({
					WorkOrder: id
				}).then(res => {
					loading.value = false
					if (res.status) {
						ElMessage({
							message: '操作成功',
							type: 'success',
						})
						GetList()
					} else {
						ElMessage.error(res.msg)
					}
				})
			})
	}
	onMounted(() => {
		GetList()
	})
</script>

<style scoped>
	.chatList_main {}

	.chat_k {
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
		margin-top: -30px;
	}

	.chatlist {
		overflow-y: scroll;
		max-height: 60vh;
		min-height: 300px;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 10px;
		display: flex;
		flex-direction: column;
	}

	.sendMsg {
		display: flex;
		justify-content: flex-end;
		margin: 10px auto;
	}

	.sendMsg_left_time {
		text-align: right;
		color: #9c9c9c;
		font-size: 14px;
		margin-bottom: 4px;
	}

	.sendMsg_left_msg {
		background-color: #6ecda9;
		color: #444444;
		padding: 10px 20px;
		border-radius: 10px 0px 10px 10px;
	}

	.receiveMsg {
		display: flex;
		justify-content: flex-start;
		margin: 20px auto;
	}

	.receiveMsg_right_time {
		text-align: left;
		color: #9c9c9c;
		font-size: 14px;
		margin-bottom: 4px;
	}

	.receiveMsg_right_msg {
		background-color: #dadada;
		color: #565656;
		padding: 10px 20px;
		border-radius: 0px 10px 10px 10px;
	}

	.user_img {
		width: 50px;
		height: 50px;
		background-color: #eeeeee;
		border-radius: 50%;
	}

	.username {
		font-size: 14px;
		color: #ccc;
		text-align: center;
	}

	.sendMsg_right {
		margin-left: 8px;
	}

	.sendk {
		display: flex;
		width: 100%;
		padding-top: 8px;
	}

	.sendk div:last-child {
		width: 10%;
		padding-left: 10px;
	}

	.sendk div:first-child {
		width: 90%;
	}

	.sendButton {
		width: 100%;
		height: 100%;
	}
	.msg_img{
		max-width:100px;
	}
	.fujian{
		height: 60px;
	}
	.l_title{
		font-weight: 900;
	}
</style>