<template>
	<view class="pages">
		<view class="search-wrap">
			<view class="search">
				<view class="searchTxt">
					<uni-search-bar placeholder="搜索你想发布的品类" @confirm="searchtype" @input="searchtype" ></uni-search-bar>
				</view>
			</view>	
		</view>
		<!-- 搜索 结束 -->
		<view class="typelist-wrap wrap">
			<view v-for="(item,index) in typelist" :key="index" class="typelist-block">
				<view class="select-bar" @click="typeclick(index)" :class="{open:index==ins}">
					<view class="select-bar-img-wrap">
						<image class="select-bar-img" :src="item.icon" mode=""></image>
					</view>
					<view class="select-bar-text">{{item.name}}</view>
					<view class="select-bar-arrow"></view>
				</view>
				<view class="typelist-item-wrap">
					<view v-for="(product,productindex) in item.children" :key="productindex" @click="publishitem(item,product)" class="typelist-item">
						<view class="productindex">{{productindex + 1}}</view>
						<view class="product">{{product.name}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog type="info"  content="成为供应商才能发布,是否去认证?" :duration="2000" :before-close="true" @close="closepopup" @confirm="confirmpopup"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { bus } from '../../../utils/bus.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	// import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopup,
			// uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				params:{
					token:'',
				},
				typelist:[],
				ins:null,
				hascompany:false,//是否是供应商
				
			}
		},
		onShow() {
			let serf = this;
			uni.getStorage({
				key:'userInfo',
				success: function (res) {
					if(res.data.company){
						serf.hascompany = true;//是否绑定供应商
					}
				}
			});
			//检查登录,获取token
			// let loginRes = this.checkLogin('/pages/index/index', '2');
			// if(!loginRes){return false;}
			// serf.params.token=loginRes[0];			
		},
		onLoad() {
			
			//获取产品分类
			// ,{header: {Authorization:this.params.tokenhead+this.params.token}}
			this.$api.http.get(this.config.apiBaseurl+'/product/categoryTreeList').then(res => {
				console.log('产品分类',res);
				this.typelist = res.data.data;
			}).catch(err => {
				console.log(err)
			});		
		},
		methods: {
			// 搜索
			searchtype(e){
				console.log(e)
				this.$api.http.get(this.config.apiBaseurl+'/product/categorySearch',{params:{key:e.value}}).then(res => {
					console.log('搜索结果',res);
					this.typelist = res.data.data;
				}).catch(err => {
					console.log(err)
				});
			},
			//分类点击
			typeclick(num){
				if(this.ins==num){
					this.ins = null;
					return
				}
				this.ins=num;
			},
			//选择发布
			publishitem(bigtype,product){
				console.log('this.hascompany',this.hascompany);
				if(this.hascompany==false){
					this.$refs.popup.open();
					return false;
				}
				product.productBigCategoryName = bigtype.name;
				// console.log('product',product);
				bus.$emit('toDetailPage', {
					data: product
				});
				uni.navigateTo({
					url:`/pages/publish/publish`
				})
			},
			closepopup(done){
				done()
			},
			confirmpopup(done,value){
				// 输入框的值
				// console.log(value)
				// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
				uni.navigateTo({
					url:'/pages/usercenter/authentication/authentication'
				});
				done()
			},

		}
	}
</script>

<style scoped>
	/* @import url("./chosetype.css"); */
	.typelist-wrap{margin-top: 24rpx;}
	.typelist-item-wrap{height: 0;overflow: hidden;}
	.select-bar.open + .typelist-item-wrap{height: auto;}
	.typelist-item{display: flex;align-items: center;padding-left: 50rpx;height: 96rpx;border-bottom: 1px solid #eee;}
	.typelist-block .typelist-item:last-child{border-bottom: 0;}
	.typelist-item .productindex{width: 36rpx;height: 36rpx;line-height: 36rpx;margin-right: 25rpx;text-align: center;;background-color: #6BBC6D;color: #fff;}
	.select-bar-img-wrap{background-color: #6bbc6d;width: 0;}
	.search-wrap >>> .uni-searchbar__box{justify-content: left;border: 0;background-color: #F1F1F2!important;}
</style>
