<template>
	<view class="chatk">
		<view class="msg_list" ref="scrollContainer" id="container">
			<view v-if="jianjie != ''" class="sendMsg">
				<view class="sendMsg_left">
					<view class="sendMsg_left_time">{{jianjie.created_at.substring(5,19)}}</view>
					<view class="sendMsg_left_msg">
						<view class="jianjie_k">
							<view>
								{{jianjie.title}}
							</view>
							<view class="jianjie_img_k">
								<image v-for="(item,index) in jianjie.imgs" :key="index" class="jianjie_img"
									:src="baseUrl+item"></image>
							</view>
						</view>
					</view>

				</view>
				<view class="sendMsg_right">
					<image class="user_img" src="../../static/chat/user.png"></image>
				</view>
			</view>

			<view v-for="(item,index) in chatList">
				<view v-if="item.user_type==0" class="sendMsg">
					<view class="sendMsg_left">
						<view class="sendMsg_left_time">{{item.created_at.substring(5,19)}}</view>
						<view class="sendMsg_left_msg">
							<span v-if="item.msg_type==0">{{item.content}}</span>
							<span v-if="item.msg_type==1">
								<image class="jianjie_img" :src="baseUrl+item.content"></image>
							</span>
						</view>
					</view>
					<view class="sendMsg_right">
						<image class="user_img" src="../../static/chat/user.png"></image>
					</view>
				</view>
				<view v-if="item.user_type==1" class="receiveMsg">
					<view class="receiveMsg_left">
						<image class="user_img" src="../../static/chat/kefu.png"></image>
						<view class="username">客服</view>
					</view>
					<view class="receiveMsg_right">
						<view class="receiveMsg_right_time">{{item.created_at.substring(5,19)}}</view>
						<view class="receiveMsg_right_msg"><span v-if="item.msg_type==0">{{item.content}}</span>
							<span v-if="item.msg_type==1">
								<image class="jianjie_img" :src="baseUrl+item.content"></image>
							</span>
						</view>
					</view>
				</view>
			</view>
			<view v-if="chatList.length==0" class="tishi">欢迎留言</view>
			<view v-if="workOrderstatus.status==3" class="tishi">工单已关闭，如遇到问题请重新提交工单</view>
			<view class="ding"></view>
		</view>
		<view class="end">
			<view v-if="workOrderstatus.status==1 || workOrderstatus.status==2 " style="display: flex;">
				<view style="margin-bottom: 10rpx;font-size: 20rpx;color:#999999">
					发送图片
					<uni-file-picker ref="files" class="file111" @select="selectFile" :imageStyles="imageStyles"
						:auto-upload="false" limit="1">

					</uni-file-picker>
				</view>
				<view style="display: flex; align-items: center; margin-left: 20rpx;">
					<switch :checked="switchchecked" color="#ff7c2e" @change="CloseWorkOrderChange"
						style="transform:scale(0.7); margin-bottom: 10rpx;" />
					<view style="color:#808080; font-size: 22rpx; margin-top: -10rpx; margin-left: -10rpx;">关闭此工单</view>
				</view>
			</view>
			<view class="msg_k">
				<view class="msg_k_left">
					<uni-easyinput :disabled="workOrderstatus.status!=3?false:true" type="textarea" v-model="msgContent"
						placeholder="请输入留言信息" />
				</view>
				<view class="msg_k_right"><button type="primary" size="mini" plain="true" @click="send">发送</button>
				</view>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog cancelText="取消" confirmText="确定" title="提示" content="确定关闭此工单吗？"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		GetSelfMsgList,
		GetWorkOrderInfo,
		BaseFileUrl,
		InsertMsg,
		UserChangeWorkOrder,
		UpFileUrl
	} from '@/api'
	let imageStyles = {
		width: 50,
		height: 50,
		border: {
			color: "#ccc",
			width: 1,
			style: 'dashed',
			radius: '2px'
		},

	}
	let files = ref(null)
	let switchchecked = ref(true);
	let alertDialog = ref(null)
	const dialogClose = () => {

		switchchecked.value = true
	}
	//关闭工单
	const CloseWorkOrderChange = (e) => {
		if (e.detail.value == false) {
			alertDialog.value.open()
			switchchecked.value = false
		}

	}

	let workOrderId = ref('')

	onLoad((option) => {
		workOrderId.value = option.id
	})
	//更改工单状态
	const dialogConfirm = async () => {
		let data = {
			WorkOrder: workOrderId.value
		}

		UserChangeWorkOrder(data).then(res => {
			if (res.status) {
				uni.showToast({
					title: "工单成功关闭",
					duration: 2000,
					icon: 'none'
				});
				getList()
			}
		})
	}


	let msgContent = ref("")
	let msgType = ref(0)
	let chatList = ref([]) //聊天记录
	let workOrderstatus = ref('') //工单状态
	const send = async () => {
		if (msgContent.value == '') return
		let data = {
			MsgInfo: {
				WorkOrder: workOrderId.value,
				Content: msgContent.value,
				MsgType: msgType.value
			}
		}
		msgContent.value = ''
		msgType.value = 0
		InsertMsg(data).then(res => {
			if (res.status) {
				getList()
			}
		})
	}
	let page = ref(1)
	const getList = async () => {
		let data = {
			Page: page.value,
			WorkOrder: workOrderId.value
		}
		GetSelfMsgList(data).then(res => {
			if (res.status) {
				chatList.value = res.data.list.reverse()
				workOrderstatus.value = res.data.workorder_status
				toBottom()
			}
		})

	}
	const scrollContainer = ref(null);
	//滚动到聊天底部
	const toBottom = () => {
		nextTick(() => {
			const container = document.getElementById('container'); // 替换为你的容器元素ID

			container.scrollIntoView(false);
		})

	}
	let jianjie = ref('');
	//获取工单简介
	const getJianJie = () => {
		GetWorkOrderInfo({
			WorkOrder: workOrderId.value
		}).then(res => {
			if (res.status) {
				jianjie.value = res.data
			}
		})
	}
	const selectFile = (e) => {
		console.log(e)
		uni.uploadFile({
			url: UpFileUrl(), //仅为示例，非真实的接口地址
			filePath: e.tempFilePaths[0],
			name: 'file',
			header: {
				Authorization: 'Bearer ' + sessionStorage.getItem("access_token")
			},
			success: (uploadFileRes) => {
				let res = JSON.parse(uploadFileRes.data);
				files.value.clearFiles()
				msgContent.value = res.data
				msgType.value = 1
				send()
			},
			fail: (err) => {
				console.log(err);
			}
		})
	}

	let baseUrl = ref('');
	onMounted(() => {
		baseUrl.value = BaseFileUrl()
		console.log(baseUrl.value)
		getJianJie()
		getList()
	})
