<template>
	<view>
		<u-card v-for="(item,index) in cardData" :key="index" @click="handleDetails(index)">
			<view slot="head" class="head">
				<view class="title">{{item.ProNAme}}</view>
				<view class="sub-title">{{subTitle(item)}}</view>
				<view class="tags" v-if="item.ProSize">
					<view class="tag" v-for="(items,indexs) in JSON.parse(item.ProSize)" :key="indexs">
						<u-tag :text="items" type="warning" mode="dark"></u-tag>
					</view>
				</view>
			</view>
			<view slot="body" class="body">
				<view class="order-info">
					<view class="item">
						<u-icon name="grid" size="36"></u-icon>
						<text class="label">共计<text class="num">{{item.Quantity}}</text>套商品</text>
					</view>
					<view class="item">
						<u-icon name="map" size="36"></u-icon>
						<text class="label">{{item.FPROVINCE+item.FCOUNTY+item.FCITY+item.FAdress}}</text>
					</view>
					<view class="item">
						<u-icon name="clock" size="36"></u-icon>
						<text class="label">期望上门时间：{{item.FHopeServiceTime}}</text>
					</view>
					<view class="item">
						<u-icon name="rmb-circle" size="36"></u-icon>
						<text class="label">付款方式：{{payWay(item.FPayWay)}}</text>
					</view>
				</view>
			</view>
			<view slot="foot" class="foot"
				v-if="subTitle(item)=='待报价' || subTitle(item)=='待预约'">
				<!-- <view class="btn">
					<u-button v-if="btnText == '立即报价'" size="mini" shape="circle" type="warning" @click="grap(item.FID)">立即抢单</u-button>
				</view> -->
				<view class="btn" v-show="subTitle(item) != '已完成'">
					<u-button size="mini" shape="circle" type="warning" @click="handleDetails(index)">{{btnText}}
					</u-button>
				</view>
			</view>
			<view slot="foot" class="foot"
				v-else-if="subTitle(item)=='待服务' || subTitle(item)=='待验收'">
				<!-- <view class="btn">
					<u-button v-if="btnText == '立即报价'" size="mini" shape="circle" type="warning" @click="grap(item.FID)">立即抢单</u-button>
				</view> -->
				<view class="btn" v-show="subTitle(item) != '已完成'">
					<u-button size="mini" shape="circle" type="warning" @click="handleDetails(index)">{{btnText}}
					</u-button>
				</view>
			</view>
			<view slot="foot" class="foot" v-else-if="item.HasQuoted==0 && subTitle(item)=='待雇佣'">
				<!-- <view class="btn">
					<u-button v-if="btnText == '立即报价'" size="mini" shape="circle" type="warning" @click="grap(item.FID)">立即抢单</u-button>
				</view> -->
				<view class="btn" v-show="subTitle(item) != '已完成'">
					<u-button size="mini" shape="circle" type="warning" @click="handleDetails(index)">{{btnText}}
					</u-button>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		name: "card",
		props: ['cardData', 'btnText'],
		data() {
			return {

			};
		},
		methods: {
			//付款方式转换
			payWay(x) {
				switch (x) {
					case '1':
						return '平台支付'
					case '2':
						return '平台支付'
					case '3':
						return '业主现场支付'
				}
			},
			grap(FID) {
				this.$emit('show', FID)
			},
			handleDetails(index) {
				this.$emit('handleDetails', index)
			},
			subTitle(item) {
				let result = ''
				if (parseInt(item.BJcount) > 0 && item.caption == '待报价') {
					result = '待雇佣'
				} else {
					result = item.caption
				}
				return result
			}
		},
		computed: {}
	}
</script>

<style>
	.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;
	}

	.num {
		margin: 0 2px;
		color: #7C59FC;
		font-size: 16px;
	}

	.label {
		margin-left: 5px;
	}

	.btn {
		margin: 2% 2%;
	}

	.foot {
		display: flex;
		flex-direction: row-reverse;
	}
</style>
