<template>
	<div class="app-content">
		<div class="chat-top-wrap">
			<scroll-view class="chat-list-wrap" scroll-y :style="{height: scrollHei}">
				<div class="chat-list" :class="[index == 2 ? 'chat-list-l' : 'chat-list-r' ]" v-for="(item, index) in 4" :key="index">
					<div class="list-time">15:20</div>
					<div class="list-blo">
						<!-- 左边时 -->
						<div class="list-attr" v-if="index == 2">
							<img :src="`${constant.imgUrl}/retail/user/attr-default.png`" alt />
						</div>
						<div class="list-content" v-if="index == 2">哇哈哈哈~ 苏伟强是个大骗子， 苏伟强是个大骗子，拉~</div>
						<div class="list-content list-img" v-else>
							<div class="list-content-img">
								<img :src="`${constant.imgUrl}/retail/extension.png`" alt mode="center" />
							</div>
							<div class="list-img-text">注册会员</div>
						</div>
						<!-- 右边时 -->
						<div class="list-attr" v-if="index != 2">
							<img :src="`${constant.imgUrl}/retail/user/attr-default.png`" alt />
						</div>
					</div>
				</div>
			</scroll-view>
		</div>
		<!-- 底部 -->
		<div class="chat-bottom-wrap app-footer">
			<!-- 快捷 -->
			<div class="tool-wrap">
				<div class="tool-tit">我想</div>
				<div class="tool-list" @click="linkShow = true">发链接</div>
				<div class="tool-list">发商品图</div>
				<div class="tool-list">发照片</div>
			</div>
			<div class="input-wrap">
				<app-search-module placeholder="输入消息..." :isIcon="false" backColor="#fff" :height="70" />
			</div>
		</div>
		<!-- 发链接弹窗 -->
		<modal-module :show="linkShow" @cancel="modalCancel" :custom="true" padding="20px 44px">
			<div class="link-modal-wrap">
				<div class="link-tit">发链接</div>
				<div class="btn-wrap">
					<button class="button-com default big">注册会员</button>
					<button class="button-com default big">快速付款</button>
					<button class="button-com default big">商城</button>
				</div>
			</div>
		</modal-module>
	</div>
</template>

<script>
import AppSearchModule from '@/components/module/app-search'
import ModalModule from '@/components/plugin/modal'
export default {
	name: 'chat-index',
	components: {
		AppSearchModule,
		ModalModule
	},
	data() {
		return {
			constant: this.$constant,
			linkShow: false
		}
	},
	onLoad(option) {},
	computed: {
		scrollHei() {
			return uni.upx2px(1334 - 170) + 'px'
		}
	},
	methods: {
		modalCancel() {
			this.linkShow = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.chat-top-wrap {
		height: calc(100% - 170px);
		.chat-list {
			width: calc(100% - 52px);
			padding: 0 26px;
			.list-time {
				color: $fontColor3;
				text-align: center;
				margin-top: 30px;
			}
			.list-blo {
				@include disFlex(flex-start, flex-start);
				margin-top: 20px;
				.list-attr {
					width: 70px;
					height: 70px;
					border-radius: 50%;
					img {
						border-radius: 50%;
					}
				}
				.list-content {
					padding: 18px 20px;
					background-color: #fff;
					border-radius: 10px;
					font-size: 30px;
					position: relative;
					color: #000;
					max-width: 66%;
					line-height: 1.4;
					&::before {
						content: '';
						position: absolute;
						width: 0;
						height: 0;
						top: 16px;
						border: 12px solid #fff;
					}
					&.list-img {
						background-color: #fff !important;
						.list-content-img {
							width: 260px;
							height: 260px;
							img {
								height: 260px;
							}
						}
						.list-img-text {
							margin-top: 12px;
							font-size: 28px;
						}
					}
				}
			}
			&:last-child {
				margin-bottom: 20px;
			}
		}
		// 左边的消息
		.chat-list-l {
			.list-content {
				margin-left: 26px;
				&::before {
					right: 100%;
					border-color: transparent #fff transparent transparent !important;
				}
			}
		}
		// 右边的消息
		.chat-list-r {
			.list-blo {
				justify-content: flex-end;
				.list-content {
					margin-right: 26px;
					background-color: #a9e368;
					&::before {
						left: 100%;
						border-color: transparent transparent transparent #a9e368 !important;
					}
					&.list-img {
						&::before {
							border-color: transparent transparent transparent #fff !important;
						}
					}
				}
			}
		}
	}
	.chat-bottom-wrap {
		width: calc(100% - 40px);
		height: 170px;
		padding: 0 20px;
		background-color: $backColor;
		display: block;
		// 快捷
		.tool-wrap {
			@include disFlex(center, flex-start);
			padding-top: 14px;
			padding-bottom: 26px;
			margin-left: 4px;
			.tool-tit {
			}
			.tool-list {
				height: 44px;
				line-height: 44px;
				border: 1px solid $borderColor;
				border-radius: 50px;
				padding: 0 14px;
				margin-left: 10px;
				background-color: #fff;
			}
		}
		// 输入框
		.input-wrap {
			/deep/.app-search-module {
				height: 70px;
				input {
					font-size: 32px;
				}
			}
        }
	}
        // 发链接弹窗
        .link-modal-wrap {
            .link-tit {
                text-align: center;
                font-size: 40px;
                margin-bottom: 40px;
            }
            .btn-wrap {
                .button-com {
                    display: block;
                    margin-bottom: 20px;
                }
            }
        }
</style>
