<template>
	<view class="content">
		<u-sticky bgColor="#fff" v-if="$Route.query.type != 'synthesis'">
			<view class="header-sticky">
				<u-tabs
					:list="tabs"
					:scrollable="tabScroll"
					:lineWidth="20"
					:lineHeight="4"
					:lineColor="`url(${tabsBg}) 100% 100%`"
					@click="onTab"
				></u-tabs>
			</view>
		</u-sticky>
		<!-- 列表 -->
		<block v-if="orderArr.length > 0">
			<view class="list" v-for="(item, index) in orderArr" :key="index">
				<!-- 年费单 -->
				<services-block
					v-if="$Route.query.type === 'service'"
					:no="item.order_no"
					:status="item.status"
					:user="item.user"
					:time="item.created_at"
					:service="item.service"
					:price="item.price"
					:lawyer="item.lawyer || {name: ''}"
					:isSelf="item.is_self"
					:payStatus="item.pay_status"
					@info="onInfo"
					@pay="onPay"
				/>
				<!-- 咨询单 -->
				<synthesis-block
					v-if="$Route.query.type === 'synthesis'"
					:no="item.order_no"
					:user="item.user"
					:time="item.created_at"
					:synthesis="item.synthesis"
					:lawyer="item.lawyer || {name: ''}"
					:isSelf="item.is_self"
					:payStatus="item.pay_status"
					@info="onInfo"
					@pay="onPay"
				/>
				<!-- 委托单 -->
				<entrust-block
					v-if="$Route.query.type === 'entrust'"
					:no="item.order_no"
					:entrust="item.entrust"
					:user="item.user"
					:time="item.created_at"
					:status="item.status"
					:price="item.price"
					:diff="item.need_pay_diff_prices"
					:lawyer="item.lawyer || {name: ''}"
					:isSelf="item.is_self"
					:payStatus="item.pay_status"
					@info="onInfo"
					@pay="onPay"
				/>
				<!-- 拓展单 -->
				<expand-block
					v-if="$Route.query.type === 'expand'"
					:no="item.order_no"
					:user="item.user"
					:time="item.created_at"
					:expand="item.expand"
					:price="item.price"
					:status="item.status"
					:diff="item.need_pay_diff_prices"
					:lawyer="item.lawyer || {name: ''}"
					:isSelf="item.is_self"
					:payStatus="item.pay_status"
					@info="onInfo"
					@pay="onPay"
				/>
			</view>
			<!-- 分页 -->
			<u-loadmore v-if="pagesShow" :status="status" />
		</block>
		<block v-else>
			<view class="null-pages">
				<u-empty
					mode="order"
					icon="http://cdn.uviewui.com/uview/empty/order.png"
					text="暂无相关订单"
				>
				</u-empty>
			</view>
		</block>
	</view>
</template>

