<template>
	<view class="order view">
		<view class="top" @click="handleDetail(newsItem)">
			<text class="dot" v-if="!newsItem.new_flag && newsItem.state == '0'"></text>
			<text class="title-no" :class="newsItem.flag?'redColor':''">{{ newsItem.fee_code }}</text>
			<view class="title-info" v-if="newsItem.state_text">
				<button class="title-info__status" type="default">
					<text class="item-block-btn__text">{{ newsItem.state_text }}</text>
				</button>
			</view>
		</view>
		<view class="middle view">
			<view class="middle-title" @click="handleDetail(newsItem)">
				<text class="middle-title__text flex1" :class="newsItem.flag?'redColor':''">终端：</text>
				<text class="middle-title__text flex6" :class="newsItem.flag?'redColor':''">{{ newsItem.terminal_name }}</text>
			</view>
			<view class="middle-title" @click="handleDetail(newsItem)">
				<text class="middle-title__text flex1" :class="newsItem.flag?'redColor':''">产品：</text>
				<text class="middle-title__text flex6" :class="newsItem.flag?'redColor':''">{{ newsItem.product_name }}</text>
			</view>
			<view class="check-box">
				<radio-group @change="handleCheck(idx)">
					<label v-if="isCheck">
						<radio :value="cb" :checked="newsItem.checked" />
					</label>
				</radio-group>
				<view class="total-amount">
					<button class="title-info__status blue" type="default" @click="goActDetail(newsItem.acts)">
						<text class="item-block-btn__text">活动明细</text>
					</button>
					<view>
						<text class="middle-title__text">总金额：</text>
						<text class="middle-title__text red">{{ newsItem.total_amount }}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
		  <scroll-view scroll-x scroll-y class="popup-content">
			<view class="view planout-block-item" v-for="(item,index) in actArr" >
				<view class="text-block">
					<text class="middle-date middle-date-select">活动名称：</text>
					<!-- <text class="middle-date-pro middle-date-des-select">五粮液39度重点城市的终端活动-优化0801</text> -->
					<text class="middle-date-pro middle-date-des-select" :class="item.act_name.length>15?'pro-flex': ''">{{ item.act_name }}</text>
				</view>
				<view class="text-block">
					<text class="middle-date middle-date-select">活动金额：</text>
					<text class="middle-date-des middle-date-des-select">{{ item.amount }}</text>
				</view>
				<view class="text-block">
					<text class="middle-date middle-date-select">张数：</text>
					<text class="middle-date-des middle-date-des-select">{{ item.sheet_num }}</text>
				</view>
			</view>
		  </scroll-view>
		</uni-popup>
	</view>
</template>

