<template>
	<view class="navTab">
		<u-search v-model='keyware' placeholder='输入搜索内容' :actionStyle="customActionStyle"  showAction="true" actionText="搜索" :animation="false" @custom='seacrhko'></u-search>
		<view class="histyo">
			<p>历史搜索</p>
			<u-icon name="trash" size='18px'> </u-icon>
		</view>
		<view style="margin-top:15px;display:flex;flex-wrap: wrap;">
			<u-tag borderColor='transparent' bgColor='#EBEEF2'  text="软件测试" type='info' style="margin-right: 10px;" color="#333333" shape="circle"></u-tag>
			<u-tag borderColor='transparent' bgColor='#EBEEF2'  text="单元测试" type='info' style="margin-right: 10px;" color="#333333" shape="circle"></u-tag>
			<u-tag borderColor='transparent' bgColor='#EBEEF2'  text="接口测试" type='info' style="margin-right: 10px;" color="#333333" shape="circle"></u-tag>
			<u-tag borderColor='transparent' bgColor='#EBEEF2'  text="安全性测试" type='info' style="margin-right: 10px;" color="#333333" shape="circle"></u-tag>
		</view>
		<view class="histyo">
			<p>热门搜索</p>
		</view>
		<view style="margin-top:15px;display:flex;flex-wrap: wrap;">
			<u-tag borderColor='transparent' bgColor='#EBEEF2'  text="软件测试" type='info' style="margin-right: 10px;" color="#333333" shape="circle"></u-tag>
			<u-tag borderColor='transparent' bgColor='#EBEEF2'  text="单元测试" type='info' style="margin-right: 10px;" color="#333333" shape="circle"></u-tag>
			<u-tag borderColor='transparent' bgColor='#EBEEF2'  text="接口测试" type='info' style="margin-right: 10px;" color="#333333" shape="circle"></u-tag>
		</view>
		<view style='display:flex;align-items: center;margin-bottom: 10px;margin-top:15px;'>
			<view class='vertical'></view>
			<view style="color: #808080;font-size: 15px;">热门工具排行</view>
		</view>
		<!-- <view style="display:flex;flex-wrap: wrap;justify-content: space-between;">
			<view class="currekei"  v-for="(item,key) of toollist" :key="key">
				<view  class="imgone"  @click="details('tool',item.toolId)" >
					<img v-if="item.name=='代码静态分析工具'" :src="item.imgs"  alt="">
					<img v-if="item.name=='源代码安全检测工具'" :src="item.imgs" style="width:158rpx"  alt="">
					<img v-if="item.name=='C/C++单元测试工具'" :src="item.imgs" style="width:150rpx"  alt="">
					<img v-if="item.name=='接口测试工具'" :src="item.imgs" style="width:140rpx" alt="">
					<img v-if="item.name=='JAVA单元测试工具'" :src="item.imgs" style="width:152rpx" alt="">
					<img v-if="item.name=='功能测试工具AutoFun'" :src="item.imgs" style="width:145rpx" alt="">
					<img v-if="item.name=='代码组成分析平台'" :src="item.imgs" style="width:145rpx"  alt="">
					<img v-if="item.name=='性能测试工具'" :src="item.imgs"  alt="">
					<img v-if="item.name=='自鉴-交互式应用安全测试系统IAST'" :src="item.imgs" style="width:145rpx" alt="">
					<img v-if="item.name=='Web应用安全测试工具'" :src="item.imgs" style="width:155rpx" alt="">
					<img v-if="item.name=='资产识别及漏洞管理工具'" :src="item.imgs" style="width:200rpx" alt="">
					<img v-if="item.name=='性能测试工具AutoLoad'" :src="item.imgs"  alt="">
					
				</view>
				<p class="leop">{{item.name | tiilnamechange}}</p>
				<view style='display:flex;margin:30rpx 0'>
					<view v-if='item.toolTypeName' class="tabone">{{item.typel}}测试</view>
					<view class="tabone" style="color: #FF8A00;border: 1px solid #FF8A00;margin-left: 10px;">{{item.deliverType}}</view>
				</view>
				<view style='display:flex;justify-content:space-between;margin:15rpx 0;width:100%'>						
					<p>¥ {{item.price}}</p>
					<img class="imgtwo" src="http://image.keyitest.cn/static/index/add.png" alt="" @click="addcart(item.toolId)">
				</view>
			</view>
		</view> -->
		<u-toast ref="uToast" />
		<u-modal title='温馨提示' v-model="tokenshow"   content="您还没有登录" confirm-text='现在就去' cancel-text='稍等一下' show-cancel-button='true'
				cancel-color='#1578ED' confirm-color='#1578ED'  @confirm="confirm" @cancel='tokenshow=false'></u-modal>
	</view>
</template>


