<template>
    <!-- pages/entryWrite/page/Entry/prescription/prescProcess/prescProcess.wxml -->
    <view class="body">
        <block v-if="processData && processData.length > 0">
            <view class="timeline">
                <block v-for="(item, index) in processData" :key="index">
                    <view class="timeline__step">
                        <view class="timeline__left">
                            <view class="timeline__time">{{ item.time }}</view>
                            <view class="timeline__date">{{ item.date }}</view>
                        </view>
                        <view class="timeline__right">
                            <view class="timeline__dot" :class="(index === processData.length - 1) ? 'timeline__dot--last' : ''"></view>
                            <view class="timeline__title">{{ item.desc }}</view>
                            <view class="timeline__doc">{{ item.docDesc }}</view>
                            <block v-for="(reasonItem, idx1) in item.medData" :key="idx1">
                                <view class="timeline__reason">{{ reasonItem.reason }}</view>
                                <block v-for="(medItem, idx2) in reasonItem.date" :key="idx2">
                                    <view class="timeline__med">
                                        {{ medItem.medItem }}{{ medItem.spec !== undefined && medItem.spec !== '' ? '【' + medItem.spec + '】' : '' }}
                                    </view>
                                </block>
                            </block>
                            <block v-if="(item.docAppeal !== undefined && item.docAppeal !== '') || (item.auditRemarks !== undefined && item.auditRemarks !== '')">
                                <view class="timeline__remark">
                                    备注：<text class="timeline__remark-text">{{ item.docAppeal !== undefined && item.docAppeal !== '' ? item.docAppeal : item.auditRemarks }}</text>
                                </view>
                            </block>
                        </view>
                    </view>
                </block>
            </view>
        </block>
        <view v-else class="empty">
            <text>暂无处理记录</text>
        </view>
    </view>
</template>
<script>
// pages/entryWrite/page/Entry/prescription/prescProcess/prescProcess.js
import { $http } from '../../../../../../config/https.js';
export default {
    data() {
        return {
            processData: [],
            ordID: ''
        };
    },
    onLoad: function (options) {
        console.log('onLoadOptions', options);
        if (options.ordID) {
            this.handlePrescAudit(options.ordID);
        }
    },
    onReady: function () {},
    onShow: function () {
        if (this.processData.length < 0) {
            let { ordID } = this;
            this.handlePrescAudit(ordID);
        }
    },
    onHide: function () {},
    onUnload: function () {},
    onPullDownRefresh: function () {},
    onReachBottom: function () {},
    onShareAppMessage: function () {},
    methods: {
        sortData: function (processData) {
            processData.map((element) => {
                if (element.docTitle !== '' && element.docTitle !== undefined) {
                    element.docDesc = `【${element.docTitle}: ${element.docName}】`;
                }
            });
            this.setData({
                processData
            });
            console.log('processData:', processData);
        },

        handlePrescAudit: function (ordID) {
            let data = {
                params: [
                    {
                        ordID: ordID
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100106',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        this.sortData(res.result.data);
                    }
                }
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
}
.body {
    margin-top: 0;
    height: 100%;
    overflow: auto;
    background: #ffffff;
}
.timeline {
    padding: 24rpx 30rpx 40rpx;
}
.timeline__step {
    display: flex;
    padding: 8rpx 0;
}
.timeline__left {
    flex: 0 0 160rpx;
    text-align: right;
    margin-right: 20rpx;
    padding-top: 2rpx;
    white-space: nowrap;
}
.timeline__time {
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
    line-height: 1.4;
}
.timeline__date {
    font-size: 22rpx;
    color: #999999;
    margin-top: 2rpx;
    line-height: 1.4;
    white-space: nowrap;
}
.timeline__right {
    flex: 1;
    position: relative;
    padding-left: 36rpx;
    border-left: 2rpx solid #e9eaec;
    padding-bottom: 24rpx;
    min-height: 60rpx;
}
.timeline__dot {
    position: absolute;
    left: -10rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    background: #387ef5;
    border: 2rpx solid #ffffff;
    box-shadow: 0 0 0 1rpx #387ef5;
    z-index: 2;
}
.timeline__dot--last {
    background: #ffffff;
    box-shadow: 0 0 0 1rpx #387ef5;
}
.timeline__title {
    font-size: 30rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 1.5;
}
.timeline__doc {
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.65);
    margin-top: 6rpx;
    line-height: 1.5;
}
.timeline__reason {
    font-size: 26rpx;
    color: #ff9933;
    margin-top: 10rpx;
    line-height: 1.5;
}
.timeline__med {
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.65);
    margin-left: 20rpx;
    margin-top: 4rpx;
    line-height: 1.5;
}
.timeline__remark {
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.65);
    margin-top: 10rpx;
    line-height: 1.5;
}
.timeline__remark-text {
    color: #ff9933;
}
.empty {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80rpx 0;
    color: #999999;
    font-size: 28rpx;
}
</style>
