<template>
    <view class="im-consult-edit">
        <view class="header">
            <view class="title-wrap">
                <view class="title c-font-17 c-color-title">{{ msgInfo.title }}</view>
                <view v-if="msgInfo.subTitle" class="sub-title c-font-small">{{ msgInfo.subTitle }}</view>
            </view>
            <view v-if="msgInfo.btnInfo && msgInfo.btnInfo.btnText" class="btn-wrap">
                <view class="btn" @tap="showPop">{{ msgInfo.btnInfo.btnText }}</view>
            </view>
        </view>
        <view class="c-line-superfine-after gap-style"/>
        <view class="main">
            <view class="desc-wrap c-gap-top c-gap-bottom">
                <view
                    v-for="(item, index) in msgInfo.patientInfo.descList"
                    :key="index"
                    class="desc-item c-color-title"
                >{{ item.text }}</view>
            </view>
            <view
                v-if="msgInfo.patientInfo && msgInfo.patientInfo.imgList && msgInfo.patientInfo.imgList.length"
                class="img-wrap c-gap-inner-bottom-small"
            >
                <view
                    v-for="(item, index) in msgInfo.patientInfo.imgList"
                    :key="index"
                    class="img-item"
                    :style="{
                        'background-image': 'url(' + item + ')',
                    }"
                    @tap="handleImageClick(item)"
                />
            </view>
            <view class="footer">
                <view class="icon"/>
                {{ msgInfo.tipInfo.text }}
            </view>
        </view>
    </view></template>
<script>
/**
 * @file im-consult-edit.vue
 * @author rongtan<rongtan@baidu.com>
 * @date 2021-08-10
 */

export default {
    config: {
        component: true
    },
    props: {
        msgInfo: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {};
    },
    methods: {
        showPop() {
            this.$emit('popup', this.msgInfo);
        },
        handleImageClick(item) {
            const urls =  this.msgInfo.patientInfo.imgList || [];
            const current = item;
            this.$api.previewImage({
                current,
                urls
            });
        }
    }
};
</script>
<style lang="less" scoped>
.im-consult-edit {
    width: calc(100vw - .34rem - 104px - 24px); // 与msg-container-main的最大宽度对齐
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: -.1rem;
        padding: .1rem 0
    }
    .title {
        line-height: .27rem;
        font-weight: bold;
    }
    .sub-title {
        line-height: 1;
        color: #b5b5b5;
        padding-bottom: .05rem;
    }
    .btn-wrap {
        display: flex;
        justify-content: flex-end;
        min-width: 66px;
        height: 28px;
        text-align: right;
        .btn {
            min-width: 66px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: .5px solid #B8B8B8;
            color: #1f1f1f;
            font-size: 14px;
            border-radius: 20px;
        }
    }
    .img-wrap {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .img-item {
            width: 30.15%;
            height: 0;
            padding: 0;
            padding-bottom: 30.15%;
            margin-right: 4.76%;
            margin-bottom: 4.76%;
            background: #C2C2C2;
            border-radius: 4px;
            overflow: hidden;
            background-size: cover;
            background-repeat: no-repeat;
            &:nth-child(3n) {
                margin-right: 0;
            }
            .img-item {
                width: 100%;
                height: 100%;
            }
        }
    }
    .footer {
        color: #00C8C8;
        font-size: 12px;
        line-height: 1.4;
        padding: 7px 0;
        background: #EBFBFB;
        background-image: url(https://med-fe.cdn.bcebos.com/logo/health-logo-mini.png);
        background-repeat: no-repeat;
        background-position: 12px 9px;
        background-size: 13px 13px;
        margin: 0 -.12rem -.1rem -.12rem;
        padding-left: 29px;
    }
}
</style>
