<template>
    <div class="full-check">
        <div class="full-check-hd">
            <p><span>病例资料整理</span></p>
            <p><i class="el-icon-close"></i></p>
        </div>
        <div class="full-check-con">
            <div class="left">
                <common-mark :multiple="false" size="big"/>
            </div>
            <div class="right" :class="{'show': show}">
                <p @click="show = !show">
                    <i class="iconfont iconxiaoxi"></i>
                    <span class="num">8</span>
                </p>
                <div class="right-con">
                    <p>评论列表</p>
                    <el-scrollbar class="scroll" tag="div">
                        <div class="mark-item">
                            <p class="mark-title"><span>刘医生</span>发表了评论</p>
                            <div class="mark-content">这里是评论内容这里是评论内容这里是评论内容这里是评论内容</div>
                            <div class="mark-footer"><span>03-31 12:30:23</span><span>回复</span></div>
                            <div class="mark-review">
                                <p class="mark-title"><span>刘医生</span>回复<span style="margin-left:5px">刘医生</span></p>
                                <div class="mark-content">这里是评论内容这里是评论内容这里是评论内容这里是评论内容</div>
                                <div class="mark-footer"><span>03-31 12:30:23</span><span>回复</span></div>
                                <div class="mark-total"><p>共5条回复<i class="el-icon-caret-bottom"></i></p></div>
                            </div>
                        </div>
                    </el-scrollbar>
                    <div class="mark-input">
                        <el-input type="text" size="mini" placeholder="请输入评论内容"></el-input>
                        <p>发表</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import commonMark from '../components/common-mark.vue'
import { debounce } from 'lodash'
export default {
    components: { commonMark },
    data() {
        return {
            show: false
        }
    }
}
</script>
<style lang="less" scoped>
.full-check {
    height: 100vh;
    position: fixed;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 10;
    &-hd {
        height: 62px;
        background: #ffffff;
        border-bottom: 1px solid rgba(151,151,151,.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(0,0,0,0.85);
        .el-icon-close {
            height: 30px;
            line-height: 30px;
            width: 30px;
            text-align: center;
            cursor: pointer;
        }
    }
    &-con {
        background: #d8d8d8;
        height: calc(100% - 62px);
        display: flex;
        .left {
            overflow: hidden;
            flex: 1;
            transform: all 3s;
        }
        .right {
            width: 0;
            background-color: #fff;
            transition: width 0.5s;
            position: relative;
            i.iconfont {
                width: 28px;
                height: 28px;
                color: #fff;
                line-height: 28px;
                font-size: 20px;
            }
            > p {
                width: 28px;
                height: 28px;
                text-align: center;
                background: #1890ff;
                border-radius: 4px 0px 0px 4px;
                box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.19); 
                position: absolute;
                left: -28px;
                top: 20px;
                margin: 0;
                span {
                    position: absolute;
                    top: -5px;
                    right: 20px;
                    height: 13px;
                    line-height: 13px;
                    background: #eb1111;
                    border-radius: 6px;
                    font-size: 12px;
                    color: #fff;
                    padding: 0 3px;
                }
            }
            &.show {
                width: 296px;
                transition: width 0.5s;
            }
            .right-con {
                height: 100%;
                position: relative;
                width: 296px;
                overflow: hidden;
                >p {
                    margin: 0;
                    padding: 20px 20px 10px;
                    font-size: 16px;
                    font-family: PingFangSC, PingFangSC-Medium;
                    font-weight: 500;
                    color: rgba(0,0,0,0.85);
                }
                .scroll {
                    height: calc(100% - 51px);
                }
                .mark-input {
                    width: 100%;
                    position: absolute;
                    bottom: 30px;
                    padding: 0 20px;
                    display: flex;
                    .el-input {
                        flex: 1;
                    }
                    p {
                        width: 36px;
                        height: 28px;
                        background: #3e98ff;
                        border-radius: 4px;
                        margin: 0 0 0 13px;
                        line-height: 28px;
                        text-align: center;
                        font-size: 12px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        color: #ffffff;
                    }
                }
                .mark-item {
                    // margin-top: 10px;
                    padding: 0 20px;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    .mark-title {
                        padding: 8px 0;
                        margin: 0;
                        color: rgba(0,0,0,.8);
                        span {
                            font-family: PingFangSC, PingFangSC-Medium;
                            font-weight: 500;
                            color: #1890ff;
                            margin-right: 5px;
                        }
                    }
                    .mark-content {
                        line-height: 21px;
                    }
                    .mark-footer {
                        height: 30px;
                        font-size: 12px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        span:last-child {
                            text-decoration: underline;
                            color: #1890ff;
                            cursor: pointer;
                        }
                        span:first-child {
                            color: rgba(0,0,0,.6);
                        }
                    }
                    .mark-review {
                        background: #f6faff;
                        border-left: 1px solid rgba(24,144,255,.2);
                        padding: 0 8px;
                        .mark-title {
                            padding: 10px 0;
                        }
                    }
                    .mark-total {
                        font-size: 12px; 
                        padding-bottom: 10px;
                        color: #1890ff;
                        p {
                            display: inline-block;
                            margin: 0;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
</style>