<template>
	<view class="page-box">
		<view class="inquiry-box">
			<image class="inquiry-logo" src="/pages/my/static/electronicInvoice/logoLvYou.png"></image>
			<view class="inquiry-searchIn" :class="borderNum==1?'inquiry-searchInAct':''">
				<u-icon name="search"></u-icon>
				<input @focus="searchInMessageFun()" @blur="searchOutMessageFun()" class="uni-input searchIn-Input" placeholder="填写待开票订单号/手机号" v-model="search"  />
				<image @click="searchClearFun()" v-if="search!=''" class="searchIn-imgClose" src="/pages/my/static/electronicInvoice/iconClose.png"></image>
				<view class="searchIn-btn" v-if="search!=''" @click="toBillingList()">搜索</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      search:'',
      borderNum:0,
      merchantId:'',
      companyId:'',
    }
  },
  onLoad(option) {
    this.merchantId = option.merchantId
    this.companyId = option.companyId
  },
  methods: {
    toBillingList(){//跳转列表
      if(this.search.length<11){
        uni.showToast({
				  title: '请输入正确手机号/订单号',
				  icon: 'none'
        })
        return false
      }
      uni.navigateTo({
			  url: '/pages/my/electronicInvoice/billingList/billingList?merchantId='+this.merchantId+'&companyId='+this.companyId+'&search='+this.search
      })
    },
    searchInMessageFun(){//获得焦点
      this.borderNum = 1
    },
    searchOutMessageFun(){//失去焦点
      this.borderNum = 0
    },
    searchClearFun(){//清除输入内容
      this.search = ''
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.page-box{
	background-color: #ffffff;
	height: 100vh;
}
.inquiry-box{
	width: 670rpx;
	height: 240rpx;
	margin: auto;
	position: fixed;
	top: 496rpx;
	right: 0;
	left: 0;
}
.inquiry-logo{
	display: block;
	width: 292rpx;
	height: 72rpx;
	margin: 0 auto 60rpx auto;
}
.inquiry-searchIn{
	display: flex;
	width: 670rpx;
	height: 108rpx;
	border: 4rpx solid #333333;
	line-height: 100rpx;
	border-radius: 54rpx;
	background: #FFFFFF;
	padding: 0 16rpx 0 34rpx;
	position: relative;
	::v-deep .u-icon__icon{
		font-size: 50rpx !important;
		color: #999999 !important;
		font-weight: bold !important;
	}
	.searchIn-Input{
		flex: 1;
		height: 100rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		line-height: 100rpx;
		margin-left: 20rpx;
	}
	.searchIn-imgClose{
		display: block;
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 34rpx;
		right: 174rpx;
		z-index: 10;
	}
	.searchIn-btn{
		width: 132rpx;
		height: 68rpx;
		background: #FE6600;
		border-radius: 34rpx;
		margin-left: 26rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		margin-top: 16rpx;
	}
}
.inquiry-searchInAct{
	border: 4rpx solid #FE6600;
}
</style>
