<template>
    <view class="page-body">
        <view class="medInfo">
            <van-cell title-class="titleClass" center title="医嘱信息" value="" />
            <block v-if="prescAudit.medData && prescAudit.medData.length > 0">
                <block v-for="(item, index) in prescAudit.medData" :key="index">
                    <view class="item">
                        <!-- <van-cell title="{{item.medItem}}" label="{{item.dose+item.medPrice}}"/> -->
                        <view class="item-meddesc-text">
                            <view class="item-meddesc">
                                <block v-if="prescAudit.prescTypeCode === 'CM'">
                                    <view
                                        class="herbs-item-comPrinciple"
                                        :style="
                                            'background-color:' +
                                            (item.comPrinciple == '君'
                                                ? '#FFA23E'
                                                : herbsItem.comPrinciple == '臣'
                                                ? '#39D1D1'
                                                : herbsItem.comPrinciple == '佐'
                                                ? '#FA5AB2'
                                                : '#AA71F9')
                                        "
                                    >
                                        {{ item.comPrinciple + '药' }}
                                    </view>
                                    <view class="herbs-item-medItem">{{ item.medItem }}</view>
                                    <view class="herbs-item-decoctMethod">【{{ item.decoctMethod }}】</view>
                                </block>
                                <block v-else>
                                    <view class="item-round"></view>
                                    <view>{{ item.medItem }}</view>
                                </block>
                            </view>
                            <view>
                                <text class="item-medSpec">规格: {{ item.spec }}</text>
                            </view>
                        </view>
                        <view class="item-medPrice-view">
                            <view class="item-medPrice">{{ '￥' + item.medPrice }}</view>
                            <view class="item-medQty">x1</view>
                        </view>
                    </view>
                </block>
                <view class="item-medUsage-view">
                    <view class="item-medUsage-label">{{ '用法: ' }}</view>
                    <view class="item-medUsage" v-if="prescAudit.prescTypeCode === 'CM'">
                        {{ prescAudit.medData[0].durQty !== undefined && prescAudit.medData[0].durQty !== '' ? prescAudit.medData[0].durQty : ''
                        }}{{ prescAudit.medData[0].freqDesc !== undefined && prescAudit.medData[0].freqDesc !== '' ? ' , ' + prescAudit.medData[0].freqDesc : ''
                        }}{{ prescAudit.medData[0].dose !== undefined && prescAudit.medData[0].dose !== '' ? ' , ' + prescAudit.medData[0].dose : '' }}
                    </view>
                    <view class="item-medUsage" v-else>
                        {{ prescAudit.medData[0].frequence !== undefined && prescAudit.medData[0].frequence !== '' ? prescAudit.medData[0].frequence : ''
                        }}{{ prescAudit.medData[0].usage !== undefined && prescAudit.medData[0].usage !== '' ? ' , ' + prescAudit.medData[0].usage : '' }}
                    </view>
                </view>
            </block>
        </view>
        <view class="audit-process-view">
            <block v-for="(auditItem, index) in newestAuditDetail" :key="index">
                <block v-if="auditItem.audDate && auditItem.audDate.length > 0">
                    <view class="auditDetail-view">
                        <van-cell
                            custom-class="auditDetail-view-van-cell"
                            title-class="titleClass"
                            title="审核不通过原因"
                            value="历次审核记录"
                            value-class="orderPresc-value"
                            @tap.native="orderAuditProcess"
                        />
                        <block v-for="(item, index1) in auditItem.audDate" :key="index1">
                            <van-cell custom-class="auditDetail-view-van-cell" title-class="auditDetail-reasonDesc" :title="item.reason" value="" />

                            <block v-for="(itemOrd, index2) in item.medData" :key="index2">
                                <view
                                    v-if="prescAudit.prescTypeCode === 'CM'"
                                    :class="'auditDetail-medDesc ' + (prescAudit.prescTypeCode === 'CM' ? 'auditDetail-medDesc-herbs' : '')"
                                >
                                    <view
                                        class="herbs-item-comPrinciple"
                                        :style="
                                            'background-color:' +
                                            (itemOrd.comPrinciple == '君'
                                                ? '#FFA23E'
                                                : itemOrd.comPrinciple == '臣'
                                                ? '#39D1D1'
                                                : itemOrd.comPrinciple == '佐'
                                                ? '#FA5AB2'
                                                : itemOrd.comPrinciple == '使'
                                                ? '#AA71F9'
                                                : '')
                                        "
                                    >
                                        {{ itemOrd.comPrinciple !== undefined && itemOrd.comPrinciple !== '' ? itemOrd.comPrinciple + '药' : '' }}
                                    </view>
                                    <view class="herbs-item-medItem">{{ itemOrd.medDesc !== undefined && itemOrd.medDesc !== '' ? itemOrd.medDesc : '' }}</view>
                                    <view class="herbs-item-decoctMethod">
                                        {{ itemOrd.decoctMethod !== undefined && itemOrd.decoctMethod !== '' ? '【' + itemOrd.decoctMethod + '】' : '' }}
                                    </view>
                                </view>

                                <view class="auditDetail-medDesc" v-else>
                                    {{ itemOrd.medDesc }}{{ itemOrd.spec !== undefined && itemOrd.spec !== '' ? '[' + itemOrd.spec + ']' : '' }}
                                </view>
                            </block>
                        </block>
                        <view class="docHandle-result">
                            <view class="docHandle-result-label">备注：</view>
                            <view class="auditDetail-remark">{{ auditItem.remark }}</view>
                        </view>
                    </view>
                </block>

                <block v-else>
                    <view class="third-view">
                        <van-cell custom-class="auditDetail-view-van-cell" title-class="titleClass" center title="医生处理" value="" />
                        <view class="docHandle-result">
                            <view class="docHandle-result-label">处理结果：</view>
                            <view>{{ auditItem.state }}</view>
                        </view>
                        <view class="docHandle-result">
                            <view class="docHandle-result-label">处理时间：</view>
                            <view>{{ auditItem.auditDate }} {{ auditItem.auditTime }}</view>
                        </view>
                        <view class="docHandle-result">
                            <view class="docHandle-result-label">备注：</view>
                            <view>{{ auditItem.remark }}</view>
                        </view>
                    </view>
                </block>
            </block>
        </view>
        <block v-if="prescAudit.logo == 'Y'">
            <button class="handle-btn" size="large" @tap="handlePrescAudit">处理</button>
        </block>
        <van-dialog use-slot use-title-slot :show="auditProcessVisable" class-name="dialog-body" @confirm="orderAuditProcess">
            <view slot="title" class="dialogTitle-view">{{ dialogTitle }}</view>
            <view class="body">
                <block v-if="prescAudit.reasonInfo && prescAudit.reasonInfo.length > 0">
                    <view class="timeline">
                        <block v-for="(processItem, index) in prescAudit.reasonInfo" :key="index">
                            <view class="timeline__step">
                                <view class="timeline__left">
                                    <view class="timeline__time">{{ processItem.auditTime }}</view>
                                    <view class="timeline__date">{{ processItem.auditDate }}</view>
                                </view>
                                <view class="timeline__right">
                                    <view class="timeline__dot" :class="(index === prescAudit.reasonInfo.length - 1) ? 'timeline__dot--last' : ''"></view>
                                    <view class="timeline__title">{{ processItem.state }}</view>
                                    <view class="timeline__doc">【{{ processItem.docTitle }}: {{ processItem.auditUserName }}】</view>
                                    <block v-for="(processAudItem, index1) in processItem.audDate" :key="index1">
                                        <view class="timeline__reason">{{ processAudItem.reason }}</view>

                                        <block v-for="(proAudMedItem, index2) in processAudItem.medData" :key="index2">
                                            <view class="timeline__med">
                                                {{ proAudMedItem.medDesc }}
                                                {{ proAudMedItem.spec !== undefined && proAudMedItem.spec !== '' ? '【' + proAudMedItem.spec + '】' : '' }}
                                            </view>
                                        </block>
                                    </block>
                                    <block
                                        v-if="
                                            (processItem.docAppeal !== undefined && processItem.docAppeal !== '') || (processItem.remark !== undefined && processItem.remark !== '')
                                        "
                                    >
                                        <view class="timeline__remark">
                                            备注：
                                            <text class="timeline__remark-text">
                                                {{ processItem.docAppeal !== undefined && processItem.docAppeal !== '' ? processItem.docAppeal : processItem.remark }}
                                            </text>
                                        </view>
                                    </block>
                                </view>
                            </view>
                        </block>
                    </view>
                </block>
                <view v-else class="empty">
                    <text>暂无审核记录</text>
                </view>
            </view>
        </van-dialog>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
