<template>
    <div class="div-list-content">
        <ul>
            <li v-for='(doctor, index) in records' :class='["qyxx cur-pit ", (dialogIndex === index) || (!dialogIndex && readJudge && judgeIndex === index) ? "active" : ""]' :key="doctor.code" @click="clickDoctor(doctor, index)" >
                <div class="l-info">
                    <div class="c-avatar-m" v-html="doctor.img">{{doctor.img ? photoSrc(doctor.img) : ''}}</div>
                    <div class="c-list-info">
                        <p class="c-name">{{doctor.name}}</p>
                        <p id="sign_lastMsg" class="c-909090 text-ellipsis">{{doctor.last_content ? formatMsg(doctor.last_content, doctor.last_content_type) : ""}}</p>
                    </div>
                    <p class="c-c8c8c8 c-f12 pt10 pr5 p-time">
                        <span>{{doctor.create_date ? strMsgTime(doctor.create_date) : ''}}</span>
                        <span v-show="doctor.unread_count > 0" class="red-dot c-f12">{{doctor.unread_count > 99 ? '99+' : doctor.unread_count }}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
    .c-avatar-m {
        position: relative;
        width: 39px;
        height: 39px;
        border-radius: 50%;
        overflow: hidden;
    }
    
    .icon-qyxx {
        background-image: url(../../../public/images/qianyuexiaoxi_icon.png);
        background-repeat: no-repeat;
    }

    .icon-jktz {
        background-image: url(../../../public/images/jiankangtizheng_icon.png);
        background-repeat: no-repeat;
    }

    .icon-xtxx {
        background-image: url(../../../public/images/xitongxiaoxi.png);
        background-repeat: no-repeat;
    }

    .icon-xfxx {
        background-image: url(../../../public/images/xufangxiaoxi_icon.png);
        background-repeat: no-repeat;
    }

    .c-f16 {
        font-size: 16px;
    }

    .c-f14 {
        font-size: 14px;
    }

    .c-f12 {
        font-size: 12px;
    }

    .c-999 {
        color: #999
    }

    .c-c8c8c8 {
        color: #c8c8c8;
    }

    .div-list-content ul li {
        height: 60px;
        position: relative;
        display: -webkit-box;
        padding-left: 60px;
    }

    .div-list-content ul li .l-info {
        display: -webkit-box;
        width: 100%;
    }

    .div-list-content .c-avatar-m {
        background-size: 39px 39px;
        width: 39px;
        height: 39px;
        margin: 10px 0px 0px;
        border-radius: 39px;
        position: absolute;
        left: 10px;
    }
    
    .div-list-content .red-dot {
        background: red;
        min-width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 11px;
        margin: 2px auto 0px;
        border-radius: 18px;
        text-align: center;
        position: absolute;
        right: 5px;
        bottom: 10px;
        color: #fff;
    }

    .userName {
        color: #333;
        padding-bottom: 5px;
    }

    .text-ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .div-list-content ul li:hover {
        background: #ebebf5;
    }

    .div-list-content ul li.active {
        background: #cbcbd2;
    }

    .div-list-content ul li.active .userName,
    .div-list-content ul li.active .p-content,
    .div-list-content ul li.active .p-time {
        color: #333;
    }
</style>

<script>
import common from '../../assets/js/common'

export default {
    props: ['records', 'readJudge', 'dialogIndex'],
    components: {},
    mounted() {

    },
    computed: {
    },
    // 监听全局传值
    created() {
        this.$root.bus.$on('judgeSessionId', value => {
            this.judgeSessionIndex(value)
        })
    },
    data() {
        return {
            activeMode: null,
            judgeIndex: null
        }
    },
    methods: {
        photoSrc(str) {
            return common.setImgUrl(str)
        },
        formatMsg(msg, type) {
            switch (parseInt(type)) {
                case 1: return msg
                case 2: return '[图片]'
                case 3: return '[语音]'
                case 4:
                    msg = msg.replace(/\n/g, '\\n')
                    msg = msg.replace(/\r/g, '\\r')
                    msg = JSON.parse(msg)
                    var msgType = msg.type || 0
                    if (Number(msgType) === 0) {
                        return '[健康教育]'
                    } else if (Number(msgType) === 1) {
                        return '[健康记录]'
                    } else {
                        return '[健康指导]'
                    }
                case 5:
                    msg = JSON.parse(msg)
                    return '已向' + msg.doctor_name + '求助'
                case 6: return msg
                case 7: return msg
                case 12: return '[视频]'
                case 13: return msg
                case 18: return '[居民名片]'
                case 19: return '[聊天记录]'
            }
        },
        // 前缀‘0’添加
        addStr0(num) {
            if (num < 10) {
                return '0' + num
            } else {
                return num
            }
        },
        // 消息时间
        strMsgTime(data) {
            let timed = new Date().setTime(data),
                time = new Date(timed) + '',
                result = new Date(timed),
                nowTime = new Date() + ''
            // 年份不同立即返回
            if (time.substring(11, 15) !== nowTime.substring(11, 15)) {
                let string = result.getFullYear() + '-' + this.addStr0(result.getMonth() + 1) + '-' + this.addStr0(result.getDate())
                return string
            }
            //  判断与当前日期是否一致
            if (time.substring(0, 10) === nowTime.substring(0, 10)) {
                let string = this.addStr0(result.getHours()) + ':' + this.addStr0(result.getMinutes())
                return string
            } else {
                let string = this.addStr0(result.getMonth() + 1) + '-' + this.addStr0(result.getDate())
                return string
            }
        },
        // 传回组件点击信息
        clickDoctor(doctor, index) {
            this.judgeIndex = index
            this.$emit('clickDoctor', doctor)
            this.$root.bus.$emit('scrollCon', true)
        },
        // 列表第一个附上属性action
        judgeSessionIndex(value) {
            this.judgeIndex = value
        }
    }
}
</script>
