<template>
	<view class="order_container">
		<!-- 订单头部 -->
		<u-sticky>
			<!-- 自定义头部 -->
			<u-navbar
				:title="orderType === 'mall' ? '商城订单' : '门店订单'"
				leftIcon="list"
				bgColor="#24262B"
				:placeholder="true"
				leftIconColor="#fff"
				:titleStyle="{color: '#fff'}"
				@leftClick="show = !show"
			/>
			<!-- 头部导航栏 -->
			<view class="order_header">
				<u-tabs
					:list="orderType === 'mall' ? mallNavlist : bookingNavlist"
					lineColor="#FFA100"
					:activeStyle="{ color: '#fff' }"
					:inactiveStyle="{ color: '#BBB' }"
					@click="toggleOrder"
				/>
				<!-- 下拉选项 -->
				<u-transition :show="show" :duration="300">
					<view class="selectOrder">
						<view class="select_item" :class="{active: orderType === 'mall'}" @click="orderType = 'mall'">
							<text>商城订单</text>
						</view>
						<view class="select_item" :class="{active: orderType === 'booking'}" @click="orderType = 'booking'">
							<text>球场订单</text>
						</view>
						<view class="select_item" v-for="(item, index) in employeeList" :key="index">
							<u-icon :name="item.iconNane" size="20"></u-icon>
							<text class="m-l-10">{{ item.title }}</text>
						</view>
					</view>
				</u-transition>
			</view>
		</u-sticky>
		<!-- 下拉选择订单类型列表 -->
		<view class="px-30 my-30">
			<uni-data-select
				v-model="stateVlue"
				placeholder="请选择订单的状态"
				:localdata="stateList"
				@change="getList"
			/>
		</view>
		<!-- 订单列表 -->
		<view v-if="stateList.length > 0" class="px-30 m-top20">
			<BookingOrderCard
				v-for="(item, index) in showList"
				:key="index"
				:orderList="item"
				:number="index + 1"
				:stateValue="formatState(item.state)"
				@showRefund="(value) => showRefund = value"
			>
				<!-- 退款 -->
				<template #refund>
					<view class="m-top30 px-30" v-show="item.refundReason">
						<text class="col-6 f-26 l-h-32">退款原因</text>
						<view class="m-top30">
							<u--textarea v-model="item.refundReason" disabled placeholder="请输入内容" ></u--textarea>
						</view>
					</view>
				</template>
				<!-- 评价 -->
				<template #comment>
					<view class="m-top30 px-30" v-show="item.commentContent">
						<text class="col-6 f-26 l-h-32">评论内容</text>
						<view class="m-top30">
							<u--textarea v-model="item.commentContent" disabled placeholder="请输入内容" ></u--textarea>
						</view>
					</view>
				</template>
			</BookingOrderCard>
			<view v-show="!showList.length > 0" >
				<u-empty text="暂无订单" />
			</view>
		</view>
		<!-- 遮罩层 -->
		<u-overlay :show="show" zIndex="98" opacity="0" @click="show = false"></u-overlay>
		<!-- 选择退款比例 -->
		<u-modal
			:show="showRefund"
			:title="title" showCancelButton
			@cancel="showRefund = false"
			@close="showRefund = false"
			@confirm="sendRefund"
		>
			<view class="slot-content">
				<u-radio-group
					v-model="radiovalue"
					placement="row"
				  >
				    <u-radio
				      :customStyle="{marginBottom: '8px', marginRight: '10px'}"
				      v-for="(item, index) in radiolist"
				      :key="index"
							:value="item.value"
				      :label="item.name"
				      :name="item.value"
				    >
				    </u-radio>
				  </u-radio-group>
			</view>
		</u-modal>
	
	</view>
</template>

