<template>
    <view>
        <view class="main-container">
            <view>
                <u-count-down :time="time" format="mm:ss" autoStart @change="onChange">
                    <view class="time">
                        <text class="desc">距离问诊{{ startOrEnd }}</text>
                        <text :class="startOrEnd == '结束' ? 'minute red' : 'minute'">{{ timeData.minutes }}</text>
                        <text class="unit">分</text>
                        <text :class="startOrEnd == '结束' ? 'second red' : 'second'">{{ timeData.seconds }}</text>
                        <text class="unit">秒</text>
                    </view>
                </u-count-down>
            </view>

            <view class="title">请上传诊断材料</view>
            <view class="files">
                <u-upload
                    :fileList="fileList"
                    @afterRead="afterRead"
                    @delete="deleteImage"
                    multiple
                    :maxSize="2 * 1024 * 1024"
                    :maxCount="20"
                    :previewFullImage="true"
                ></u-upload>
            </view>
            <view class="operate">
                <view class="btn red" @tap="deleteAllImageHandle">清空诊断材料</view>
                <view :class="enableBtn ? 'btn green' : 'btn gray'" @tap="enterHandle">进入问诊室</view>
            </view>
        </view>
        <view class="desc-container">
            <view class="title">视频问诊说明</view>
            <view class="desc">
                <text class="num">1.</text>
                <text>
                    在视频问诊之前以先上传相关的诊断材料照片，但是最多不能超过20张照片，而且每张照片不能超过2M体积。
                </text>
            </view>
            <view class="desc">
                <text class="num">2.</text>
                <text>
                    视频问诊开始的时候，您可以点击【进入问诊室】按钮开始视频问诊。在视频问诊开始之前，请耐心等待。
                </text>
            </view>
            <view class="desc">
                <text class="num">3.</text>
                <text>
                    建议您的手机连接WIFI网络，以保证最佳问诊质量。在问诊期间不要随便走动，避免网络信号波动，影响问诊音视频质量。
                </text>
            </view>
            <view class="desc">
                <text class="num">4.</text>
                <text>
                    视频问诊仅作为初步诊断，存在误诊几率，不能以此当做准确诊断。建议您结合线下门诊的诊断结果及时就医。
                </text>
            </view>
            <view class="desc">
                <text class="num">5.</text>
                <text>
                    如果遇到医疗系统技术故障或者其他不可抗力因素，无法进行视频问诊。请拨打【800-12388】客户热线，联系客服人员予以解决或者退款。
                </text>
            </view>
        </view>
    </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
    data() {
        return {
            videoDiagnoseId: null,
            expectStart: null,
            expectEnd: null,
            doctorId: null,
            startOrEnd: '开始',
            enableBtn: false,
            time: null,
            timeData: {},
            fileList: []
        };
    },
    methods: {
        afterRead: function(event) {
            let that = this;
            let token = uni.getStorageSync('token');

            //保存选中照片的数组
            let lists = event.file;
            //模型层fileList数组元素数量
            let fileListLen = that.fileList.length;

            //如果倒计时结束或者问诊已经开始了就不能再上传照片了
            if (that.time <= 0 || that.startOrEnd == '结束') {
                return;
            }

            //把新选中的照片添加到模型层的fileList数组中
            lists.map(item => {
                that.fileList.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                });
            });

            //遍历数组，把这些照片上传到服务端
            for (let i = 0; i < lists.length; i++) {
                uni.uploadFile({
                    url: `${that.api.uploadVideoDiagnoseImage}?token=${token}`,
                    filePath: lists[i].url,
                    name: 'file',
                    formData: {
                        videoDiagnoseId: that.videoDiagnoseId
                    },
                    success: resp => {
                        //返回的是字符串，需要转换成JSON
                        let filename = JSON.parse(resp.data).filename;
                        //取出刚上传的成功文件的JSON对象
                        let item = that.fileList[fileListLen];
                        item['status'] = 'success';
                        //因为删除文件的时候需要使用filename，所以把filename添加到JSON对象中
                        item['filename'] = filename;
                        fileListLen++;
                    }
                });
            }
        },
        deleteImage: function(event) {
            let that = this;
            if (that.time <= 0 || that.startOrEnd == '结束') {
                return;
            }
            let filename = that.fileList[event.index].filename;
            let data = {
                videoDiagnoseId: that.videoDiagnoseId,
                filename: filename
            };
            that.ajax(
                that.api.deleteVideoDiagnoseImage,
                'POST',
                data,
                function(resp) {
                    uni.showToast({
                        icon: 'success',
                        title: '文件删除成功'
                    });
                    that.fileList.splice(event.index, 1);
                },
                false
            );
        },
        deleteAllImageHandle: function() {
            let that = this;
            if (that.time <= 0 || that.startOrEnd == '结束') {
                return;
            }
            uni.showModal({
                title: '提示信息',
                content: '您确定删除所有上传文件？',
                success: function(resp) {
                    if (resp.confirm) {
                        let data = {
                            videoDiagnoseId: that.videoDiagnoseId
                        };
                        that.ajax(
                            that.api.deleteVideoDiagnoseImage,
                            'POST',
                            data,
                            function(resp) {
                                uni.showToast({
                                    icon: 'success',
                                    title: '文件删除成功'
                                });
                                that.fileList = [];
                            },
                            false
                        );
                    }
                }
            });
        },
        onChange: function(e) {
            //当前倒计时的分钟数字
            let minutes = e.minutes;
            //当前倒计时的秒钟数字
            let seconds = e.seconds;

            if (minutes == 0 && seconds == 0) {
                //如果到了问诊开始的时间
                if (this.startOrEnd == '开始') {
                    this.startOrEnd = '结束';
                    this.enableBtn = true;
                    //更新时间差
                    this.time = dayjs(this.expectEnd).valueOf() - new Date().getTime();
                    //手机发出震动，并且弹出提示信息
                    uni.vibrateLong({
                        complete: function() {
                            uni.showToast({
                                icon: 'none',
                                title: '请进入问诊室',
                                duration: 2000
                            });
                        }
                    });
                } else {
                    /*
                     * 可能在问诊中，患者手机突然没电关机了。等到他充上电开机之后，
                     * 重新进入到候诊页面，可能视频问诊已经过了结束时间，所以这种
                     * 情况就不允许进入视频问诊页面
                     */
                    //不可以点击进按钮入问诊页面
                    this.enableBtn = false;
                    uni.showToast({
                        icon: 'none',
                        title: '问诊已结束'
                    });
                }
            }

            if (minutes < 10) {
                e.minutes = '0' + minutes;
            }

            if (seconds < 10) {
                e.seconds = '0' + seconds;
            }

            this.timeData = e;
        },
        enterHandle: function() {
            let that = this;
            if (!that.enableBtn) {
                return;
            }

            let data = {
                doctorId: that.doctorId
            };
            //查询roomId
            that.ajax(
                that.api.searchRoomId,
                'POST',
                data,
                function(resp) {
                    let roomId = resp.data.result;
                    if (roomId != null) {
                        that.roomId = roomId;
                        //查询TRTC的相关数据
                        that.ajax(that.api.searchUserSig, 'GET', null, function(resp) {
                            let userId = resp.data.userId;
                            let userSig = resp.data.userSig;
							console.log(userSig)
                            uni.navigateTo({
                                url: `../video_diagnose/video_diagnose?roomId=${that.roomId}&userId=${userId}&userSig=${userSig}&expectEnd=${that.expectEnd}`
                            });
                        });
                    }
                },
                false
            );
        }
    },
    onLoad: function(options) {
        let that = this;
        that.videoDiagnoseId = Number(options.videoDiagnoseId);
        that.expectStart = options.expectStart;
        that.expectEnd = options.expectEnd;
        that.doctorId = options.doctorId;

        //计算开始时间与当前时间的时间差（时间戳毫秒时间）
        let time = dayjs(that.expectStart).valueOf() - new Date().getTime();
        //开始时间晚于当前时间
        if (time > 0) {
            that.startOrEnd = '开始';
            that.enableBtn = false;
        } else {
            time = dayjs(that.expectEnd).valueOf() - new Date().getTime();
            that.startOrEnd = '结束';
            that.enableBtn = true;
        }
        //把时间差保存到模型层
        that.time = time;
        let data = {
            videoDiagnoseId: that.videoDiagnoseId
        };
        that.ajax(that.api.searchImageByVideoDiagnoseId, 'POST', data, function(resp) {
            let result = resp.data.result;
            for (let one of result) {
                that.fileList.push({
                    filename: one.filename,
                    thumb: `${that.minioUrl}/${one.path}`,
                    url: `${that.minioUrl}/${one.path}`,
                    type: 'image'
                });
            }
        });
    }
};
</script>

<style lang="less">
@import url('prepare_diagnose.less');
</style>