// pages/entryWrite/components/prescAuditDetail/prescAuditDetail.js
import { $http } from '../../../../config/https.js';
export default {
    data() {
        return {
            medData: [],
            auditDetail: [],
            newestAuditDetail: [],
            auditProcessVisable: false,
            dialogTitle: '',

            prescAudit: {
                medData: '',
                prescTypeCode: '',
                logo: '',
                reasonInfo: []
            },

            herbsItem: {
                comPrinciple: ''
            },

            durQty: '',
            undefined: '',
            freqDesc: '',
            dose: '',
            frequence: '',
            usage: '',

            auditItem: {
                audDate: '',
                remark: '',
                state: '',
                auditDate: '',
                auditTime: ''
            },

            processItem: {
                state: '',
                auditTime: '',
                auditDate: '',
                docTitle: '',
                auditUserName: '',
                audDate: [],
                docAppeal: '',
                remark: ''
            },

            processAudItem: {
                reason: '',
                medData: []
            },

            proAudMedItem: {
                medDesc: '',
                spec: ''
            }
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        prescNo: String
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    /**
     * 组件的方法列表
     */
    methods: {
        handlePageShow: function () {
            // 页面被展示
            console.log('pageShow:', this);
            this.findAuditData();
        },

        handlePageHide: function () {},
        handlePageResize: function (size) {},
        ready: function () {},

        attached: function () {
            // 在组件实例进入页面节点树时执行
            console.log('lifetimesAttached:', this);
            this.findAuditData();
        },

        findAuditData: function () {
            // if (this.data.ordID=="") return;
            let { prescNo } = this;
            let { hospID } = Cache.get('userData');
            // ordID="115||31"
            // prescNo="OPN202005150023"
            let data = {
                params: [
                    {
                        prescNo,
                        hospID
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100104',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        let result = res.result;
                        this.setData(
                            {
                                prescAudit: res.result
                            },
                            () => {
                                this.sortData();
                            }
                        );
                    }
                }
            });
        },

        orderAuditProcess: function () {
            this.setData({
                auditProcessVisable: !this.auditProcessVisable
            });
        },

        sortData: function () {
            let { prescAudit, newestAuditDetail, dialogTitle } = this;
            if (prescAudit.reasonInfo) {
                prescAudit.reasonInfo.map((element, index) => {
                    if (index === 0) {
                        dialogTitle = element.state;
                        if (element.audDate && element.audDate.length > 0) {
                            newestAuditDetail[0] = element;
                        }
                        if (element.audDate && element.audDate.length <= 0) {
                            newestAuditDetail[1] = element;
                        }
                    }
                    if (newestAuditDetail[0] === undefined && element.audDate && element.audDate.length > 0) {
                        newestAuditDetail[0] = element;
                    }
                    if (newestAuditDetail[0] !== undefined && newestAuditDetail[1] === undefined && element.audDate && element.audDate.length <= 0) {
                        newestAuditDetail[1] = element;
                    }
                });
            }
            let { newPrescAudit } = {
                ...prescAudit
            };
            this.setData({
                newestAuditDetail,
                dialogTitle
            });
            console.log('this.data', this);
        },

        handlePrescAudit: function () {
            let { prescNo } = this;
            uni.navigateTo({
                url: '/pages/entryWrite/page/Entry/prescription/handlePrescAudit/handlePrescAudit?prescNo=' + prescNo
            });
        }
    },
    created: function () {}
};
</script>
<style>
/* pages/entryWrite/components/prescAuditDetail/prescAuditDetail.wxss */

.page-body {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
/* .medInfo{
  flex: 1;
overflow: auto;

} */
.item-meddesc-cell {
    margin-left: 25rpx;
}
.titleClass {
    font-size: 32rpx;
    font-weight: 900;
    padding: 10rpx 0 10rpx 24rpx;
    background-color: #f5f4f4;
}
.item {
    display: flex;
    flex-direction: row;
    padding-left: 67rpx;
    background-color: #ffffff;
}
.item-meddesc-text {
    flex: 2;
}
.herbs-item-comPrinciple {
    font-size: 24rpx;
    height: 40rpx;
    width: 72rpx;
    padding-top: 6rpx;
    text-align: center;
    color: #ffffff;
}
.herbs-item-medItem {
    font-size: 28rpx;
    margin-left: 20rpx;
}
.herbs-item-decoctMethod {
    margin-left: 25rpx;
}

.item-medPrice-view {
    /* align-items:flex-end */
    /* margin-left: 320rpx; */
    margin-right: 22rpx;
}
.item-round {
    width: 10rpx;
    height: 10rpx;
    border: 2rpx solid #cccccc;
    border-radius: 200rpx;
    background-color: #cccccc;
    margin-top: 20rpx;
    margin-right: 10rpx;
}
.item-meddesc {
    font-size: 32rpx;
    display: flex;
}
.item-medSpec {
    font-size: 28rpx;
}
.item-medQty {
    margin-left: 80rpx;
}
.item-medUsage-label {
    color: #999999;
}
.item-medUsage-view {
    font-size: 28rpx;
    padding: 25rpx 0 0 25rpx;
    background-color: #ffffff;
    display: flex;
}
.item-medUsage {
    margin-left: 10rpx;
}
.audit-process-view {
    flex: 1;
    overflow: auto;
    background-color: #ffffff;
}
.orderPresc-value {
    color: #1890ff !important;
    font-weight: 600;
    padding-right: 20rpx !important;
    background-color: #f5f4f4;
    line-height: 68rpx;
}
.auditDetail-view-van-cell {
    padding: 6rpx !important;
}
.auditDetail-reasonDesc {
    color: #fa8c16;
    font-size: 32rpx;
    padding-left: 40rpx;
}
.auditDetail-medDesc {
    padding-left: 60rpx;
    font-size: 32rpx;
    background-color: #ffffff;
}
.auditDetail-medDesc-herbs {
    display: flex;
}
.auditDetail-remark {
    color: #fa8c16;
}
.third-view {
    display: flex;
    flex-direction: column;
    font-size: 32rpx;
}
.docHandle-result {
    margin-left: 41rpx;
    display: flex;
    background-color: #ffffff;
}
.docHandle-result-label {
    color: #999999;
}
.handle-btn {
    background-color: #0079fe;
    color: #ffffff;
    border-radius: 30px;
    margin: 20px 10px;
    bottom: 0;
    left: 0;
    right: 0;
}
.van-dialog__header {
    background-color: #0079fe !important;
}
.dialogTitle-view {
    background-color: #ffffff;
    color: #0079fe;
}
.body {
    margin-top: 30rpx;
    overflow: auto;
    height: 760rpx;
}
.step-leftcontant {
    font-size: 28rpx;
}
.wux-step--vertical .wux-step__bd {
    margin-left: 60rpx !important;
}
.wux-step__icon {
    width: 33.6rpx !important;
    height: 70% !important;
}
.wux-step--vertical .wux-step__ft {
    left: 30rpx !important;
}
.step-leftcontant-time {
    font-weight: 600;
}
.step-contant-medDesc {
    margin-left: 20rpx !important;
}
.step-contant-reason {
    font-size: 28rpx;
    color: #ff9933;
}

/* === 原生 timeline 样式（替代 wux-steps / wux-step） === */
.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>
