<template>
	<view>
		<view class="top">
		    <view class="search">
		        <input class="search-input" type="text" focus @input="onInput" :placeholder="nameVal" />
		        <view class="search-btn" @click="searchClick">搜索</view>
		    </view>
		    <view class="tabs">
		    	<view class="tabs-item" @click="onTabs">
		    		{{searchType == 0 ? '价格' : '信用值'}}
		    		<image
		    			class="icon"
		    			mode="widthFix" :src="require(marketType == 'asc' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')"
		    		/>
		    	</view>
                <view class="tabs-item" v-if="searchType == 0" @click="pageUrl">全部分类 <image class="tabs-item-arrow" src="@/static/icons/search_row.png" mode=""></image></view>
                <view class="tabs-item" v-if="searchType == 1" @click="companyOpne">{{companyName}} <image class="tabs-item-arrow" src="@/static/icons/search_row.png" mode=""></image></view>
		    </view>
		</view>
        <view class="lists">
            <!-- 优选商品 -->
            <goods-list :list="searchArr" priceType="CNY" v-if="searchType == 0" @on-goods="onGoods" />
            
            <!-- 商家 -->
            <industry-list :list="searchArr" v-if="searchType == 1" @on-industry="onOpenWechat"/>
        </view>

        <!-- 分页 -->
        <uni-load-more :status="pageStatus" :iconSize="16"  v-if="searchArr.length > 0"></uni-load-more>
        
        <!-- 企业分类弹出 -->
        <view class="companyBack" :class="companyShow ? 'active' : ''"></view>
        <view class="companyPopup" :class="companyShow ? 'active' : ''">
        	<view class="nowrap companyPopup-label" :class="{'show': item.industry_id == companyId}" v-for="(item, index) in categoryArr" :key="index" @click="companyList(item.industry_id, index)">
                {{item.title}}
        	</view>
        </view>
	</view>
</template>

<script>
    import { searchUrl, companyCategory, randgoodsUrl } from '@/apis/interfaces/goods'
	export default {
		data() {
			return {
				nameVal      : '',
                searchArr    : [],
                searchType   : '0',     // 分类 0位商品  1为企业
                marketType   : 'asc',   // 排序
                categoryArr  : [],      // 分类数组--企业
                companyId    : '',      // 分类数组--企业id
                companyName  : '选择行业',
                companyShow  : false,
                
                // 分页
                pageStatus	 : '',
                page		 : 1
			}
		},
        created() {
            this.searchType = this.$Route.query.type
            // 商品分类默认关键字 type=0为商品列表;  type=1为企业列表
            let wechaUrl = ''  // 定义接口来源名称
            if (this.searchType == '0') wechaUrl = 'mall/randgoods'  //商品关键字
            if (this.searchType == '1') wechaUrl = 'companies/rand' //商品关键字
            randgoodsUrl(wechaUrl, {
                type: 1
            }).then(res => {
                this.nameVal = res.name
            })
            
            // 企业分类数据
            if(this.searchType == '1'){
                companyCategory().then(res => {
                    this.categoryArr = res
                })
            }
        },
		methods: {
			// 商品详情
			onGoods(e){
				this.$Router.push({name: 'goodsDetails', params: {id: e.goods_id}})
			},
			// 打开微信小程序
			onOpenWechat(e){
				plus.share.getServices(res => {
					let sweixin = null;
					for(let val of res){
						if(val.id === 'weixin'){
							sweixin = val
						}
					}
					/**  以此为例子 显示跳转引导页
					*    'index_4'
					*     index   跳小程序企业首页
					*     4       企业id
					**/
					if(sweixin != null){
						sweixin.launchMiniProgram({
							id	: e.original_id,
							path: 'pages/login/guide?scene=index_' + e.company_id,
						})
					}else{
						uni.showToast({
							title: '当前环境不支持打开微信小程序',
							icon : 'none'
						})
					}
				})
			},
            // 列表数据
            getList() {
                // type=0为商品列表;  type=1为企业列表
                let wechaUrl = ''  // 定义接口来源名称
                if (this.searchType == '0') wechaUrl = 'mall/goods'// 商品列表
                if (this.searchType == '1') wechaUrl = 'companies/lists' //企业列表
                
                searchUrl(wechaUrl, {
                    page        : this.goodsPage,
                    order_by    : this.marketType,
                    industry_id : this.companyId,
                	name        : this.nameVal
                }).then(res => {
                    if(res.page.current === 1){
                    	this.searchArr = []
                    }
                	this.searchArr  = this.searchArr.concat(res.data)
                	this.goodsPage  = res.page.current
                	this.pageStatus	= res.page.has_more ? 'more': 'noMore'
                })
            },
            
            // 输入关键词
            onInput(val) {
                this.nameVal = val.detail.value
            },
            
            // 搜索
            searchClick() {
                // 获取列表
                this.getList();
            },
            
            // 筛选产品
            onTabs(e){
            	this.marketType = this.marketType == 'asc' ? 'desc': 'asc'
            	this.getList()
            },
            
            // 商品分类跳转
            pageUrl() {
                this.$Router.push({name: 'goodsClassify'})
            },
            
            // 查看企业行业
            companyOpne(){
            	this.companyShow = !this.companyShow
            },
            
            // 筛选企业列表
            companyList(id, index) {
                this.companyId = id
                this.companyName = this.categoryArr[index].title
                this.companyShow = false
                // 获取全局列表
                this.getList();
            } 
		},
        
        // 下拉加载
        onReachBottom() {
        	if(this.pageStatus == 'more'){
        		this.pageStatus = 'loading'
        		this.goodsPage += 1
        		this.getList()
        	}
        }
	}
