<template>
	<view class="content">
		<com-navbar :leftIcon="false" bgColor="#fff" title="需求" :titleStyle="{ color: '#000000', fontSize: '34rpx' }" />
		<view ></view>
		<view class="content-tabs" :style="{ top: `calc(${globalData.statusBarHeight}rpx + 122rpx)` }">
			<view class="content-tabs-text" v-for="(v,index) in list" @click="jump(index)" :key="index">
				<view class="" :style="subscript == index?'color: #000000;' : 'color: #444444;'">
					{{v.name}}
				</view>
				<view v-show="subscript == index" class="content-tabs-text-area"></view>
			</view>
		</view>
		<!-- <template v-if="arr && arr.length"> -->
			<comindex class="content-mindex" :subscript='subscript'></comindex>
		<!-- </template> -->
<!-- 		<view v-else class="diagram">
			<image src="@/static/icon/qst.png" mode=""></image>
			<view class="">
				暂无数据
			</view>  
		</view> -->
		<com-tabbar  :list=" [{
					name: '首页',
					icon: '/static/tabbar/tb1.png', 
					selectIcon:'/static/tabbar/td1.png', 
					url: '/pages/home/index',
					type: 'type'
				}, {
					name: '我的需求', 
					icon: '/static/tabbar/tb2.png',
					selectIcon: '/static/tabbar/td2.png', 
					url: '/pages/demand/index',
					type: 'demand'
				}, {
					name: '发布', 
					icon: '/static/tabbar/fb.png',
					selectIcon:'/static/tabbar/fb.png', 
					url: '/pages/release/index', 
					type: 'type'
				}, {
					name: '动态',
					icon: '/static/tabbar/tb3.png', 
					selectIcon: '/static/tabbar/td3.png', 
					url: '/pages/order/index',
					type: 'type'
				}, {
					name:'我的' ,
					icon:'/static/tabbar/tb4.png' ,
					selectIcon:'/static/tabbar/td4.png', 
					url: '/pages/my/index',
					type: 'type'
				}]"></com-tabbar>
	</view>
</template>

<script>
	import apiBaseConfig from '@/config/index.js';
	import uniGo from '@/utils/unIGO.js';
	import comindex from '@/pages/demand/components/index.vue'
	export default {
		data() {
			return {
				imgBgUrl: apiBaseConfig.imgBgUrl,
				globalData: getApp().globalData,
				title: 'Hello',
				arr:[],
				list: [{
					name: '已发布'
				}, {
					name: '已驳回'
				}, {
					name: '待支付'
				}, {
					name: '已接单'
				}],
				subscript: '0',
			}
		},
		components: {
			comindex
		},
		onLoad(option) {
			// console.log(option, 'pppppp')
			if(option.id){
				this.subscript = option.id
			}
		},
		methods: {
			jump(ind) {
				this.subscript = ind
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&-tabs {
			display: flex;
			justify-content: space-around;
			width: 100%;
			position: fixed;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			top: -1rpx;
			z-index: 999;
			background-color: #f3f4f6;

			&-text {
				>view:nth-child(1) {
					font-size: 24rpx;
				}

				&-area {
					width: 75rpx;
					height: 6rpx;
					background: #2C66FF;
				}
			}
		}

		&-mindex {
			margin-top: 60rpx;
			width: 100%;
			margin-bottom: 150rpx;
		}
	}
	
	.diagram {
		text-align: center;
		margin-top: 335rpx;
	
		>image {
			width: 396rpx;
			height: 243rpx;
		}
	
		>view {
			margin-top: 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #444444;
		}
	}
</style>