</script>

<style scoped>
	.grey {
		filter: grayscale(100%);
	}

	.chatk {
		height: 100vh;
		background-color: #f4f4f4;
	}

	.msg_list {
		padding: 20rpx;


	}

	.end {
		background-color: #fff;
		padding: 20rpx;
		position: fixed;
		bottom: 0px;
		width: calc(100% - 40rpx);
	}

	.msg_k {
		display: flex;

	}

	.msg_k_left {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.msg_k_right {

		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.sendMsg {
		display: flex;
		justify-content: flex-end;
		margin: 20rpx auto;
	}

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

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

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

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

	.receiveMsg_right_msg {
		background-color: #ffffff;
		color: #565656;
		padding: 20rpx 30rpx;
		border-radius: 0rpx 20rpx 20rpx 20rpx;
	}

	.ding {
		height: 350rpx;
	}

	.receiveMsg_left {
		margin-right: 8rpx;
	}

	.tishi {
		text-align: center;
		font-size: 20rpx;
		color: #ccc;
		margin-bottom: 10rpx;
	}

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

	.username {
		font-size: 20rpx;
		color: #ccc;
		text-align: center;
	}

	.jianjie_k {

		padding: 10rpx;

	}

	.jianjie_img_k {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 10rpx;

	}

	.jianjie_img {
		width: 120rpx;
		height: 120rpx;
		background-color: #5faa9e;
	}

	.jianjie_img:not(:last-child) {
		margin-right: 20rpx;
	}

	.icon-add {
		height: 1px !important;
	}
</style>