</script>

<style lang="scss" scoped>
    .top{
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 9;
    	width: 100%;
    	height: 180rpx;
        .search {
            background: white;
            height: 100rpx;
            width: 100%;
            padding: 20rpx $padding 0;
            box-sizing: border-box;
            display: flex;
            .search-input {
                padding: 0 $padding;
                box-sizing: border-box;
                height: 60rpx;
                background-color: #f7f7f7;
                font-size: $title-size-m;
                border-radius: 80rpx;
                flex: 1;
                margin-right: $margin;
            }
            .search-btn {
                line-height: 60rpx;
                color: #e93340;
            }
        }
    	.tabs{
            background: white;
            display: flex;
            justify-content: space-around;
            height: 80rpx;
            margin-bottom: 20rpx;
            box-sizing: border-box;
            line-height: 80rpx;
            text-align: center;
            .tabs-item{
            	font-size: $title-size-m;
            	color: $text-gray;
            	.icon{
            		width: 32rpx;
            		height: 32rpx;
            		vertical-align: middle;
            		margin-left: $margin / 3;
            		margin-bottom: 4rpx;
            	}
            	&.show{
            		color: $text-price;
            	}
                .tabs-item-arrow {
                    width: 24rpx;
                    height: 24rpx;
                    margin-left: 10rpx;
                }
            }
        }
    }
    
    // 列表
    .lists{
    	padding: 180rpx 0 $padding;
    }
    
    // 企业弹出
    .companyBack,
    .companyPopup {
        position: fixed;
        top: 200rpx;
        left: 0;
        width: 100%;
        z-index: 99;
    }
    
    .companyBack {
        height: calc(100% - 200rpx);
        background-color: rgba(0,0,0,.2);
        display: none;
        &.active {
            display: block;
        }
    }
    
    .companyPopup {
        height: 45%;
        overflow: hidden;
        overflow-y: scroll;
        border-top: 1rpx solid #f1f1f1;
        background-color: #FFFFFF;
        padding: $padding - 10 $padding;
        display: none;
        box-sizing: border-box;
        .companyPopup-label {
            width: calc(25% - 20rpx);
            font-size: $title-size-sm - 2;
            display: inline-block;
            height: 60rpx;
            line-height: 58rpx;
            border: 1rpx solid #F8F8F8;
            background-color: #FFFFFF;
            margin: 10rpx;
            text-align: center;
            &.show {
                color: #e93340;
                border-color: #efd3d3;
                background-color: #fef9f9;
            }
        }
        &.active {
            display: block;
        }
    }
</style>
