<template>
	<view class="navTab">
		<view style="display: flex;justify-content: space-between;align-items: center;">
			
			<u-input class="seleclas" border-color='#666666' v-model="messageselect" type="select" border="true" @click="messageshow = true"  placeholder='请选择' />
			<u-select v-model="messageshow" :list="messageList"  @confirm="messageCallback"></u-select>
			<!-- value-name='id' label-name='title' -->
			<u-search class="search" v-model='keyware' placeholder='输入搜索内容' :actionStyle="customActionStyle"  
				showAction="true" actionText="搜索" :animation="false" @custom='seacrhko'></u-search>
			<p @click="addmessage" style="width:35px;height:38px;color: #1578ED;font-size: 30px;text-align: center;line-height:34px;">+</p>
		</view>
		<view class="sign_list" >
			<view style="display:flex;margin:0 12px 8px 0;justify-content: space-between;align-items: flex-end;">
				<view class="rightb">培训服务</view>
				<p style="font-size:24rpx;color:#808080;">2023-11-29 10:30:20</p>
			</view>
			<view class="fline"></view>
			<view  style="margin:12px 13px 0 13px;color:#4D4D4D;font-size:13px;line-height:22px;">
				<p>留言内容：公司需要进行单元测试的购买，请公司安排人员来 公司内部进行测试服务。</p>
			</view>
		</view>
		<view class="sign_list" >
			<view style="display:flex;margin:0 12px 8px 0;justify-content: space-between;align-items: flex-end;">
				<view class="rightb" style="background: linear-gradient(90deg, #1BF5B3, #08C78F);">众包服务</view>
				<p style="font-size:24rpx;color: #808080;">2023-11-29 10:30:20</p>
			</view>
			<view class="fline"></view>
			<view  style="margin:12px 13px 0 13px;color:#4D4D4D;font-size:13px;line-height:22px;">
				<p>留言内容：公司需要进行单元测试的购买，请公司安排人员来 公司内部进行测试服务。</p>
			</view>
		</view>
		<view class="sign_list" >
			<view style="display:flex;margin:0 12px 8px 0;justify-content: space-between;align-items: flex-end;">
				<view class="rightb" style="background: linear-gradient(90deg, #FFDC00, #ED9706);">工具服务</view>
				<p style="font-size:24rpx;color: #808080;">2023-11-29 10:30:20</p>
			</view>
			<view class="fline"></view>
			<view  style="margin:12px 13px 0 13px;color:#4D4D4D;font-size:13px;line-height:22px;">
				<p>留言内容：公司需要进行单元测试的购买，请公司安排人员来 公司内部进行测试服务。</p>
			</view>
		</view>
		<view class="sign_list" >
			<view style="display:flex;margin:0 12px 8px 0;justify-content: space-between;align-items: flex-end;">
				<view class="rightb" style="background: linear-gradient(90deg, #FCA141, #FD6940);">人才服务</view>
				<p style="font-size:24rpx;color: #808080;">2023-11-29 10:30:20</p>
			</view>
			<view class="fline"></view>
			<view  style="margin:12px 13px 0 13px;color:#4D4D4D;font-size:13px;line-height:22px;">
				<p>留言内容：公司需要进行单元测试的购买，请公司安排人员来 公司内部进行测试服务。</p>
			</view>
		</view>
		<u-popup  v-model="isPopupShow" @close="close" @open="open" mode="bottom" length="80%" height='600px' border-radius="15" :closeable='true' :mask-close-able="false">
		    <view style="background:#66666;padding: 20px 0;">
				<view style="margin-left: 20px;">
					<u-input class="seleclas" border-color='#666666' v-model="testtrain" type="select" border="true" @click="messageshow = true"  placeholder='请选择' />
					<u-select v-model="messageshow" :list="messageList"  @confirm="testtrainCallback"></u-select>
					<view class='peodi'>我的留言</view>
				</view>
				<u-line></u-line>
				<view class="sinput" style="margin-top: 10px;">
					<img src="http://image.bjkeyware.com/static/index/renliwb/41.png" alt="">
					<p style="margin-right: 5px;width: 56px;">企业名称</p>
					<u-input style="width:239px;" v-model="leaveobj.company" placeholder='默认公司'  border="true"/>
				</view>
				<view class="sinput">
					<img s src="http://image.bjkeyware.com/static/index/testpx/xingming.png" alt="">
					<p style="margin-right: 5px;width: 56px;">姓      名</p>
					<u-input style="width:239px;" v-model="leaveobj.name" placeholder='输入姓名'  border="true"/>
				</view>
				<view class="sinput">
					<img style="height:28px;" src="http://image.bjkeyware.com/static/index/testpx/shouji.png" alt="">
					<p style="margin-right: 5px;">联系方式</p>
					<u-input style="width:239px;" v-model="leaveobj.phone" placeholder='输入联系方式'  border="true"/>
				</view>
				<view class="sinputrt">
					<img src="http://image.bjkeyware.com/static/index/renliwb/45.png" alt="">
					<p style="margin-right: 5px;">留言内容</p>
					<u-input  style="width:239px;" v-model="leaveobj.content"  placeholder='填写留言内容' type="textarea"   auto-height="true"/>
				</view>
				<u-line></u-line>
				<view >
					<view class="bottbtn"  @click="resource('setes')">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyware:'',
				customActionStyle: {
				  color: '#808080', // 按钮颜色
				  fontSize: '16px'  // 按钮字体大小
				  // 其他样式属性
				},
				messageselect:'',
				messageshow:false,
				messageList:[{value:'1',label:'培训服务'},{value:'2',label:'众包服务'},{value:'3',label:'工具服务'},{value:'4',label:'人才服务'}],
				testtrain:'',
				leaveobj:{company:'',name:'',phone:'',content:''},
				isPopupShow:false
			}
		},
		methods: {
			seacrhko(){
				
			},
			signupdetails(type){				
				uni.navigateTo({
					url:`/pages/index/testtraining/signup?tabtype=${type}`
				})
			},
			testtrainCallback(e){
				this.testtrain=e[0].label
			},
			messageCallback(e){
				this.messageselect=e[0].label
			
				console.log(e);
			},
			addmessage(){
				// this.isPopupShow=true
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.isPopupShow = false
			},
		}
	}
