<template>
	<view class="container">
		<view class="mim-view mim-flex-vertical">
			<view class="storm mim-font-16 bold">
				{{ detail.category_1 ? detail.category_1.name : ''}}
				{{ detail.category_2 ? '/' + detail.category_2.name : ''}}
				{{ detail.category_3 ? '/' + detail.category_3.name : '' }}
				{{ detail.category_4 ? '/' + detail.category_4.name : '' }}
				{{ detail.category_5 ? '/' + detail.category_5.name : '' }}
			</view>
			<view class="storm mim-font-14">
				{{detail.body || '--'}}
			</view>
			<u-divider border-color='#f2f2f2' bg-color='#f2f2f2' margin-top='24' margin-bottom='24'
				use-slot></u-divider>
			<view class="mim-flex-wrap-space-between">
				<text class="mim-font-14">反映人</text>
				<text class="mim-font-14">{{ detail.name || '--' }}</text>
			</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">反映人手机号</text>
				<text class="mim-font-14">{{detail.mobile || '--' }}</text>
			</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">时间</text>
				<text class="mim-font-14">{{detail.complain_date || '--' }}</text>
			</view>
		</view>
		<view class="mim-view mim-flex-vertical">
			<view class="mim-font-16 bold">办理情况</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">处理部门</text>
				<text class="mim-font-14">{{detail.deal_department ? detail.deal_department.name : '--'}}</text>
			</view>
			<view class="mim-flex-vertical storm">
				<text class="mim-font-14">处理信息</text>
				<text class="mim-font-14 storm"> {{ detail.deal_idea || '--' }}</text>
			</view>
		</view>

		<view class="mim-view mim-flex-vertical">
			<view class="mim-font-16 bold">投诉目的</view>
			<view class="mim-flex-vertical storm">
				<text class="mim-font-14"> {{ detail.goal || '--' }} </text>
			</view>
		</view>

		<view class="mim-view mim-flex-vertical">
			<view class="mim-font-16 bold">备注</view>
			<view class="mim-flex-vertical storm">
				<text class="mim-font-14"> {{ detail.remark || '--' }} </text>
			</view>
		</view>

		<view class="mim-view-list"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					id: ''
				},
				forms: {
					id: '',
					guard: 'admins'
				},
				detail: '',
			};
		},
		onLoad(e) {
			this.form.id = e.source_id
			this.forms.id = e.id
			this.messagesDetailsFn()
			this.messagesReadFn()
		},
		methods: {
			//获取消息信息
			async messagesDetailsFn() {
				const res = await this.$u.api.messagesDetails(this.form)
				this.detail = res.data

			},
			//标记已读
			async messagesReadFn() {
				const res = await this.$u.api.messagesRead(this.forms)
				console.log(res)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.container {
			.mim-view {
				overflow: hidden;

				.marginTop {
					margin-top: 24rpx;
				}

				.storm {
					margin-top: 24rpx;
				}

				.img_type {
					position: absolute;
					top: -70rpx;
					right: -50rpx;
					border-bottom: none;
				}

				.pre-box {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
				}

				.pre-item {
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					position: relative;
					margin-left: 20rpx;
					margin-bottom: 20rpx;
				}

				.pre-item-image {
					width: 100%;
					height: 160rpx;
				}

				.select {
					position: relative;

					.select_img {
						position: absolute;
						right: 0;
						top: 38rpx;
					}
				}
			}

			.mim-view-last {
				padding: 56rpx;
				background: transparent;
			}

			.mim-foot {
				width: 100%;
				height: 136rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: #ffffff;
				padding: 20rpx 24rpx;
				box-sizing: border-box;
				z-index: 9;

				&-button {
					width: 100%;
					border-radius: 48rpx;
					opacity: 1;
					background: #DE2E27;
					font-size: 32rpx;
					font-weight: normal;
					line-height: 32rpx;
					letter-spacing: 0px;
					color: #FFFFFF;
					height: 96rpx;
					cursor: pointer;

					&-first {
						width: 100%;
						border-radius: 48rpx;
						opacity: 1;
						background: rgba(222, 46, 39, 0.2);
						font-size: 32rpx;
						font-weight: normal;
						line-height: 32rpx;
						letter-spacing: 0px;
						color: #DE2E27;
						height: 96rpx;
						cursor: pointer;
						border: 2rpx solid #DE2E27;
						margin-right: 30rpx;
					}
				}

			}
		}

	}
</style>