
<template style="background-color: #b8b8b8;">
	<view style="width: 100%;height: 100%;">
		<view class="topmenu">
			<u-dropdown>
				 <u-dropdown-item v-model="value1" :title="options1[value1].label" :options="options1" @change="close1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" :title="options2[value2].label" :options="options2" @change="close2"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view style="padding:28rpx 20rpx;width: 100%;flex-direction: row-reverse;" class="flex">
			<view @click="huihua">
				<text style="font-size: 28rpx;color: #666666;margin-right: 15rpx;">查看会话</text>
				<u-icon name="arrow-right" color="#666666"></u-icon>
			</view>
		</view>
		<!-- 上面的下拉菜单中 -->
		<!-- value1种类  0为全部 1为电话 2为图文-->
		<!-- value2状态  0为处理中 1为历史记录-->
		<view v-for="(item,index) in list" :key='index' :data-index="index" @click="xiangqing">
			<view v-if="value1==item.zl||value1==0">
				<view class="list_view"  v-if="value2==0&&(item.zt==1||item.zt==2)||value2==1&&(item.zt==3||item.zt==4)">
					<!-- 状态和类型 -->
					<!-- 状态 1未接单 2进行中 3已完成 4已取消 -->
					<!-- 种类  1电话咨询 2图文咨询-->
					<view class="flex align-center" style="margin-bottom: 30rpx;">
						<view style="width: 70%;" v-if="item.zt == 1" class="flex align-center">
							<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #ff9294;margin-right: 20rpx;"></view>
							<view style="color: #ff9294;font-size: 30rpx;font-weight:bold ;">未支付</view>
						</view>
						<view style="width: 70%;" v-if="item.zt == 2" class="flex align-center">
							<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #ff9294;margin-right: 20rpx;"></view>
							<view style="color: #ff9294;font-size: 30rpx;font-weight:bold ;">待接单</view>
						</view>
						<view style="width: 70%;" v-else-if="item.zt == 3" class="flex align-center">
							<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #EEAA3F;margin-right: 20rpx;"></view>
							<view style="color: #EEAA3F;font-size: 30rpx;font-weight:bold ;">进行中</view>
						</view>
						<view style="width: 70%;" v-else-if="item.zt == 4" class="flex align-center">
							<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #84BB43;margin-right: 20rpx;"></view>
							<view style="color: #84BB43;font-size: 30rpx;font-weight:bold ;">已完成</view>
						</view>
						<view style="width: 70%;" v-else-if="item.zt == 5" class="flex align-center">
							<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #bababa;margin-right: 20rpx;"></view>
							<view style="color: #bababa;font-size: 30rpx;font-weight:bold ;">已取消</view>
						</view>
						<view style="width: 30%;" class="flex align-center">
							<view style="font-size: 28rpx;padding: 8rpx 24rpx;border-radius: 20rpx;background-color: #F6F6F6;" v-if="item.zl == 2">图文咨询</view>
							<view style="font-size: 28rpx;padding: 8rpx 24rpx;border-radius: 20rpx;background-color: #F6F6F6;" v-else-if="item.zl == 1">电话咨询</view>
						</view>
					</view>
					<!-- 线 -->
					<u-line color="#ebebeb" />
					<!-- 资料 -->
					<view class="">
						<view class="nr">
							<view class="left">患者:</view>
							<view class="right">{{item.name}}</view>
						</view>
						<view class="nr">
							<view class="left">年龄:</view>
							<view class="right">{{item.age}}</view>
						</view>
						<view class="nr">
							<view class="left">订单号:</view>
							<view class="right">{{item.order}}</view>
						</view>
						<view class="nr">
							<view class="left">下单时间:</view>
							<view class="right">{{item.time}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.getLists();
		},
		onLoad(e) {
			// 获取列表
			this.getLists();
		},
		data() {
			return {
				value1: 0,
				value2: 0,
				options1: [{
						label: '全部类型',
						value: 0,
					},
					{
						label: '电话咨询',
						value: 1,
					},
					{
						label: '图文咨询',
						value: 2,
					}
				],
				options2: [{
						label: '处理中',
						value: 0,
					},
					{
						label: '历史记录',
						value: 1,
					},
				],
				list: [{
					zt: 1, //状态
					zl: 1, //种类 
					name: '张三',
					age: '一岁零2个月',
					order: 'ZX202000010',
					time: '2020年10月28日17:11:10'
				}, {
					zt: 2, //状态
					zl: 1, //种类 
					name: '张三',
					age: '一岁零2个月',
					order: 'ZX202000010',
					time: '2020年10月28日17:11:10'
				}, {
					zt:3, //状态 
					zl:1, //种类
					name: '张三',
					age: '一岁零2个月',
					order: 'ZX202000010',
					time: '2020年10月28日17:11:10'
				}, {
					zt: 4, //状态
					zl: 1, //种类
					name: '张三',
					age: '一岁零2个月',
					order: 'ZX202000010',
					time: '2020年10月28日17:11:10'
				}, {
					zt: 1, //状态 
					zl: 2, //种类
					name: '张三',
					age: '一岁零2个月',
					order: 'ZX202000010',
					time: '2020年10月28日17:11:10'
				}, {
					zt: 2, //状态 
					zl: 2, //种类
					name: '张三',
					age: '一岁零2个月',
					order: 'ZX202000010',
					time: '2020年10月28日17:11:10'
				}, {
					zt: 3, //状态
					zl: 2, //种类 
					name: '张三',
					age: '一岁零2个月',
					order: 'ZX202000010',
					time: '2020年10月28日17:11:10'
				}, {
					zt: 4, //状态 
					zl: 2, //种类 
					name: '张三',
					age: '一岁零2个月',
					order: 'ZX202000010',
					time: '2020年10月28日17:11:10'
				}],
			}
		},
		methods: {
			getLists:async function(){
				let res = await this.$request.post('patient/orderPatientList',{'curPage':1,'pageSize':20})
				if(res.status==0){
					let data = res.data;
					console.log('我是打他：',data)
					this.list = data;
				}
			},
			close1(e) {
				console.log('value1',e);
				console.log('list=',this.list)
				this.value1 = e
			},
			close2(e) {
				console.log('value2',e);
				this.value2 = e
			},
			// 会话
			huihua(e) {
				uni.switchTab({
					url: '/pages/conversation/conversation'
				})
				console.log(e)
			},
			// 咨询详情
			xiangqing(e) {
				console.log(this.list[e.currentTarget.dataset.index])
				uni.navigateTo({
					url: 'xiangqing?data='+this.list[e.currentTarget.dataset.index]
				})
			}
		}
	}
</script>

<style lang="scss">
	.topmenu {
		// position: fixed;
		// top: 0;
		// left: 0;
		width: 100%;
		height: 100rpx;

		background-color: #FFFFFF;
		z-index: 1;
	}

	.list_view {
		margin: 0 28rpx 30rpx 28rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
		padding: 28rpx;
	}

	.nr {
		margin: 28rpx 0;
		display: flex;

		.left {
			width: 25%;
			color: #666666;
		}

		.right {
			width: 75%;
			font-weight: 400;
		}
	}
</style>
