<template>
    <div class="check-doc">
        <i class="icon-fixed iconfont iconyanjing" @click="close"></i>
        <h3>浏览记录</h3>
        <div class="btn-box">
            <p>
                <span @click="changeTab(1)" :class="{'active': currentTab == 1}">已查看</span>
                <span @click="changeTab(0)" :class="{'active': currentTab == 0}">未查看</span>
            </p>
        </div>
        <el-scrollbar tag="div" style="height:calc(100% - 102px)">
            <div v-if="showList.length == 0" style="padding: 0 20px;font-size:12px;opacity: 0.8;color: #000">暂无数据~</div>
            <div class="check-list" v-for="i in showList" :key="i.id"><span :style="{background: colorList[getBgColor()]}">{{i.doctorName ? i.doctorName.slice(0,1) : ''}}</span><p>{{i.doctorName || ''}}</p></div>
        </el-scrollbar>
    </div>
</template>
<script>
import {
  getLookRecord
} from "@/request/mdt";
export default {
    props: {
        mdtId: [String,Number]
    },
    data() {
        return {
            colorList: {
                '0': '#6DA3EF',
                '1': '#E98585',
                '2': '#6DBDBA',
                '3': '#6DA3EF',
            },
            currentTab: 1,
            noticeLists: []
        }
    },
    created() {
        this.open()
    },
    computed: {
        showList() {
            return this.noticeLists.filter(item => item.lookStatus == this.currentTab)
        }
    },
    methods: {
        open(d) {
            this.currentTab = 1;
            this.getLookRecord()
        },
        close() {
            this.currentTab = 1;
            this.$emit('close', false)
        },
        changeTab(n) {
            this.currentTab = n;
        },
        getBgColor() {
            return Math.floor(Math.random() * 4)
        },
        async getLookRecord() {
            const { data, code, msg} = await getLookRecord(this.mdtId)
            if(code == 0){
                this.noticeLists = data
            } else {
                this.noticeLists = []
                this.$message.error(msg)
            }
        }
    }
}
</script>
<style lang="less">
.lv-drawer.el-drawer.rtl {
    width: 173px !important;
    background-color: transparent;
    box-shadow: none;
    .el-drawer__body {
        padding: 0 0 0 30px!important;
        box-shadow: none;
    }
    .el-scrollbar__wrap {
        overflow-x: hidden;
    }
}
</style>
<style lang="less" scoped>
.check-doc {
    height: 100%;
    width: 143px;
    position: relative;
    background-color: #fff;
    .icon-fixed {
        position: absolute;
        top: 49%;
        left: -28px;
        color: #fff;
        width: 28px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        background: #1890ff;
        border-radius: 4px 0px 0px 4px;
        box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.19); 
        cursor: pointer;
    }
    h3 {
        margin: 0;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: rgba(0,0,0,0.85);
        padding: 20px 20px 15px;
    }
    .btn-box {
        display: flex;
    justify-content: center;
    padding-bottom: 20px;
    // height: 46px;
    > p {
      width: 104px;
      height: 26px;
      background: #ffffff;
      border-radius: 4px;
      display: flex;
      margin: 0;
      span {
        width: 52px;
        text-align: center;
        height: 100%;
        line-height: 26px;
        border: 1px solid #d9d9d9;
        color: rgba(0, 0, 0, 0.65);
        cursor: pointer;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
      }
      span:first-child {
        border-radius: 4px 0 0 4px;
        border-right: transparent;
      }
      span:last-child {
        border-radius: 0 4px 4px 0;
        border-left: transparent;
      }
      span.active {
        border: 1px solid #1890ff;
        color: #1890ff;
      }
    }
    }
    .check-list {
        display: flex;
        align-items: center;
        padding: 0 10px 0 20px;
        margin-bottom: 12px;
        span {
            width: 28px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background: #e98585;
            border-radius: 50%;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            color: #ffffff;
        }
        p {
            margin: 0;
            flex: 1;
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            opacity: 0.8;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            color: #000000;
            padding-left: 8px;
        }
    }
}
</style>