<template>
    <view class="msg-list">
        <view
            v-for="(item, index) in data"
            :key="index"
        >
            <view
                :id="item.id"
                class="msg-list-dialog"
                :class="item.role ? 'c-flex-reverse-align-start' : 'c-flex-align-start'"
            >
                <view class="doctor-avator">
                    <c-avatar :src="item.avatar" :size="40"/>
                </view>
                <view 
                    class="msg-list__dialog__cont common"
                    :class="item.role ? 'patient' : 'doctor'"
                > 
                    <c-parse :nodes="item.content"/>
                    <view 
                        class="arrow"
                    >
                        <svg
                            width="6px"
                            height="14px"
                            viewBox="0 0 17 36"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                        >
                            <g
                                stroke="none"
                                stroke-width="1"
                                fill="none"
                                fill-rule="evenodd"
                            >
                                <!-- eslint-disable -->
                                <path
                                    d="M0.00063936275,0 L0.000639362751,36 C0.27534144,34.6293937 1.40988235,32.7489653 3.40426209,30.3587147 C5.03674492,28.4021951 8.36954397,25.2870124 13.4026592,21.0131668 L13.4026515,21.0131577 C15.0865864,19.5832524 15.2925182,17.0589862 13.8626129,15.3750512 C13.7314622,15.220601 13.5887655,15.0763392 13.435755,14.9435117 C8.61789649,10.7611563 5.27406552,7.61873521 3.40426209,5.51624828 C1.10365163,2.92934351 -0.0308892789,1.09059409 0.00063936275,0 Z"
                                    :fill="item.role ? '#B2EEEE' : '#ffffff'"
                                />
                            </g>
                        </svg>
                    </view>
                </view>
                <div class="msg-container-space-flex"></div>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file IM 对话消息列表
 * @displayName MsgList Im对话消息列表
 * @author shizhongwei02
 * @categories 业务组件
 * @tags [component]
 */
import CParse from '@baidu/med-ui/components/Parse/Parse';
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
export default {
    config: {
        component: true
    },
    components: {
        CParse,
        CAvatar
    },
    props: {
        /**
         * 消息列表
         */
        data: {
            type: Array,
            default: () => []
        }
    }
};
</script>

<style lang="less" scoped>
.msg-list-dialog {
    .common {
        padding: 9px 12px;
        border-radius: 9px;
        max-width: calc(100% - 80px);
        margin: 0 13px 17px;
        position: relative;
        font-size: 17px;
        .arrow {
            position: absolute;
            top: 9px;
            z-index: 1;
        }
    }
    .doctor-avator {
        position: relative;
        z-index: 2;
    }
    .patient {
        flex-direction: row-reverse;
        background: #B2EEEE;
        box-shadow: 0 0 200px 0 rgba(0,0,0,0.01);
        .arrow {
            right: -6px;
        }
    }
    .doctor {
        background: #FFFFFF;
        .arrow {
            left: -6px;
            transform:rotate(180deg);
            -ms-transform:rotate(180deg); 	/* IE 9 */
            -moz-transform:rotate(180deg); 	/* Firefox */
            -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
            -o-transform:rotate(180deg);
        }
    }
}
.c-flex-align-start {
    display: flex;
    align-items: flex-start;
}
.c-flex-reverse-align-start {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
}
.msg-container-space-flex {
    flex: 1000 0 40px;
}
</style>
