<template>
	<view class="rf-category">
		<view class="icoStyle">
			<view style="width:90%;height:99upx">
				<rf-search-bar @search="navToSearch" icon="iconkuaijiecaidan" style="z-index: 99;" />
			</view>
		</view>
		<PageMenu :currentIndex="3" />
		<!-- <view class="ListBox" v-for="(item,index) in FundList" @click="gopage(index,item)"> -->
		<view class="ListBox" v-for="(item,index) in FundList"
			@click="gopage('financialFundIdeas/fundIdeasDetailsTwo',item)">
			<!-- <view class="ListBox" v-for="(item,index) in FundList" @click="gopage(index,item)"> -->
			<view class="imgBox">
				<image :src="websiteUrl+item.photo" mode="" class="imgPhoto"></image>
				<!-- <image v-show="flag==false" :src="'../../../static/img/finance/fund'+(index+1)+'.png'" mode=""  class="imgPhoto"></image> -->
			</view>
			<view class="imgList">
				<text class="fundName">{{item.title}}</text>
				<text style="margin-top: 30upx;display: block;">{{item.subtitle}}</text>
				<view style="margin: 30upx 0;">
					<text v-for="listItem in mark[index]" class="listItem">{{listItem}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import rfSearchBar from '@/components/rf-search-bar-xiangmu';
	import PageMenu from '../dom/pageMenu';
	import {
		getBaseFundIdeasInfos
	} from '@/api/financialService/baseFundIdeasInfo'
	export default {
		components: {
			rfSearchBar,
			PageMenu
		},
		data() {
			return {
				FundList: [],
				mark: [],
				flag: true,
			}
		},
		onShow() {
			this.getData();

		},
		methods: {
			back() {
				uni.navigateBack();
			},
			gopage(path, item) {

				let key = this.FundList.baseEntityId;
				uni.navigateTo({
					url: '/pages/financialService/' + path + '?key=' + item.baseEntityId
				})
			},
			// gopage(pathnumber,item){
			// 	let path = '';
			// 	if(pathnumber == 1){
			// 		path = 'financialFundIdeas/fundIdeasDetailsOne'
			// 	}else if(pathnumber == 0){
			// 		path = 'financialFundIdeas/fundIdeasDetailsTwo'
			// 	}
			// 	let key = this.FundList.baseEntityId;
			// 	uni.navigateTo({
			// 		url:'/pages/financialService/'+path +'?key='+item.baseEntityId
			// 	})
			// },
			async getData() {
				let params = {
					pageSize: "5",
					pageNo: "1",
					language: this.$i18n.locale.toUpperCase(),
					statusDict: '2'
				}
				const res = await this.$myRequest({
					url: '/project/baseFundIdeasInfos/',
					data: {
						...params
					}
				});
				// let res = await getBaseFundIdeasInfos(params);

				if (res.data) {
					this.FundList = res.data.baseFundIdeasInfos;
					this.mark = [];
					for (let i = 0; i < this.FundList.length; i++) {
						this.mark.push(this.FundList[i].keyword.split(','));
					}
				}

			},
			//搜索
			navToSearch(keyword) {
				uni.navigateTo({
					url: '/pages/index/search/search?data=' + keyword
				})
			},
			// imgErro(){
			// 	this.flag = true
			// },
			imageError: function(e) {
				this.flag = true
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
			},
			i18n(data) {
				return this.$t('common.' + data);
			},



		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
		width: 750upx;
		overflow-x: hidden;
	}

	.rf-category {
		background-color: $color-white;
		padding-bottom: 40upx;
		/*  #ifdef  APP-PLUS  */
		// margin-top: calc(20upx + var(--status-bar-height));

		/*  #endif  */
		.icoStyle {
			display: flex;
			align-items: center;

			.leftArrow {
				/*  #ifdef  APP-PLUS  */
				padding-top: calc(28upx + var(--status-bar-height));

				/*  #endif  */
				.text {
					color: #fff;
				}
			}
		}

		.imgBox {
			width: 100%;
			height: 340upx;

			.imgPhoto {
				width: 100%;
				height: 100%;
			}
		}

		.fundName {
			margin-top: 30upx;
			display: block;
			font-size: 30upx;
			font-weight: 700;
			color: rgba(11, 11, 17, .7);
		}

		.ListBox {
			// margin-top: 80upx;
			margin-bottom: 74upx;
			color: #666666;

			.imgList {
				margin-top: 20upx;
				font-size: 18upx;
				padding: 0 40upx;

				.listItem {
					margin-right: 40upx;
					font-size: 24upx;
					color: rgba(11, 11, 17, .7);
				}
			}
		}



	}
</style>