<script>
	export default {
		name: 'navTab',
		data() {
			return {
				tokenshow:false,
				keyware:'',
				customActionStyle: {
				  color: '#808080', // 按钮颜色
				  fontSize: '16px'  // 按钮字体大小
				  // 其他样式属性
				},
				toollist:[],
			}
		},
		onLoad() {
			this.http.quickGet('/business/tool/listAnon?status=1').then(res=>{
				// console.log('---',res.data.rows)
				let tooldata=res.data.rows;
				tooldata.forEach(item=>{
					if(item.name=='代码静态分析工具'){
						item.imgs='http://image.keyitest.cn/static/index/11.png'
					}else if(item.name=='源代码安全检测工具'){
						item.imgs='http://image.keyitest.cn/static/index/5.png'
					}else if(item.name=='C/C++单元测试工具'){
						item.imgs='http://image.keyitest.cn/static/index/2.png'
					}else if(item.name=='接口测试工具'){
						item.imgs='http://image.keyitest.cn/static/index/12.png'
					}else if(item.name=='JAVA单元测试工具'){
						item.imgs='http://image.keyitest.cn/static/index/tool/1.png'
					}else if(item.name=='功能测试工具AutoFun'){
						item.imgs='http://image.keyitest.cn/static/index/3.png'
					}else if(item.name=='代码组成分析平台'){
						item.imgs='http://image.keyitest.cn/static/index/tool/4.png'
					}else if(item.name=='性能测试工具'){
						item.imgs='http://image.keyitest.cn/static/index/6.png'
					}else if(item.name=='自鉴-交互式应用安全测试系统IAST'){
						item.imgs='http://image.keyitest.cn/static/index/tool/3.png'
					}else if(item.name=='Web应用安全测试工具'){
						item.imgs='http://image.keyitest.cn/static/index/tool/2.png'
					}else if(item.name=='资产识别及漏洞管理工具'){
						item.imgs='http://image.keyitest.cn/static/index/zc.png'
					}else if(item.name=='性能测试工具AutoLoad'){
						item.imgs='http://image.keyitest.cn/static/index/xn.png'
					}
					item.typel=item.toolTypeName.slice(0,2)
				})
				this.toollist=res.data.rows.splice(0,4)
				console.log('---',this.toollist)
			})
		},
		filters:{
			tiilnamechange(value){
				if (!value) return ''
				if(value.length>9){
					 return value.slice(0, 7) + '...'
				}
				 return value
			}
		},
		methods: {
			confirm(){
				uni.navigateTo({
					url:'/pages/personal/login'
				})
			},
			seacrhko(e){
				// console.log('----',e)
			},
			details(type,id){
				// console.log('id---',id)
				if(type=='tool'){
					uni.showToast({ title: '该功能开发中', icon: 'none', duration: 1000 });
					// uni.navigateTo({
					// 	url: `./tooldetails?id=${id}`
					// })
				}else{
					uni.navigateTo({
						url: './crowdsourcingdetails'
					})
				}
			},
			//工具加入购物车
			addcart(id){
				let accessToken = uni.getStorageSync('accessToken');
				if(!accessToken){
				   this.tokenshow=true
				}else{
					// 
				   this.http.quickGet(`/my/addShoppingCart/${id}/1`,true).then(response => {
				        console.log('response',response)
				        if(response.data.code==200){
							console.log('111')
				           this.$refs.uToast.show({
							   title: '添加购物车成功',
							   type: 'success',
							   duration: 1000,
							   isTab:true,
							   url:'/pages/shoppingtrolley/shoppingtrolley'
				           })
				        }
				    })
				}
				
			},
		}
	}
</script>


<style  scoped>
	.navTab{
		padding:13px;
	}
	.histyo{
		margin-top:15px;
		display:flex;
		justify-content: space-between;	
		color: #808080;
		font-size: 30rpx;
	}
	.vertical{
		width: 6rpx;
		height: 26rpx;
		background: #1578ED;
		border-radius: 3rpx;
		margin-right:10px ;
	}
	.currekei{
		width:48%;	
		/* height: 360rpx; */
		background: #FFFFFF;
		border-radius: 10px;
		padding: 10px 10px;
		margin-bottom:20rpx
	}
	.leop{
		font-size:30rpx;
		/* height:40px ; */
		font-weight: bold;
		color: #1A1A1A;
		/* margin: 13rpx 0; */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tabone{
		width: 98rpx;
		height: 33rpx;
		border: 1px solid #2B80FC;
		border-radius: 4rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #2387EE;
		text-align: center;
		line-height: 33rpx;
	}
	.currekei :nth-child(4){
		color: #FD461A;
		font-weight: 800;
		font-size: 34rpx;
	}
	.imgone{
		width: 119rpx;
		margin:10px auto;
	}
	.imgone img{
		width: 119rpx;
		height: 123rpx;
	}
	.imgtwo{
		width: 32rpx;
		height:32rpx;
	}	
</style>