<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom');
// #endif
import store from '@/store/index.js';
export default {
	props: {
		newsItem: {
			type: Object,
			default: function (e) {
				return {};
			}
		},
		idx: {
			type: Number
		},
		isCheck: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			ishowDetail: true,
			ishowReceiveDetail: false,
			receiveInfoHeight: '132',
			receiveInfoDetailSize: {},
			allFiles: [],
			cb: '',
			actArr: []
		};
	},
	computed: {
		imageStyles() {
			return {
				width: 64,
				height: 64,
				border: {
					radius: '50%'
				}
			};
		},
		receiveInfoHeightComputed() {
			console.log(this.receiveInfoHeight - 0, '[][]');
			if (this.receiveInfoHeight - 0 === 0) {
				const height = this.allFiles.length > 0 ? 485 : 0;
				return { minHeight: height + 'px' };
			} else {
				return {
					height: `${this.receiveInfoHeight}px`
				};
			}
		}
	},
	mounted() {},
	methods: {
		goActDetail(arr){
			this.actArr = arr
			this.$refs.popup.open()
		},
		closePopup(){
			this.actArr = []
			this.$refs.popup.close()
		},
		handleCheck() {
			this.$emit('handleCheck', this.idx);
		},
		handleDetail(item) {
			uni.navigateTo({
				url: `/pages/loan-query/loan-detail?code=${item.fee_code}`
			});
		},
		click() {
			this.$emit('click');
		},
		close(e) {
			e.stopPropagation();
			this.$emit('close');
		},
		handleShowDetail() {
			this.ishowDetail = !this.ishowDetail;
		},
		checkLogistics() {
			const num = 'dfb0ebae8103034ccb863d3702e22eb6';
			uni.navigateTo({
				url: `/pages/logistics/logistics?logisticno=${num}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.view {
	flex-direction: column;
}

.order {
	flex: 1;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0px 2px 4px 0px #dbe4ee;
	margin-top: 28rpx;
}

.top {
	height: 72rpx;
	align-items: center;
	justify-content: space-between;
	padding: 0 32rpx;
}

.title-no {
	font-size: 24rpx;
	color: #555555;
	margin-left: 50rpx;
}

.title-info {
	align-items: center;
}

.title-info__status {
	width: 130rpx;
	height: 48rpx;
	line-height: 48rpx;
	background: #f61d30;
	font-size: 12px;
	color: #fff;
	text-align: center;
	padding: 0 10rpx;
	border: none;
}
.blue{
	background: #007aff;
	margin-right: 20rpx;
}
.item-block-btn__text {
	font-size: 12px;
	color: #fff;
}

.middle {
	// position: relative;
	padding: 26rpx 32rpx;
}

.middle-title {
	display: flex;
	align-items: center;
	margin-bottom: 32rpx;
}

.middle-title__text {
	font-weight: 500;
	font-size: 28rpx;
	color: $text-base-color;
	font-family: PingFangSC, PingFangSC-Medium;
}

.icon-car {
	width: 13px;
	height: 13px;
	margin-left: 16rpx;
}

.text-block {
	margin-bottom: 10rpx;
	display: flex;
	overflow: auto;
}

.text-block-last {
	margin-bottom: 0;
}

.middle-date {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
}
.middle-date-pro {
	font-size: 28rpx;
	color: #888;
	overflow: auto;
}
.pro-flex{
	flex: 4;
	height: 74rpx;
}
.middle-date-des {
	font-size: 28rpx;
	color: #888;
}

.text-block-box {
	display: flex;
	// height: 120rpx;
	margin-bottom: 16rpx;
	justify-content: space-between;
}

.middle-date-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	text-align: right;
}

.dot {
	width: 5px;
	height: 5px;
	background: #3bdc88;
	border-radius: 50%;
	margin-top: -4px;
	margin-right: 7px;
}

.bottom {
	padding: 0 50rpx 48rpx;
}

.bottom-nav {
	height: 40rpx;
	justify-content: flex-end;
	align-items: center;
}

.bottom-nav-arrow {
	align-items: center;
}

.arrow-des {
	font-size: 24rpx;
	color: #999;
}

.icon-arrow {
	width: 7px;
	height: 4px;
	margin-left: 16rpx;
	margin-top: 2px;
	transition-property: transform;
	transition-duration: 0.15s;
	transform: rotate(0deg);
}

.icon-arrow-rotate {
	transform: rotate(180deg);
}

.bottom-content {
	flex-direction: column;
	margin-top: 24rpx;
}

.block-detal {
	display: flex;
	flex-direction: column;
	margin-bottom: 6rpx;
}

.block-detal-last {
	margin-bottom: 32rpx;
}

.block-detal-item {
	display: flex;
	margin-bottom: 20rpx;
	justify-content: space-between;
}

.block-detal-item-last {
	margin-bottom: 0;
}

.detal-item-label {
	color: #999;
	font-size: 28rpx;
}

.detal-item-value {
	// flex: 1;
	color: #333;
	font-size: 28rpx;
}

.detal-item-value2 {
	font-size: 24rpx;
	// width: 200%;
	// flex: 2;
	// text-align: left;
}
.detal-item-value3 {
	padding-left: 60rpx;
	font-size: 24rpx;
	width: 300%;
	flex: 2;
	text-align: right;
}
.receive-info {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: 40rpx;
	min-height: 240rpx;
	// padding-bottom: 96rpx;
}

.receive-info-auto {
	// height: auto;
}

.detal-item-title {
	color: #333;
	font-size: 28rpx;
	font-weight: 600;
}

.attach-block {
	flex-direction: column;
}

.attach-file {
	width: 94px;
	height: 94px;
	margin: 20rpx 20rpx 0 0;
}

.float-btn-block {
	position: absolute;
	left: 0;
	bottom: -2rpx;
	z-index: 10;
	width: 620rpx;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.float-btn {
	padding: 0 20px;
	height: 60rpx;
	border: 0.5px solid #d8d8d9;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.float-btn__text {
	font-size: 24rpx;
}
.cell-list {
	flex-direction: column;
}
.upload-block {
	display: flex;
	height: 88rpx;
	border-radius: 4px;
	margin-top: 20rpx;
	flex-direction: column;
}
.total-amount {
	flex: 1;
	justify-content: space-between;
}
.red {
	color: #f61d30;
	font-weight: 600;
}
.flex1 {
	flex: 1;
}
.flex6 {
	flex: 6;
}
.dot {
	width: 18px;
	height: 18px;
	line-height: 18px;
	background: #ff0f00;
	border-radius: 9px;
	color: #fff;
	font-size: 11px;
	text-align: center;
	margin: 0;
	position: absolute;
}
.check-box {
	display: flex;
	justify-content: space-between;
}
.popup-content{
	background: #fff;
	padding: 20rpx 20rpx;
	width: 600rpx;
	max-height: 800rpx;
	border-radius: 5px;
	overflow: auto;
	display: flex;
	flex-direction: column;
}
.planout-block-item {
	border-bottom: 1px solid #999;
	margin-bottom: 10rpx;
}
.redColor{
	color: red;
}
.middle-date-des-select{
	flex: 1;
	flex-wrap: wrap;
}
</style>