<template>
    <div class="wrapper">
        <el-timeline>
            <el-timeline-item
                :timestamp="ele.time"
                placement="top"
                v-for="(ele, i) in subTimelineData"
                icon="iconfont iconriqi"
                :key="i"
            >
                <div
                    v-for="(item, index) in ele.info"
                    :key="index"
                    class="time-line-box"
                >
                    <p>
                        <span class="time-lime-title">
                            <i
                                class="iconfont"
                                :class="getCategoryClass(item.category)"
                            ></i>
                            <span class="sub-title">
                                {{ item.title ? item.title : "" }}</span
                            >
                        </span>
                        <span
                            v-if="item.type && item.type === '外院'"
                            class="start-type"
                            >{{ item.type }}</span
                        >
                        <span v-else class="start-time">{{
                            item.start_time
                        }}</span>
                    </p>
                    <div class="time-line-desc">
                        <div class="">
                            <span v-if="item.description">
                                {{ item.description }}
                            </span>
                        </div>
                    </div>
                </div>
            </el-timeline-item>
            <el-timeline-item
                timestamp="last"
                placement="top"
                icon="iconfont iconriqi"
            ></el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
export default {
    props:['subTimelineData', 'tableModal'],
    data(){
        return{

        }
    },
    methods:{
        getCategoryClass(category) {
            let name = '';
            let iconVal = ''
            this.tableModal.forEach(item => {
                if (item.list.indexOf(category) >= 0) {
                    name = item.value
                }
            })
            if (name === "outpatients_hospital_record") {
                iconVal = 'iconicon1'
            } else if (name === "operationf" || name === "treatment") {
                iconVal = 'iconshengmingtizheng'
            } else if (name === "other_check_report") {
                iconVal = "iconicon2"
            } else if (name === "pathology_report" || name === "image_report") {
                iconVal = "iconicon3"
            }
            return iconVal
        },
    }
}
</script>

<style lang="less" scoped>
.wrapper{
   margin-left: 50%;
}
.table-con {
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    p {
        margin-bottom: 0;
    }
}
.time-line-table {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    .title {
        width: 100%;
        text-align: right;
        padding-top: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            color: #407df3;
            cursor: pointer;
            border-bottom: 1px solid #407df3;
            margin-right: 20px;
        }
        .cur-time {
            margin-left: 20px;
            font-size: 16px;
            display: flex;
            align-items: center;
            .line {
                display: inline-block;
                width: 3px;
                height: 12px;
                background: rgba(64, 125, 243, 1);
                border-radius: 2px;
            }
            em {
                font-style: normal;
                font-weight: 600;
                margin-left: 8px;
            }
            .sort-con {
                margin-left: 10px;
                display: inline-block;
                a {
                    cursor: pointer;
                    color: #007bff;
                }
                a.actived {
                    text-decoration: underline;
                }
            }
            .share {
                margin: 0 15px;
                i {
                    &:hover {
                        cursor: pointer;
                        color: #409eff;
                    }
                }
            }
        }
    }
    // .timeLine-con {
    //     overflow: auto;
    //     height: calc(100% - 35px);
    // }
    .iconfont {
        font-size: 12px !important;
    }
}
.column-title {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    text-align: justify;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
}
.column-des {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: justify;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
}
.report-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    span {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
    }
    .name {
        margin-right: 15px;
    }
    .val {
        margin-right: 8px;
    }
}
.lab-content {
    .lab-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 35px;
        line-height: 35px;
        padding-right: 30px;
        box-sizing: border-box;
        cursor: pointer;
        .el-button {
            background-color: transparent;
            border: 1px dashed transparent;
            margin-left: 10px;
            padding: 0px;
            margin-right: 10px;
            span {
                i {
                    font-size: 20px;
                }
            }
        }
        .name {
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: justify;
            color: rgba(0, 0, 0, 0.85);
            line-height: 22px;
        }
        .val-unit-normal {
            .val-unit {
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                text-align: justify;
                color: rgba(0, 0, 0, 0.85);
                line-height: 22px;
                em {
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    font-weight: 400;
                    text-align: justify;
                    color: rgba(0, 0, 0, 0.85);
                    line-height: 22px;
                    margin-right: 5px;
                }
            }
            .normal {
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                text-align: justify;
                color: rgba(0, 0, 0, 0.85);
                line-height: 22px;
            }
        }
    }
}
.chart-con {
    padding: 20px;
    .chart-item {
        margin-bottom: 20px;
        .title {
            display: flex;
            justify-content: space-between;
            height: 80px;
            line-height: 80px;
            span {
                border: none;
            }
            .name-unit {
                padding-left: 30px;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                text-align: justify;
                color: rgba(0, 0, 0, 0.85);
                line-height: 22px;
            }
        }
    }
}Ï

