<template>
	<view class="">
		<z-paging :language="$i18n.locale" ref="paging" @query="queryList" :pageSize="20"
		:style="'background-color: '+theme.bg+';color: '+theme.text">
			
		<view slot="top" class="relative" :style="{height: `calc(${statusBar}px + 55px)`}">
			<view class="width-100b fixed1" :style="{height: `calc(${statusBar}px + 55px)`}">
				<view class="width-100b fixed1 flex align-center justify-start padding-l-88"
					:style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 55px)`}">
					<i @click="router.goBack()" class="cuIcon-back font-30 absolute" style="left: 30rpx;"></i>
					<text class="font-32 weight-bold">{{i18n.licai.text1}}</text>
					<view class="width-450 height-60 radiu-50 padding-w-20 flex align-center justify-between absolute"
					:style="'background-color: '+theme.fu_bg"
					style="right: 30rpx;">
						<input @input="searchCion" class="font-24" :placeholder="i18n.licai.text2" type="text"
							v-model="searchVal" />
						<i class="cuIcon-search"></i>
					</view>
				</view>
			</view>
		</view>
		
		<view slot="top" @click="router.push('/pages/index/money/my_record')"
		:style="'background-color: '+theme.fu_bg"
			class="height-86 flex align-center justify-between padding-w-40">
			<view class="flex align-center">
				<image class="width-34 height-34 margin-r-10" src="/static/imgs/index/Frame1@2x.png" mode=""></image>
				<text class="font-26">{{i18n.licai.text3}}</text>
			</view>
			<i class="cuIcon-right font-26"></i>
		</view>

		<view class="padding-w-40">
			<view class="listBox" v-for="(item,index) in list" :key="index"
			:style="'background-color: '+theme.fu_bg+';color: '+theme.text">
				<view class="height-100 flex align-center justify-between">
					<image class="width-96 height-96 radiu-28" :src="item.logo_image" mode=""></image>
					<view class="height-96 flex-1 margin-l-18">
						<view class="height-48 flex align-center">
							<text class="font-32  bold-font weight-bold">{{item.name}}</text>
						</view>
						<view class="height-48 flex align-center justify-between">
							<text class="font-24">{{i18n.licai.text4}}：{{item.min_num}}-{{item.max_num}}</text>
							<text class="font-24">{{i18n.licai.text5}}：{{item.day}}{{i18n.licai.text6}}</text>
						</view>
					</view>
				</view>
				<view class="width-100b height-2 margin-20-auto" style="background-color: rgba(191, 195, 199, 0.2);"></view>
				<view class="height-60 flex align-center justify-between">
					<view class="padding-w-18 line-height-56 text-center height-56 radiu-10"
						style="min-width: 270rpx;background: #2DD1AF;">
						<text class="font-22 color-white">{{i18n.licai.text7}}:{{item.rixi}}</text>
					</view>
					<view @click="router.push('/pages/index/money/investing?id='+item.id)"
						class="flex align-center justify-end line-height-56">
						<text class="font-24 color-EA466F margin-r-6">{{i18n.licai.text8}}</text>
						<i class="cuIcon-right color-999999 font-24"></i>
					</view>
				</view>
			</view>
		</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchVal: '',
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				list: [],
				list_all: [],
				
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.searchVal = ''
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.post('/product/index_list').then(res => {
					if (res.code == 1) {
						console.log('数据', res)
						this.list = res.data
						this.list_all = res.data
						this.$refs.paging.complete([{}]);
					}
				})
			},
			searchCion() {
				if (this.searchVal == '') {
					this.list = this.list_all
					return
				}
				let arrtemp = []
				this.list_all.forEach((item) => {
					if (item.name.indexOf(this.searchVal.toUpperCase()) != '-1') {
						arrtemp.push(item)
					}
				})
				this.list = arrtemp
			},
		}
	}
</script>

<style lang="scss">
	.fixed1 {
		position: fixed;
		top: 0;
		z-index: 1010;
	}

	.listBox {
		width: 100%;
		// height: 228rpx;
		padding: 24rpx;
		// background-color: #FFFFFF;
		border-radius: 28rpx;
		margin: 24rpx auto;
	}
</style>
