<template>
	<view class="order">
		<view class="loading" v-if="state.loading">
			<u-loading></u-loading>
			<view>
				加载中...
			</view>
		</view>
		<view class="main" v-else>
			<order-card v-if="data.length !== 0" :cardData="data" :btnText="btnText" @show="show" @handleDetails="handleDetails"></order-card>
			<u-empty v-if="data.length === 0" text="暂无数据" font-size="32"></u-empty>
		</view>
		<u-modal
		v-model="showModal"
		title="抢单提示"
		:show-cancel-button="true"
		:async-close="true"
		@confirm="modalConfirm"
		ref="uModal"
		confirm-color="#7c59fc"
		>
			<view style="text-align: center;margin: 5% 0;">
				<text>预计此单价格为<text>{{}}</text>元，是否抢单？</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {loading,hidden,toast} from '../tips/myTips.js'
	import {grabOrder,SFView} from '../api/apis.js'
	import orderCard from './orderCard'
	export default {
		props:{
			data:{
				type:Array
			},
			status:{
				type:String
			},
			loading:{
				type:Boolean
			}
		},
		components:{
			orderCard
		},
		data(){
			return {
				btn:{
					background:"#ff9900",
					color:"#FFFFFF"
				},
				showModal:false,
				FID:''
			}
		},
		computed:{
			state:function(){
				return this.$store.state
			},
			//不同状态的单据,按钮不同
			btnText:function(){
				switch(this.$store.state.state){
					case '待报价':
						return '立即报价'
					case '待预约':
						return '预约安装'
					case '待服务':
						return '完工结算上报'
					case '待验收':
						return '待业主验收'
				}
			},
		},
		methods:{
			handleDetails(index){
				console.log("订单内码:",this.data[index].FID)
				uni.navigateTo({
					url:'../orderDetails/orderDetails?FID='+this.data[index].FID
				})
			},
			show(FID){
				this.showModal = true
				this.FID = FID
			},
			modalConfirm(){
				let that = this
				let params = {FID:''}
				params.FID = this.FID
				grabOrder(params).then((res) => {
					if(res.data.code == 0){
						console.log("抢单成功:",res)
						that.$refs.uModal.clearLoading()
						that.showModal = false
						this.reload()
					}else{
						console.log("抢单失败:",res)
						toast(res.data.message)
						that.$refs.uModal.clearLoading()
						that.showModal = false
						that.reload()
					}
				})
			},
			//重新加载
			reload(){
				let that = this
				this.$store.state.loading = true
				SFView(this.state.state).then((res) => {
					that.$store.state.loading = false
					console.log("查询订单信息结果:",res)
					if(res.data.code == 0){
						console.log(that.$store.state.state+'信息')
						if(Object.values(res.data.result)[0] !== null){
							console.log(Object.values(res.data.result)[0][0])
							that.orderData = Object.values(res.data.result)[0][0]
						}else{
							console.log(Object.values(res.data.result)[0])
							that.orderData = Object.values(res.data.result)[0]
						}
					}else{
						console.log("查询"+that.$store.state.state+"信息失败")
						console.log(res)
						toast(res.data.message)
					}
				})
			}
		}
	}
</script>

<style>
	.order{
		padding: 2%;
		overflow-y: scroll;
	}
	.loading{
		text-align: center;
	}
	.head{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	.title{
		color: #000000;
		font-size: 16px;
		width: 75%;
	}
	.sub-title{
		color: #ff9900;
	}
	.tags{
		margin-top: 10px;
	}
	.tag{
		display: inline;
		margin-right: 8px;
	}
	.item{
		margin: 10px 0;
	}
	.label{
		margin-left: 5px;
	}
	.foot{
		display: flex;
		flex-direction: row-reverse;
	}
	.btn{
		margin: 0 2%;
	}
	
</style>
