<template>
	<div class="cl-chat__wrap">
		<el-dialog :visible.sync="visible" :close-on-click-modal="false" width="1000px">
			<div class="cl-chat">
				<div class="cl-chat__left">
					<div class="header">
						<el-input
							placeholder="搜索联系人"
							size="small"
							prefix-icon="el-icon-search"
						></el-input>
					</div>
					<div class="container">
						<ul class="users">
							<li
								v-for="(item, index) in userList"
								:key="index"
								@click="toChat(item)"
							>
								<img class="avatar" :src="item.smallAvatarUrl" alt="" />

								<div class="det">
									<p>{{ item.userName }}</p>
									<div>{{ item.source }}</div>
								</div>

								<div class="date">
									{{ item.chatTime }}
								</div>
							</li>
						</ul>
					</div>
				</div>

				<div class="cl-chat__right">
					<div class="header">
						<span>闪亮亮</span>
						<div class="icon" @click="hide()">
							<i class="el-icon-minus"></i>
						</div>
					</div>

					<div class="container">
						<ul class="message">
							<li
								v-for="(item, index) in messageList"
								:key="index"
								:class="[item.my ? 'right' : 'left']"
							>
								<img class="avatar" src="" alt="" />
								<div class="det">
									<div class="label">
										<span class="name">刘先生</span>
										<span class="date">2020-12-22</span>
									</div>
									<div class="content">
										<p class="block text" v-if="item.type == 'text'">
											{{ item.text }}
										</p>
										<el-image
											class="block pic"
											v-else-if="item.type == 'pic'"
											:src="item.src"
											:preview-src-list="[item.src]"
										></el-image>
									</div>
								</div>
							</li>
						</ul>
					</div>

					<div class="footer">
						<ul class="tools">
							<li>
								<el-button size="mini">商品图</el-button>
							</li>
							<li>
								<el-upload action="">
									<el-button size="mini" icon="el-icon-picture"></el-button>
								</el-upload>
							</li>
						</ul>

						<el-button class="send-btn" size="small" type="primary">发送</el-button>
					</div>
				</div>
			</div>
		</el-dialog>

		<el-button
			class="cl-chat__notice"
			v-show="!visible"
			icon="el-icon-message-solid"
			round
			size="small"
			@click="show()"
		></el-button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			visible: false,
			userList: [],
			messageList: [
				{
					type: 'text',
					text: '我是厦门第一'
				},
				{
					type: 'pic',
					src:
						'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2164724814,1401845036&fm=26&gp=0.jpg'
				},
				{
					type: 'text',
					text: '我是厦门第二',
					my: true
				},
				{
					type: 'pic',
					src:
						'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3973065280,787801978&fm=26&gp=0.jpg',
					my: true
				}
			]
		};
	},

	methods: {
		getUserList() {
			this.$service.chat.recentlyUser().then(res => {
				this.userList = res;
			});
		},

		toChat(e) {
			this.$service.chat.begin({ id: e.id }).then(res => {
				console.log(res);
			});
		},

		show() {
			this.visible = true;
			this.getUserList();
		},

		hide() {
			this.visible = false;
		}
	}
};
</script>

<style lang="stylus" scoped>
.cl-chat__wrap {
    >>>.el-dialog {
        &__header {
            display: none;
        }

        &__body {
            padding: 0;
        }
    }

    .cl-chat {
        display flex;
        height 600px;

        &__left {
            width: 300px;
            background-color #F7F6F9;

           .header {
               display flex;
               align-items center;
               height: 60px;
               padding: 0 20px;
               border-bottom: 1px solid #eee;

               .el-input {
                   >>>input {
                       border-radius: 30px;
                     background-color #E7E6E9;
                   }
               }
           }

           .container {
               height: calc(100% - 60px);
               overflow auto;

                .users {
                    display flex;
                    flex-direction column;
                li {
                    list-style none;
                    display flex;
                    align-items center;
                    height: 40px;
                    padding: 10px  15px;
                    border-bottom: 1px solid #eee;
                    cursor pointer;

                    &:hover,
                    &.active {
                        background-color #eee;
                    }

                    .avatar {
                        height 40px;
                        width 40px;
                        border-radius: 40px;
                        background-color #ddd;
                    }

                    .det {
                        flex: 1;
                        margin 0 10px;
                    }

                    .date {
                        font-size 12px;
                        color: #999;
                        height 100%;
                    }
                }
            }
           }
        }

        &__right {
            width calc(100% - 300px);

            .header {
                display flex;
               align-items center;
               height: 60px;
               padding: 0 20px;
               position relative;

               .icon {
                   position absolute;
                   right: 0;
                   top: 0;
                   background-color #DAD9DC;
                   height 30px;
                   width: 30px;
                   color: #fff;
                   line-height 30px;
                   text-align center;
                   cursor pointer;

                    &:hover {
                       opacity 0.7;
                    }
               }
            }

            .container {
                border-top: 1px solid #eee;
                border-bottom: 1px solid #eee;
                box-sizing border-box;
                height calc(100% - 260px);
                overflow auto;

                .message {
                    padding: 10px;

                    li {
                        display flex;
                        list-style none;
                        margin-bottom 30px;

                        .avatar {
                            height 40px;
                            width 40px;
                            border-radius: 40px;
                            background-color #ddd;
                            margin 0 10px 0 0;
                        }

                        .det {
                            .label {
                                display flex;
                                align-items center;

                                .name {
                                    margin 0 10px 0 0;
                                }
                                .date {
                                    font-size 12px;
                                    color: #999;
                                }
                            }

                            .content {
                                display flex;
                                color: #666;
                                margin-top 10px;

                                .block {
                                    background-color #eee;
                                    padding: 5px 10px;
                                    border-radius: 3px;
                                }

                                .text {
                                    line-height 20px;
                                    font-size 12px;
                                }

                                .pic {
                                    width: 50%;
                                    padding: 10px;
                                }
                            }
                        }

                        &.right {
                            flex-direction  row-reverse;

                            .avatar {
                                margin 0 0 0 10px;
                            }

                            .label {
                                flex-direction  row-reverse;

                                .name {
                                    margin 0 0 0 10px;
                                }
                            }

                            .content {
                                justify-content flex-end;
                            }
                        }
                    }
                }
            }

            .footer {
                height 200px;
                position relative;

                .tools {
                    display flex;
                    align-items center;
                    height 40px;

                    li {
                        list-style none;
                        margin-left 10px;
                    }
                }

                .send-btn {
                    position absolute;
                    right 10px;
                    bottom: 10px;
                }
            }
        }
    }

    .cl-chat__notice {
        position fixed;
        bottom: 30px;
        right: 20px;
    }
}
</style>