<script>
	import { servicesOrder, synthesisOrder, entrustOrder, expandOrder, orderRead } from '@/apis/interfaces/synthesisOrder.js'
	import entrustBlock from '@/components/entrustOrder.vue'
	import expandBlock from '@/components/expandOrder.vue'
	import servicesBlock from '@/components/servicesOrder.vue'
	import synthesisBlock from '@/components/synthesisOrder.vue'
	import permision from "@/js_sdk/wa-permission/permission.js"
	export default {
		components: { entrustBlock, expandBlock, servicesBlock, synthesisBlock },
		data() {
			return {
				tabsBg		: require('@/static/icons/synthesize_icon.png'),
				tabType		: null,
				tabs		: [
					{ name: '全部', type: null }
				],
				tabScroll	: false,
				orderArr	: [],
				funName		: '',
				// 分页
				page		: {
					current	: 1
				},
				pagesShow	: false,
				status   	: ''
			};
		},
		created() {
			let funName  = ''
			let tabsArr  = []
			let tabName  = ''
			let isScroll = false
			// 订单类型
			switch(this.$Route.query.type){
				case 'service':
					funName  = servicesOrder
					tabName  = '年费订单'
					tabsArr  = [
						{ name: '待支付', type: 0 },
						{ name: '待签约', type: 1 },
						{ name: '已签约', type: 2 },
						{ name: '已退款', type: 3 },
					]
					break;
				case 'synthesis':
					funName  = synthesisOrder
					tabName  = '咨询订单'
					break;
				case 'entrust':
					isScroll = true
					funName  = entrustOrder
					tabName  = '委托订单'
					tabsArr  = [
						{ name: '待支付', type: 0 },
						{ name: '待审核', type: 1 },
						{ name: '待签约', type: 2 },
						{ name: '已签约', type: 3 },
						{ name: '已完成', type: 4 },
						{ name: '已驳回', type: 5 },
					]
					break;
				case 'expand':
					funName  = expandOrder
					tabName  = '拓展订单'
					tabsArr  = [
						{ name: '待支付', type: 0 },
						{ name: '已支付', type: 1 },
						{ name: '已退款', type: 2 },
					]
					break;
			}
			
			this.tabs = [
				...this.tabs,
				...tabsArr
			]
			this.tabScroll = isScroll
			this.funName   = funName
			uni.setNavigationBarTitle({
				title: tabName
			})
			this.getList()
		},
		methods: {
			// 切换tab
			onTab(e) {
				let { type } = e;
				if(this.tabType != type){
					this.tabType 	  = type
					this.page.current = 1
					this.getList()
				}
			},
			// 支付
			onPay(no){
				uni.showActionSheet({
					title	: '选择支付方式',
					itemList: ['线下打款', '线上支付'],
					success	: res => {
						console.log(res.tapIndex)
						console.log(no)
					}
				})
			},
			// 打开详情
			onInfo(no){
				let orderArr  = this.orderArr
				let orderObj  = orderArr.find(val => val.order_no === no)
				let orderId	  = orderObj.order_id
				let orderType = this.$Route.query.type
				let pagesName = ''
				
				switch(this.$Route.query.type){
					case 'service':
						pagesName = 'OrderServicesInfo'
						break;
					case 'synthesis':
						pagesName = 'OrderSynthesisInfo'
						break;
					case 'entrust':
						pagesName = 'OrderEntrustInfo'
						break;
					case 'expand':
						pagesName = 'OrderExpandInfo'
						break;
				}
				
				this.$Router.push({
					name	: pagesName,
					params	: {
						id: orderId
					}
				})
			},
			// 联系电话
			async onCallPhone(number){
				let result = await permision.requestAndroidPermission('android.permission.CALL_PHONE')
				// 检查用户权限
				if(result == 1){
					uni.makePhoneCall({
						phoneNumber: number
					})
					return
				}
				// 引导用户设置联系电话
				uni.showModal({
					title		: '提示',
					content		: '请授权应用获得[拨打电话]权限',
					showCancel	: false,
					confirmText	: '设置',
					success		: modalRes => {
						permision.gotoAppPermissionSetting()
					}
				})
			},
			// 获取列表信息
			getList(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				this.funName({
					status: this.tabType,
					page  : this.page.current
				}).then(res => {
					let { data, page } = res
					this.orderArr  = page.current == 1 ? data: this.orderArr.concat(data)
					this.page	   = page
					this.pagesShow = !page.has_more
					this.status	   = page.has_more ? 'loading' : 'nomore'
					uni.hideLoading()
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		},
		onReachBottom() {
			this.pagesShow = true;
			if(this.page.has_more){
				this.page.current++
				this.getList()
				return
			}
		}
	}
</script>

<style lang="scss">
	.content{ padding-bottom: 10rpx; box-sizing: border-box; }
	// 滑块
	.header-sticky{ padding-bottom: 12rpx; }
	// 列表
	.list{ overflow: hidden; }
	// 内容为空
	.null-pages{ height: 70vh; display: flex; align-items: center; justify-content: center; }
</style>