<script>
	import BookingOrderCard from '@/components/order/bookingOrderCard.vue'
	import { getOrderList, getAftersalesOrder, getCommentOrder, getOrderState, getRefundState, getCommentState, businessLookRefund } from '@/api/order.js'
	import loadMore from '../../mixins/loadMore'
	import { mapGetters } from 'vuex'
	export default {
		components: { BookingOrderCard },
		mixins: [loadMore],
		data() {
			return {
				show: false, // 是否显示遮罩层
				title: '确定允许退款吗，请选择退款比例',
				showRefund: false,
				total: 0, //订单数量
				name: '实时订单', //订单状态名
				orderType: 'booking', // 订单类型 商家订单或者球场订单
				stateVlue: null, //当前选择状态码
				stateList: [], // 显示订单列表
				orderState: [], // 订单类型数据
				refundState: [], // 退货订单类型数据
				commentState: [], // 评价订单类型数据
				// 基本案列数据
				radiolist: [{name: '退全款', value: 1}, {name: '退款50%', value: 2}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue: 1,
				// 商城导航列表
				mallNavlist: [
					{ name: '自提', badge: { value: 2 } },
					{ name: '待配送', badge: { value: 2 } },
					{ name: '退款', badge: { value: 2 } },
					{ name: '已完成', badge: { isDot: true } },
				],
				// 球场导航列表
				bookingNavlist: [
					{ name: '实时订单', badge: { value: 0 } },
					{ name: '退款售后', badge: { value: 0 } },
					{ name: '订单评价', badge: { value: 0 } }
				],
				// 订单列表
				showList: [], // 显示订单列表
				// 商家订单功能列表
				mallList: [
					{title: '扫一扫', iconNane: 'scan'}
				],
				// 员工订单功能列表
				employeeList: [
					{title: '扫一扫', iconNane: 'scan'},
					{title: '张三', iconNane: 'account'},
					{title: '18172289999', iconNane: 'phone'},
					{title: '退出登录', iconNane: 'share-square'}
				]
			}
		},
		computed: { 
			...mapGetters(['userInfo']),
			formatState(){
				return (stateNum) => {
					let stateValue = ''
					this.stateList.forEach(item => {
						if(Number(item.value) === stateNum) {
							stateValue = item.text
						}
					})
					return stateValue
				}
			}
		},
		// async onLoad() {
		// 	// 获取三种订单状态
		// 	const [ orderState, refundState, commentState ] = await Promise.all([
		// 		getOrderState(),
		// 		getRefundState(),
		// 		getCommentState()
		// 	])
		// 	this.orderState = orderState
		// 	this.refundState = refundState
		// 	this.commentState = commentState
		// 	this.stateList = this.getStatus(this.orderState)
		// },
		// 获取订单列表
		// mounted() {
		// 	this.getList()
		// },
		methods: {
			// 选择订单类型
			selectMode(){},
			// 切换订单获取相应列表
			toggleOrder(item){
				this.name = item.name
				this.getList()
			},
			// 显示列表
			getList(){
				let query = { ...this.query, businessId: this.userInfo.businessId, state: this.stateVlue }
				if(this.name === '实时订单') {
					this.getNewList(query)
					this.stateList = this.getStatus(this.orderState)
				} else if(this.name === '退款售后') {
					this.getRefundList(query)
					this.stateList = this.getStatus(this.refundState)
				} else {
					this.getCommentList(query)
					this.stateList = this.getStatus(this.commentState)
				}
				uni.stopPullDownRefresh()
			},
			// 获取订单状态
			getStatus(arr){
				return arr.map(item => {
					return {
						value: item.dictValue,
						text: item.dictLabel
					}
				})
			},
			// 获取实时订单列表
			async getNewList(query) {
				const { rows, total } = await getOrderList(query)
				this.showList = rows
				this.total = total
				this.bookingNavlist[0].badge.value = total
			},
			// 获取退款订单列表
			async getRefundList(query){
				const { rows, total } = await getAftersalesOrder(query)
				this.showList = rows
				this.total = total
				this.bookingNavlist[1].badge.value = total
			},
			// 获取订单评论列表
			async getCommentList(query){
				const { rows, total } = await getCommentOrder(query)
				this.showList = rows
				this.total = total
				this.bookingNavlist[2].badge.value = total
			},
			// 发起退款
			async sendRefund(){
				await businessLookRefund(this.radiovalue)
				uni.$u.toast('退款成功')
				this.showRefund = false
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/static/css/order.scss'
</style>