<template>
	<view class="card cardBorder" @tap='goDetail' :style="{boxShadow:item.DealMark===0?'0 0px 6rpx #f9b297':''}">
		<!-- 卡片第一行数据 -->
		<view class="uni-flex jc-between">
			<!-- 左侧 -->
			<!-- 商品名称 -->
			<p class="contentName">{{item.BUSINESSPROJECT_NAME}}</p>
			<!-- 右侧 -->
			<!-- 有效状态 -->
      <p v-if="item.DealMark===0" class="other-coast">{{item.PROJECTWARNING_STATE===1000?'待切换':item.PROJECTWARNING_STATE===2000?'审核中':item.PROJECTWARNING_STATE===9000?'已切换':item.PROJECTWARNING_STATE===9999?'暂不切换':''}}</p>
      <p v-else class="other-coastGray">{{item.PROJECTWARNING_STATE===1000?'待切换':item.PROJECTWARNING_STATE===2000?'审核中':item.PROJECTWARNING_STATE===9000?'已切换':item.PROJECTWARNING_STATE===9999?'暂不切换':''}}</p>
<!--			<p v-else :class="item.PROJECTWARNING_STATE===9999 || item.PROJECTWARNING_STATE===9000?'other-coast other-coastGray':'other-coast'">{{item.PROJECTWARNING_STATE===1000?'待切换':item.PROJECTWARNING_STATE===2000?'审核中':item.PROJECTWARNING_STATE===9000?'已切换':item.PROJECTWARNING_STATE===9999?'暂不切换':''}}</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" >
      <!--  先判断是否有切换时间,如果有直接显示已切换,没有切换时间再判断是否有天数 有就显示天数没有就显示完成保底      -->
        <text v-if="item.SWITCH_DATE">
            <text style="font-size:18px;line-height:50px;margin:0 4px;color: red;">已切换</text>
        </text>
        <text v-else>
          <text v-if="item.EXPIREDAYS!==0">
            <text style="font-size: 12px;color: orangered;">预计</text>
            <text style="font-size: 28px;line-height: 50px;margin: 0 4px;">{{item.EXPIREDAYS}}</text>
            <text style="font-size: 12px;">天</text>
          </text>
          <text style="font-size:18px;line-height:50px;margin:0 4px;" v-else>完成保底</text>
        </text>
			</p>
		</view>
		<!-- 分割线 -->
		<view class="bb1"></view>
		<!-- 卡片第四行第一项数据 -->
		<!-- 操作人员 -->
		<view class="cellBetweenStyle" >
			<view class="cellLeftStyle">
				<!-- 圆点 -->
				<p class="G-icon A-icon" style="margin: 0 8px 0 5px"></p>
				<span class="content-span">{{item.BUSINESS_TYPE===1000?'合作经营':item.BUSINESS_TYPE===2000?'固定租金':''}}</span>
			</view>
			<!-- 卡片第四行第一项右侧数据 -->
      <!-- CHANG_DATE是SWITCH_DATE不保留时分秒的数据  获取数组的地方加的 -->
			<text class="content-span lh15">{{item.SWITCH_DATE?item.CHANG_DATE:item.WARNING_DATE}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {//这里存放接收到的父级数据
			item: {
				type: Object,
				required: true
			},
			i: {
				type: Number,
				required: true
			}
		},
		data() {//这里存放组件私有数据
			return {
			}
		},
		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;
	}
  .other-coastGray{
    background: transparent;
    color: #999999;
  }

	.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>
