<template>
    <view class="all">
        <view class="cell">
            <view class="cellItem1">
                <view class="cellItem">
                    <view style="float: left; margin-top: -20rpx; margin-right: 20rpx">
                        <image
                            :src="'https://chis.e24health.com/images/icon/doctor/' + (userData.statusOneCode == 'Y' ? 'payY.png' : 'payN.png')"
                            style="width: 45px; height: 45px"
                        ></image>
                        <view :style="'color:' + (userData.statusOneCode == 'Y' ? '#FA5D0D' : '#999999')">{{ userData.statusOne }}</view>
                    </view>
                    <text :class="userData.statusTwoCode == 'Y' ? 'cellLine' : 'blackLine'">———</text>
                </view>

                <view class="cellItem">
                    <view style="float: left; margin-top: -20rpx; margin-right: 20rpx; margin-left: 20rpx">
                        <image
                            :src="
                                'https://chis.e24health.com/images/icon/doctor/' +
                                (userData.statusTwo.indexOf('接诊') != -1
                                    ? userData.statusTwoCode == 'Y'
                                        ? 'readAdmY.png'
                                        : 'readAdmN.png'
                                    : userData.statusTwoCode == 'Y'
                                    ? 'notY.png'
                                    : 'notN.png')
                            "
                            style="width: 45px; height: 45px"
                        ></image>
                        <view :style="'color:' + (userData.statusTwoCode == 'Y' ? '#FA5D0D' : '#999999')">{{ userData.statusTwo }}</view>
                    </view>
                    <text :class="userData.statusThreeCode == 'Y' ? 'cellLine' : 'blackLine'">———</text>
                </view>

                <view class="cellItem">
                    <view style="float: left; margin-top: -20rpx; margin-right: 20rpx; margin-left: 20rpx">
                        <image
                            :src="
                                'https://chis.e24health.com/images/icon/doctor/' +
                                (userData.statusThree.indexOf('接诊') != -1
                                    ? userData.statusThreeCode == 'Y'
                                        ? 'admEndY.png'
                                        : 'admEndN.png'
                                    : userData.statusThreeCode == 'Y'
                                    ? 'notPayY.png'
                                    : 'notPayN.png')
                            "
                            style="width: 45px; height: 45px"
                        ></image>
                        <view :style="'color:' + (userData.statusThreeCode == 'Y' ? '#FA5D0D' : '#999999')">{{ userData.statusThree }}</view>
                    </view>
                </view>
                <view class="reasonDesc">
                    <text v-if="userData.statusTwo == '已取消' ? true : false">{{ userData.reason }}</text>
                </view>
            </view>
        </view>
        <view class="card patient-card">
            <image class="patient-avatar" :src="userData.patImg"></image>
            <view class="patient-name-line">
                {{ userData.patName }}
                <text class="patient-meta">
                    {{ userData.patNo }}
                    <text class="patient-separator">|</text>
                    {{ userData.sex }}
                    <text class="patient-separator">|</text>
                    {{ userData.patAge }}
                </text>
            </view>
            <view class="patient-phone-row">
                <view style="margin-left: 38rpx; float: left">电话号码</view>
                <text class="patient-phone">{{ userData.tell }}</text>
            </view>
        </view>
        <view class="dateilBody">
            <view class="cardInfo">
                <view class="title">订单信息</view>
                <view class="textInfo">
                    <view class="notFloat">就诊时间</view>
                    <text class="rightFont">{{ userData.admDateTime }}</text>
                </view>
                <view class="textInfo">
                    <view class="notFloat">申请时间</view>
                    <text class="rightFont">{{ userData.appDateTime }}</text>
                </view>
                <view class="textInfo1" style="text-align: left; margin-left: 0">
                    <van-cell title-class="cellTitle" title="历史诊疗记录" style="color: rgba(102, 102, 102, 1)" is-link @tap.native="historyTreatment" />
                </view>
                <view class="textInfo1">
                    <view class="notFloat">订单金额</view>
                    <text class="rightFont" v-if="userData.amount == '' ? false : true" style="color: #fa541c">
                        <text style="color: #999999">￥</text>
                        {{ userData.amount }}
                    </text>
                </view>
            </view>

            <view class="cardInfo">
                <view class="title">申请信息</view>
                <!-- <view class="textInfo">
				<view class="notFloat">患病时长</view>
				<text class="rightFont">{{userData.illnessTime}}</text>
			</view> -->
                <view class="textInfo1">
                    <view class="haveFloat">症状描述</view>
                    <view class="medDesc">{{ userData.symptom }}</view>
                </view>
            </view>

            <view class="cardInfo1">
                <view class="title1">上传附件</view>

                <image :src="item" class="images" :data-index="index" @tap.stop.prevent="showImage" v-for="(item, index) in imageArr" :key="index"></image>
            </view>

            <view class="cardInfo1">
                <view class="title1">
                    评价
                    <view v-if="userData.grade != ''" style="float: right; margin-top: -6px">
                        <van-rate size="25" color="#FA541C" void-icon="star" void-color="#eee" :allow-half="true" :value="userData.grade" :readonly="true" />
                    </view>
                </view>
                <view class="medDesc">{{ userData.appraiseNote != '' ? userData.appraiseNote : '暂无评价' }}</view>
            </view>
        </view>
        <view class="multiBtn-content1" v-if="statusCode == 'R' || statusCode == 'A'">
            <button :disabled="btnState" @tap="notTreatment" v-if="statusCode == 'A'" class="multiBtn-left" role="button">取消接诊</button>
            <button @tap="refuseTreatment" v-if="statusCode == 'R'" class="multiBtn-left" role="button">拒绝接诊</button>
            <button @tap="enterRoom" class="multiBtn-right" role="button">开始接诊</button>
        </view>
        <view v-if="showRefusal">
            <refusal @colseRefuse="colseRefuse" :showRefusal="showRefusal" @selectData="getData"></refusal>
        </view>
        <van-dialog id="van-dialog" />
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
import refusal from '../refusal/refusal';
// pages/graphicDateil/graphicDateil.js
import { $http } from '../../../../config/https.js';
import Dialog from '../../../../utils/dialog';
export default {
    components: {
        refusal
    },
    data() {
        return {
            axis: [
                {
                    time: '2018-2-15',
                    name: '张三',
                    event: '垃圾太多'
                },
                {
                    time: '2018-2-15',
                    name: '王三',
                    event: '垃圾太多'
                },
                {
                    time: '2018-2-15',
                    name: '张三',
                    event: '垃圾太多'
                }
            ],
            userData: {
                statusOneCode: '',
                statusOne: '',
                statusTwoCode: '',
                statusTwo: '',
                statusThreeCode: '',
                statusThree: '',
                reason: '',
                patImg: '',
                tell: '',
                admDateTime: '',
                appDateTime: '',
                amount: '',
                symptom: '',
                grade: '',
                appraiseNote: ''
            },
            admID: '',
            patID: '',
            imageArr: [],
            showRefusal: false,
            statusCode: '',
            typeCode: '',
            btnState: false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function (options) {
        var patientData = Cache.get('patientData');
        this.setData(
            {
                admID: patientData.admID,
                patID: patientData.patID,
                statusCode: patientData.statusCode
            },
            () => {
                this.getData();
            }
        );
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        notTreatment: function (e) {
            this.setData({
                btnState: true
            }); //请求前禁用标记改为true,防止重复请求
            let that = this;
            let userData = Cache.get('userData');
            let patientData = Cache.get('patientData');
            let data = {
                params: [
                    {
                        hospID: userData.hospID,
                        userID: userData.userID,
                        admID: patientData.admID
                    }
                ]
            };
            $http.post(
                'urlDeault',
                this,
                {
                    code: '03100107',
                    data: data,
                    success: function (res) {
                        if (res.errorCode == '0') {
                            this.setData({
                                btnState: false
                            });
                            //上一个页面实例对象
                            uni.navigateBack({
                                delta: 1
                            });
                        } else {
                            this.setData({
                                btnState: false
                            });
                            Dialog.alert({
                                title: '提示',
                                message: res.errorMessage,
                                context: this
                            });
                        }
                    }
                },
                {
                    error: 'Y'
                }
            );
        },

        getData: function (e) {
            var patientData = Cache.get('patientData');
            let data = {
                params: [
                    {
                        admID: this.admID,
                        typeCode: patientData.resourceTypeCode
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100036',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        var imageArr = [];
                        if (res.result.imageAddress != undefined && res.result.imageAddress != '') {
                            imageArr = res.result.imageAddress.split('&');
                        }
                        patientData.statusCode = res.result.admStatusCode;
                        Cache.set('patientData', patientData);
                        this.setData({
                            userData: res.result,
                            imageArr: imageArr,
                            statusCode: res.result.admStatusCode
                        });
                    }
                }
            });
        },

        showImage: function (e) {
            var index = e.currentTarget.dataset.index;
            Cache.set('tempPicture', this.imageArr);
            uni.previewImage({
                current: this.imageArr[index],
                // 当前显示图片的http链接
                urls: this.imageArr // 需要预览的图片http链接列表
            });
            // wx.navigateTo({
            //   url: '../showPicture/showPicture?&currentIndex=' + index,
            // })
        },

        /**
         * 取消接诊
         */
        refuseTreatment: function () {
            this.setData({
                showRefusal: true
            });
        },

        /**
         * 开始接诊
         */
        enterRoom: function () {
            const patientData = Cache.get('patientData');
            let admType = '';
            if (patientData.resourceTypeCode == 'VIDEO') {
                admType = 'video';
            }
            if (patientData.resourceTypeCode == 'IMAGE') {
                admType = 'graphic';
            }
            uni.navigateTo({
                url: '../treatment/treatment?admtype=' + admType
            });
        },

        /**关闭取消接诊弹框 */
        colseRefuse: function (e) {
            this.setData({
                showRefusal: false
            });
        },

        // 历史诊疗
        historyTreatment: function (e) {
            // 历史诊疗
            uni.navigateTo({
                //目的页面地址
                url: '/pages/myConsultRoom/page/historyTreatment/historyTreatment?Type=1' // 历史诊疗,
            });
        }
    }
};
</script>
<style>
.weui-cell-circle {
    border: 1px solid #000;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    float: left;
    border-color: dodgerblue;
    background-color: dodgerblue;
    color: dodgerblue;
    margin-top: 14rpx;
}

.weui-cell-circle1 {
    border: 1px solid #000;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    border-color: dodgerblue;
    background-color: dodgerblue;
    color: dodgerblue;
    margin-top: 14rpx;
}

.blackCircle {
    border: 1px solid #000;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    float: left;
    border-color: #999;
    background-color: #999;
    color: #999;
    margin-top: 14rpx;
}

.blackCircle1 {
    border: 1px solid #000;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    border-color: #999;
    background-color: #999;
    color: #999;
    margin-top: 14rpx;
}

.process {
    margin-left: -15px;
}

.processLast {
    padding-top: 10rpx;
    margin-left: -25px;
}

.cell {
    align-items: center;
    background-color: white;
    min-height: 104rpx;
    height: auto;
    margin: 10rpx 20rpx 0;
    border-radius: 14rpx;
    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.all {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    font-family: PingFang SC;
}

page {
    width: 100%;
    height: 100vh;
    background-color: #f4f7fb;
}

.cellItem {
    float: none;
    padding-top: 0;
    flex: 1;
    min-width: 0;
    text-align: center;
    color: #5f6b7a;
    font-size: 26rpx;
    position: relative;
    line-height: 42rpx;
}

.cellItem > view {
    float: none !important;
    margin: 0 !important;
    height: 54rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cellItem image {
    display: none !important;
}

.cellItem > text {
    display: none;
}

.cellItem:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 31rpx;
    right: -24%;
    width: 48%;
    height: 2rpx;
    background: #d8dee8;
}

.cellItem > view > view {
    position: relative;
    font-size: 26rpx;
    line-height: 42rpx;
    padding: 0 8rpx;
    background: #fff;
    z-index: 1;
}

.cellItem > view > view::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10rpx;
    width: 34rpx;
    height: 4rpx;
    border-radius: 999rpx;
    background: currentColor;
    transform: translateX(-50%);
}

.cellItem1 {
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 22rpx 16rpx;
    box-sizing: border-box;
    position: relative;
}

.lastLine {
    color: rgba(30, 143, 255, 0.11);
}

.cellLine {
    color: #fa590d;
    font-weight: 400;
}

.dateilBody {
    height: calc(100% - 252rpx);
    overflow: auto;
    padding: 12rpx 20rpx calc(130rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.card {
    margin: 12rpx 20rpx 0;
    background-color: white;
    min-height: 164rpx;
    height: auto;
    font-size: 32rpx;
    line-height: 58rpx;
    border-radius: 14rpx;
    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
    overflow: hidden;
    padding-top: 12rpx;
    box-sizing: border-box;
}

.patient-card {
    min-height: 126rpx;
    margin-top: 16rpx;
    padding: 18rpx 28rpx 14rpx;
    display: block;
}

.patient-avatar {
    display: none;
}

.patient-name-line {
    width: 100%;
    line-height: 42rpx;
    color: #1f2937;
    font-size: 30rpx;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-meta {
    margin-left: 12rpx;
    color: #5f6b7a;
    font-size: 27rpx;
    font-weight: 400;
}

.patient-separator {
    color: #c6ccd6;
    padding: 0 8rpx;
}

.patient-phone-row {
    width: 100%;
    height: auto !important;
    line-height: 38rpx !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14rpx;
    padding-top: 12rpx;
    border-top: 1rpx solid #edf1f6;
    box-sizing: border-box;
}

.patient-phone-row > view {
    margin-left: 0 !important;
    float: none !important;
    color: #8b98a8;
    font-size: 26rpx;
}

.patient-phone {
    margin-left: 18rpx;
    color: #1f2937;
    font-size: 28rpx;
    font-weight: 500;
    white-space: nowrap;
}

.info {
    padding: 10rpx 84rpx;
}

.cardInfo {
    border: 0;
    background-color: #fff;
    position: relative;
    margin-bottom: 12rpx !important;
    text-align: right;
    font-size: 32rpx;
    height: auto;
    border-radius: 14rpx;
    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.cardInfo1 {
    border: 0;
    background-color: #fff;
    font-size: 32rpx;
    position: relative;
    margin-bottom: 12rpx !important;
    border-radius: 14rpx;
    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.title {
    font-weight: 600;
    text-align: left;
    margin-left: 0;
    padding: 0 28rpx;
    border-bottom: 1px solid #edf1f6;
    line-height: 76rpx;
    color: rgba(51, 51, 51, 1);
}

.title1 {
    font-weight: 600;
    text-align: left;
    margin-left: 0;
    padding: 0 28rpx;
    line-height: 76rpx;
    color: rgba(51, 51, 51, 1);
    border-bottom: 1px solid #edf1f6;
}

.rightFont {
    margin-right: 0;
    color: #3f4a5a;
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notFloat {
    float: left;
}

.textInfo {
    margin-left: 0;
    padding: 0 28rpx;
    border-bottom: 1px solid #edf1f6;
    line-height: 78rpx;
    color: rgba(102, 102, 102, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.textInfo1 {
    margin-left: 0;
    padding: 0 28rpx;
    line-height: 78rpx;
    color: rgba(102, 102, 102, 1);
    overflow: hidden;
}

.haveFloat {
    float: none;
    text-align: left;
}

.medDesc {
    text-align: left;
    background: #f7f9fc;
    margin: 0 28rpx 22rpx;
    color: #3f4a5a;
    padding: 18rpx 20rpx;
    line-height: 44rpx;
    width: auto;
    margin-bottom: 22rpx;
    border-radius: 10rpx;
    box-sizing: border-box;
}

.upLoad {
    border: 3px solid #999;
    width: 80rpx;
    height: 80rpx;
    margin-left: 12rpx;
}

.blackLine {
    font-weight: 400;
    color: #999;
}

.personDesc {
    color: rgba(102, 102, 102, 1);
    font-size: 32rpx;
    margin-bottom: 7px;
    margin-left: 20px;
    background: rgba(250, 250, 250, 1);
    padding: 12rpx;
    padding-left: 12rpx;
    width: 85%;
}

.images {
    width: 168rpx;
    height: 168rpx;
    margin: 24rpx 0 24rpx 24rpx;
    border-radius: 12rpx;
    background: #f7f9fc;
}

.multiBtn-content {
    height: 110rpx;
    font-size: 30rpx;
    color: #fff;
    padding: 0;
    /* position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex; */
}

.multiBtn-content1 {
    min-height: 110rpx;
    height: calc(110rpx + env(safe-area-inset-bottom));
    font-size: 30rpx;
    color: #fff;
    padding: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
}

.multiBtn-left {
    flex: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 0 !important;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(245, 34, 45, 1);
    font-size: 18px;
    background: rgba(255, 255, 255, 1);
    padding-bottom: env(safe-area-inset-bottom);
}

.multiBtn-right {
    flex: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    background-color: #1890ff;
    color: #fff;
    border-radius: 0 !important;
    font-weight: bold;
    font-size: 18px;
    padding-bottom: env(safe-area-inset-bottom);
}

.reasonDesc {
    text-align: center;
    line-height: 46rpx;
    margin: 0 26rpx 18rpx;
    font-size: 32rpx;
    color: rgba(102, 102, 102, 1);
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.cellTitle {
    font-size: 32rpx;
    color: rgba(102, 102, 102, 1);
}
</style>
