<template>
    <view class="b-order-info">
        <view class="order-wrap">
            <view class="order-detail c-color-normal">
                <view v-if="orderInfo.title" class="order-tit c-font-big">{{ orderInfo.title }}</view>
                <view class="order-content">
                    <view class="c-gap-inner-top c-gap-inner-bottom">
                        <view v-if="orderInfo.hospitalName" class="c-row c-row-tight">
                            <text class="item-label c-span1">就诊医院：</text>
                            <text class="item-cont c-span11">{{ orderInfo.hospitalName }}</text>
                        </view>
                        <view v-if="orderInfo.expertName" class="c-row c-row-tight">
                            <text class="item-label c-span1">就诊医生：</text>
                            <text class="item-cont c-span11">{{ orderInfo.expertName }}</text>
                        </view>
                        <view v-if="orderInfo.hospitalAddress" class="c-row c-row-tight">
                            <text class="item-label c-span1">就诊地点：</text>
                            <text class="item-cont c-span11">{{ orderInfo.hospitalAddress }}</text>
                        </view>
                        <view v-if="orderInfo.appointDate" class="c-row c-row-tight">
                            <text class="item-label c-span1">就诊日期：</text>
                            <text class="item-cont c-span11">{{ orderInfo.appointDate }}</text>
                        </view>
                        <view v-if="orderInfo.appointOrderNumber" class="c-row c-row-tight">
                            <text class="item-label c-span1">就诊序号：</text>
                            <text class="item-cont c-span11">{{ orderInfo.appointOrderNumber }}</text>
                        </view>
                        <view v-if="orderInfo.statusTxt" class="c-row c-row-tight">
                            <text class="item-label c-span1">订单状态：</text>
                            <text class="item-cont c-span11 color-orange">{{ orderInfo.statusTxt }}</text>
                        </view>
                        <view v-if="orderInfo.departmentName" class="c-row c-row-tight">
                            <text class="item-label c-span1">就诊科室：</text>
                            <text class="item-cont c-span11">{{ orderInfo.departmentName }}</text>
                        </view>
                        <view v-if="orderInfo.appointType" class="c-row c-row-tight">
                            <text class="item-label c-span1">挂号类型：</text>
                            <text class="item-cont c-span11">{{ orderInfo.appointType }}</text>
                        </view>
                        <view v-if="orderInfo.price" class="c-row c-row-tight">
                            <text class="item-label c-span1">挂号费用：</text>
                            <text class="item-cont c-span11 flexbox">
                                <text class="color-orange">{{ orderInfo.price }}元</text>
                                <text v-if="orderInfo.payModeText" class="c-color-gray">
                                    （{{ orderInfo.payModeText }}）
                                </text>
                            </text>
                        </view>
                        <view class="divide-line"></view>
                        <view v-if="orderInfo.patientName" class="c-row c-row-tight">
                            <text class="item-label c-span1">患者姓名：</text>
                            <text class="item-cont c-span11">{{ orderInfo.patientName }}</text>
                        </view>
                        <view v-if="orderInfo.patientPhone" class="c-row c-row-tight">
                            <text class="item-label c-span1">联系电话：</text>
                            <text class="item-cont c-span11">{{ orderInfo.patientPhone }}</text>
                        </view>
                        <view v-if="orderInfo.patientDisease" class="c-row c-row-tight">
                            <text class="item-label c-span1">疾病名称/症状：</text>
                            <text class="item-cont c-span11">{{ orderInfo.patientDisease }}</text>
                        </view>
                        <view class="divide-line"></view>
                        <view v-if="orderInfo.orderIdTxt" class="c-row c-row-tight">
                            <text class="item-label c-span1">订单编号：</text>
                            <text class="item-cont c-span11">{{ orderInfo.orderIdTxt }}</text>
                        </view>
                        <view v-if="orderInfo.makeOrderDate" class="c-row c-row-tight">
                            <text class="item-label c-span1">下单日期：</text>
                            <text class="item-cont c-span11">{{ orderInfo.makeOrderDate }}</text>
                        </view>
                    </view>
                    <view v-if="orderInfo.action && orderInfo.action.length" class="order-btns">
                        <view 
                            v-for="(btn, btnIndex) in orderInfo.action"
                            :key="btnIndex"
                            :class="['order-btn-wrap', orderInfo.action.length === 1? 'margin-auto' : '']">
                            <c-button
                                v-if="btn.highlight === 1"
                                type="primary"
                                class="order-btn-item"
                                background="linear-gradient(134deg, #489AF6 0%, #82CBFF 100%)"
                                primary-color="#489AF6"
                                border-radius=".2rem"
                                @tap.stop="clickBtn(btn)">
                                {{ btn.txt }}
                            </c-button>
                            <c-button
                                v-else
                                class="order-btn-item"
                                primary-color="#333"
                                border-radius=".2rem"
                                @tap.stop="clickBtn(btn)">
                                {{ btn.txt }}
                            </c-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

/**
 * @file 订单信息
 * @author wangying51
 *
*/

import Button from '@baidu/med-ui/components/Button/Button';
import Navigate from '../../components/common/navigate';

export default {
    config: {
        component: true
    },
    props: {
        orderInfo: Object
    },
    data() {
        return {
        };
    },
    components: {
        'c-button': Button,
        'b-navigate': Navigate
    },
    methods: {
        // 点击按钮
        clickBtn(btn) {
            this.$emit('clickbtn', {
                btn
            });
        }
    }
};
</script>
<style lang="less" scoped>
.b-order-info {
    .order-wrap {
        &::before {
            content: '';
            display: block;
            height: 5px;
            width: 100%;
            background: url('https://mms-graph.cdn.bcebos.com/ae/waveLine.png') repeat-x center center;
            background-size: contain;
            position: relative;
            z-index: 1;
        }
        &::after {
            content: '';
            display: block;
            height: 5px;
            width: 100%;
            transform: rotate(180deg);
            background: url('https://mms-graph.cdn.bcebos.com/ae/waveLine.png') repeat-x center center;
            background-size: contain;
            position: relative;
            z-index: 1;
        }
    }
    .order-detail {
        padding: 0 .27rem;
        box-shadow: 0 2px 30px rgba(0, 0, 0, .1);
    }
    .order-tit {
        height: .55rem;
        line-height: .55rem;
        text-align: center;
        border-bottom: 1px solid #F1F1F1;
        font-weight: bold;
    }
    .order-content {
        font-size: .14rem;
    }
    .item-label {
        width: auto;
        white-space: nowrap;
        padding: 0;
    }
    .item-cont {
        padding: 0;
    }
    .divide-line {
        width: 100%;
        height: 1px;
        background-color: #f1f1f1;
        margin: .1rem 0;
    }
    .flexbox {
        display: flex;
        align-items: center;
    }
    .color-orange {
        color: #ff6050;
    }
    .order-btns {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: .16rem;
    }
    .order-btn-wrap {
        width: 50%;
        box-sizing: border-box;
        &:nth-child(odd) {
            padding-right: .05rem;
        }
        &:nth-child(even) {
            padding-left: .05rem;
        }
    }
    .margin-auto {
        margin: 0 auto;
    }

}
</style>


