<template>
	<view class="search-tabs">
		<view class="search-box">
			<view class="search-input">
				<u-input placeholder="搜索" placeholderStyle="font-size:13px;" v-model="keyword" prefixIcon="search"
					border="none" prefixIconStyle="font-size: 22px;color: #909399">
					<template slot="suffix">
						<view class="sou-suo" @click="search">搜索</view>
					</template>
				</u-input>
			</view>
			<view class="scan-box" v-if="itScan">
				<u-icon name="scan" color="#106FFF" size="24" class="uni-icon" @click="scan"></u-icon>
			</view>
		</view>
		<view class="header-tabs" v-if="isShow" :class="{isflex: itflex}">
			<u-tabs :list="navTabs" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="clickTab">
			</u-tabs>
		</view>
	</view>
</template>

<script>
	import qrcode from '@/utils/reqrcode.js'
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			show: {
				type: Boolean,
				default: true
			},
			isScan: {
				type: Boolean,
				default: false
			},
			isflex: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				activeStyle: {
					color: '#106FFF',
					fontSize: '14px',
					fontWeight: 500
				},
				inactiveStyle: {
					color: '#606266',
					fontSize: '14px',
					fontWeight: 400
				},
				navTabs: this.list,
				isShow: this.show,
				itScan: this.isScan,
				itflex: this.isflex,
				keyword: ''
			};
		},
		created() {
			// 打印qrcode 查看是否引入成功
			console.log(qrcode)
		},
		mounted() {},
		watch: {
			list(val, oval) {
				this.navTabs = val
			},
			show(val, old) {
				this.isShow = val
			},
			itScan(val, old) {
				this.itScan = val
			},
			isflex(val, old) {
				this.itflex = val
			}
		},
		computed: {

		},
		methods: {
			scan() {
				let that = this
				// 调用uni提供的调用相机api
				uni.chooseImage({
					sizeType: ['original'],
					count: 1,
					success: function(res) {
						const tempFilePaths = res.tempFilePaths[0] // 获取到二维码图片的链接
						qrcode.decode(tempFilePaths); // 解析二维码图片
						qrcode.callback = function(res1) {
							// 解析失败返回 error decoding QR Code
							if (res1 == "error decoding QR Code") {
								uni.showToast({
									title: "识别二维码失败，请重新上传！",
									duration: 2000,
									icon: 'none'
								})
							} else {
								// 解析成功返回二维码链接
								console.log(res1)
							}
							this.$emit('onScan')
						}
					}
				});
				// uni.navigateTo({
				// 	url: '/pages/bind-company/index'
				// })
			},
			clickTab(ms) {
				// console.log(ms, "ms");
				this.$emit('changeTabs', ms)
			},
			search() {
				let word = this.keyword
				this.$emit('onSearch', word)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.search-tabs {
		width: 100%;
		background-color: #fff;
		margin-bottom: 10px;

		.search-box {
			width: 100%;
			padding: 8px 16px;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.search-input {
				width: 100%;
				border-radius: 19px;
				opacity: 1;
				background: rgba(236, 242, 254, 1);


				.sou-suo {
					width: 48px;
					height: 24px;
					border-radius: 48px;
					opacity: 1;
					border: 0 solid rgba(0, 0.4588235318660736, 0.9764705896377563, 1);
					background: linear-gradient(180deg, rgba(83, 151, 255, 1) 0%, rgba(16, 111, 255, 1) 100%);
					opacity: 1;
					color: rgba(245, 246, 250, 1);
					font-size: 12px;
					font-weight: 400;
					font-family: "PingFang SC";
					text-align: center;
					line-height: 24px;

				}


			}

			.scan-box {
				width: 40px;
				padding-left: 10px;
				box-sizing: border-box;

			}
		}

		.search-box {
			width: 100%;
			height: 48px;

		}
	}
</style>