// timeline
ul {
    transform: translateX(0%);
    position: absolute;
    left: 50%;
    width: 100%;
}
ul li {
    list-style: none;
    position: relative;
    height: 100%;
    width: 50%;
    .iconDate {
        display: inline-block;
        padding: 5px;
        border-radius: 20px;
        color: #fff;
        background-color: #407df3;
    }
    .line {
        position: absolute;
        width: 1px;
        left: 9px;
        top: 1px;
        border-left: 2px solid #000;
        height: 100%;
    }
    .time {
        position: relative;
        z-index: 999;
    }
    .time-lime-title {
        font-size: 14px;
        font-weight: 600;
        display: flex;
        flex-direction: row;
        .iconfont {
            width: 22px;
            font-size: 22px !important;
            color: #6693ff;
        }
        .sub-title {
            max-width: 300px;
            line-height: 25px;
            font-size: 14px;
            font-weight: 600;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
        }
    }
    .timeContent {
        margin-left: 20px;
    }
    .start-time {
        margin-left: 10px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 12px;
        line-height: 25px;
    }
    .start-type {
        margin: 0 10px;
        line-height: 16px;
        height: 18px;
        margin-top: 3px;
        font-style: normal;
        display: inline-block;
        padding: 2px 10px;
        background: rgba(62, 152, 255, 0.12);
        border-radius: 4px;
        font-size: 12px;
        border: 1px solid rgba(62, 152, 255, 1);
        color: #3e98ff;
    }
    .time-line-desc {
        color: rgba(0, 0, 0, 0.65);
        font-size: 12px;
        margin-bottom: 8px;
        width: calc(100% - 50px);
        opacity: 0.8;
        line-height: 22px;
        font-family: PingFangSC, PingFangSC-Regular;
        word-wrap: break-word;
        display: inline-block;
    }
    .time-line-box {
        display: flex;
        margin-top: 32px;
        flex-direction: column;
        position: relative;
        p::after {
            content: "";
            display: inline-block;
            width: 12px;
            height: 1px;
            border-top: 2px solid #e4e7ed;
            position: absolute;
        }
        p {
            margin: 0;
            margin-bottom: 8px;
            display: flex;
        }
    }
}
ul {
    li:nth-of-type(even) {
        .time-line-box {
            text-align: right;
            // justify-content: flex-end;
            p {
                display: flex;
                // justify-content: flex-end;
                flex-direction: row-reverse;
                align-items: center;
                // margin-bottom: 0;
                .start-time {
                    margin-right: 10px;
                }
                .time-lime-title {
                    display: flex;
                    // justify-content: flex-end;
                    flex-direction: row-reverse;
                }
            }
            p::after {
                right: -37px;
                top: 12px;
            }
            .iconfont {
                margin-left: 12px;
            }
            .time-line-desc {
                margin-right: 34px;
                // padding-left: 20px;
            }
            .check {
                display: inline-block;
                width: 26px;
            }
        }
    }
    li:nth-of-type(odd) {
        .time-line-box {
            p::after {
                left: -35px;
                top: 12px;
            }
            .iconfont {
                margin-right: 12px;
            }
            .time-line-desc {
                margin-left: 34px;
                // padding-right: 20px;
            }
            .check {
                display: inline-block;
                width: 26px;
            }
        }
    }
}
</style>