</script>

<style>
	.navTab{
		padding:13px 20px;
	}
	.sign_list{
		width: 100%;
		background: #FFFFFF;
		border-radius: 10px;
		margin:20px 0;
		padding-bottom:12px;
	}
	.rightb{
		width: 183rpx;
		height: 54rpx;
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius: 9px 0px 46px 0px;
		color: #FFFFFF;
		font-size:.8rem;
		line-height:  54rpx;
		text-align: center;
		
	}
	.fline{
		width: 100%;
		height: 1rpx;
		border: 1px solid #999999;
		opacity: 0.15;
	}
	.seleclas .u-input{
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 26rpx 3rpx rgba(73,81,107,0.12);
		border-radius: 30px!important;
		border: 1px solid transparent!important;
		width:25vw
	}
	.u-search{
		width:55vw ;
	}
	.sinput{
		display: flex;
		align-items: center;
		height: 50px;
		padding: 10px 20px;
	}
	.sinput img{
		width:20px;
		height:20px;
		margin-right:5px;
	}
	.sinput .u-input{
		/* width:75vw; */
		height:35px;
		border: 1px solid #E6E6E6;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		padding-left: 10px!important;
	}
	.sinputrt{
		display: flex;
		/* align-items: center; */
		/* height: 50px; */
		padding: 10px 20px;
	}
	.sinputrt img{
		width:20px;
		height:20px;
		margin-right:5px;
	}
	.sinputrt .u-input{
		/* width:75vw; */
		height:100px;
		border: 1px solid #E6E6E6;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		padding-left: 10px!important;
		/* margin-top:70px */
	}
	.peodi{
		/* line-height: 15%; */
		margin:5px auto 20px auto;
		width: 260px;
		text-align: center;
		color: #1A1A1A;
		font-size:36rpx;
		font-weight: bold;
		margin-top: -32px;
	}
	/* .submitt{
		height:55px;
		font-size: 20px;
		background: #FFFFFF;
		margin-top:60px;
		position: fixed;
		bottom: 0;
		width: 100vw;
		display: flex;
		justify-content: space-between;
	} */
	.bottbtn{
		width:94vw;
		margin:15px 3vw;
		height:75rpx;	
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius:43rpx;
		text-align: center;
		line-height:75rpx;
		color: #FFFFFF;
		font-size: 33rpx;
		/* margin-left:13px; */
	}
</style>
