<template>
	<view class="card cardBorder" @tap='goDetail' v-if="item">
		<!-- 卡片第一行数据 -->
		<view class="uni-flex jc-between">
			<!-- 左侧 -->
			<!-- 商品名称 -->
			<p class="contentName">{{item.COMMODITY_NAME}}</p>
			<!-- 右侧 -->
			<!-- 有效状态 -->
			<p class="other-coast">{{state[item.COMMODITY_TEMP_STATE]}}</p>
		</view>
		<!-- 卡片第一行角标 -->
		<view class="content-index" style="background-color:#FB8B56">{{i+1}}</view>
		<!-- 卡片第二行数据 -->
		<view style="line-height: 1;">
			<!-- 服务区名称 -->
			<p class="content-type-text">{{item.SERVERPART_NAME}}</p>
		</view>
		<!-- 卡片第三行数据 -->
		<view class="uni-flex content-box-cashpay">
			<!-- 中间 -->
			<!-- 资质到期时间 -->
			<p class="titleStyle">{{item.QUALIFICATION_DATE}}</p>
		</view>
		<!-- 分割线 -->
		<view class="bb1"></view>
		<!-- 卡片第四行第一项数据 -->
		<!-- 操作人员 -->
		<view class="cellBetweenStyle" v-if="item.STAFF_NAME">
			<view class="cellLeftStyle">
				<!-- 圆点 -->
				<p class="G-icon A-icon"></p>
				<span class="content-span">{{item.STAFF_NAME}}</span>
			</view>
			<!-- 卡片第四行第一项右侧数据 -->
			<text class="content-span lh15">{{STATISTICS_DATE}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {//这里存放接收到的父级数据
			item: {
				type: Object,
				required: true
			},
			i: {
				type: Number,
				required: true
			}
		},
		data() {//这里存放组件私有数据
			return {
				state:{
					0:"无效",
					1:"待延期",
					2:"已延期"
				}
			}
		},
		computed: {},
		methods: {//方法集合
			goDetail() {
				this.$emit('goDetail', this.item)
			},
			dateEmpty(v) {
				return this.$util.cutDate(v, 'YYYY/MM/DD')
			}
		}
	}
</script>

<!-- 注意：style样式增加scoped私有属性标记后，组件样式不能在引用的地方进行修改 -->
<style scoped>
	@import url('/common/css/listUnit.css');
	
	.cardBorder {//卡片边框颜色
		box-shadow: 0 0px 6rpx #E2E2E2;
	}
	
	.titleStyle {//主信息标签
		margin-right: 10rpx;
		font-size: 36rpx;
		color: #111;
		font-family: Bahnschrift Regular;
	}
	
	.typeText {
		padding: 0 10rpx;
		margin-right: 16rpx;
		margin-top: 40rpx;
		position: absolute;
		right: 0rpx;
	}
	
	.other-coast {//标签渐变背景色
		color: #D1A271;
		background: linear-gradient(to top, #EBDDCF, #FCFBF8);
		border-radius: 6rpx;
		font-size: 24rpx;
		padding: 0 10rpx;
		height: 40rpx;
	}
	
	.cellLeftStyle{//标签左侧对齐
		line-height: 45rpx;
		display: flex;
		flex-wrap : wrap;
		align-items: center; //上下对齐
		justify-content: flex-start; //左侧对齐
	}
	
	.cellBetweenStyle {//标签两侧对齐
		line-height: 45rpx;
		width: 100%;
		display: flex;
		flex-wrap : wrap;
		align-items: center; //上下对齐
		justify-content: space-between; //两侧对齐
	}
</style>
