<template>
	<view>
		<view class="banner" @click="registerHandle">
			<image :src="doctorImg" mode="widthFix"></image>
			<view>
				<view class="row-1">
					<text class="title">视频问诊</text>
					<text class="remark">接诊快</text>
				</view>
				<view class="row-2"><view class="btn">立即挂号</view></view>
				<view class="row-3">查找名医，远程诊断，预约挂号，不再等待</view>
			</view>
		</view>
		<view class="order" v-for="one of list" :key="one">
			<view class="row">
				<view @longtap="copyOutTradeNoHandle(one.outTradeNo)">
					<u-icon :label="`订单编号：${one.outTradeNoShort}`" color="#a0a0a0" labelColor="#a0a0a0" size="20" name="order"></u-icon>
				</view>
				<block v-if="one.paymentStatus != 3">
					<text class="status blue" v-if="one.status == '进入问诊室'" @tap="enterHandle(one.id, one.expectStart, one.expectEnd, one.doctorId)">进入问诊室</text>
					<text class="status" v-if="one.status != '进入问诊室'" @tap="enterHandle(one.id, one.expectStart, one.expectEnd, one.doctorId)">{{ one.status }}</text>
				</block>
			</view>
			<view class="row">
				<view>
					<text class="doctor-name">{{ one.doctorName }}</text>
					<text class="job">（{{ one.job }}）</text>
				</view>
				<view>
					<text class="unit">￥</text>
					<text class="amount">{{ one.amount }}</text>
				</view>
			</view>
			<view class="row">
				<u-icon :label="`${one.subName}（${one.expectStartShort} ~ ${one.expectEndShort}）`" color="#555" labelColor="#555" size="18" name="server-fill"></u-icon>
			</view>
			<view class="row">
				<view class="create-time"><u-icon :label="one.createTime" color="#a0a0a0" labelColor="#a0a0a0" size="20" name="calendar-fill" top="0"></u-icon></view>
				<view class="btn green" v-if="one.paymentStatus == 1">未付款</view>
				<view class="btn orange" v-if="one.paymentStatus == 2">已付款</view>
				<view class="btn gray" v-if="one.paymentStatus == 3">已关闭</view>
			</view>
		</view>
		<view v-if="list.length == 0"><u-empty mode="order" text="没有问诊挂号记录" icon="http://cdn.uviewui.com/uview/empty/order.png"></u-empty></view>
	</view>
</template>

<script>
const dayjs = require('dayjs');
export default {
	data() {
		return {
			doctorImg: `${this.patientUrl}/pic/pic-2.png`,
			page: 1,
			length: 50,
			list: [],
			isLastPage: false
		};
	},
	methods: {
		registerHandle: function() {
			uni.navigateTo({
				url: '../doctor_list/doctor_list'
			});
		},
		loadDataList: function(ref) {
		 let data = {
				page: ref.page,
				length: ref.length
			};
			ref.ajax(ref.api.searchVideoDiagnoseByPage, 'POST', data, function(resp) {
				let result = resp.data.result;
				if (result.list == null || result.list.length == 0) {
					ref.isLastPage = true;
					ref.page = ref.page - 1;
					uni.showToast({
						icon: 'none',
						title: '已经到底了'
					});
				} else {
					let json = {
						'1': '进入问诊室',
						'2': '进入问诊室',
						'3': '已结束'
					};
					for (let one of result.list) {
						// console.log(one)
						one.status = json[one.status + ''];
						one.expectStartShort = dayjs(one.expectStart).format('HH:mm');
						one.expectEndShort = dayjs(one.expectEnd).format('HH:mm');
						one.outTradeNoShort = one.outTradeNo.substr(0, 15) + '…';
						ref.list.push(one);
					}
				}
			});
		},
		copyOutTradeNoHandle: function(outTradeNo) {
			uni.setClipboardData({
				data: outTradeNo,
				showToast: false,
				success: function() {
					uni.showToast({
						icon: 'success',
						title: '已复制订单号'
					});
				}
			});
		},
		enterHandle: function(id, expectStart, expectEnd, doctorId) {
			uni.navigateTo({
				url: `../prepare_diagnose/prepare_diagnose?videoDiagnoseId=${id}&expectStart=${expectStart}&expectEnd=${expectEnd}&doctorId=${doctorId}`
			});
		}
	},
	onShow: function() {
		let that = this;
		that.page = 1;
		that.list = [];
		that.isLastPage = false;
		that.loadDataList(that);
	},
	onReachBottom: function() {
		let that = this;
		console.log(that.isLastPage);
		if (that.isLastPage) {
			return;
		}
		that.page = that.page + 1;
		that.loadDataList(that);
	}
};
</script>

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