<template>
	<view class="page">
		<view class="main">
			<view class="top"><image src="../../static/img/supply1.png" @click="toPostProduct()" mode="widthFix"></image></view>
			
			<view class="titleall-box">
				<view class="search-head">
					<view class="search">
						<image src="../../static/fdj1.png"></image>
						<text></text>
						<input type="text" v-model="keyWord" placeholder="搜索关键词" @input="selectPro()" />
					</view>
					<!-- 显示公司选项 -->
					<view class="btn" @click="selectPro()">
						<text>搜索</text>
					</view>
				</view>
				<mo-hu-search :show="selectShow" :list="comList" @select="select" label-name="name"
					value-name="id"></mo-hu-search>
				<view class="title-screen">
					<scroll-view scroll-x="true" class="scrollview-box">
						<!-- 下方的红线 -->
					<!-- <view ref="line" class="line" ></view> -->
					<view :class="['title-screen-box',{'red_line':nowShow === 1}]" @click="equipPro(1,'装备制造')">
						<view>装备制造</view>
					</view>
					<view :class="['title-screen-box',{'red_line':nowShow === 2}]" @click="medPro(2,' 医药')">
						<view>医药</view>
					</view>
					<view :class="['title-screen-box',{'red_line':nowShow === 3}]" @click="foodPro(3,'食品工业')">
						<view>食品工业</view>
					</view>
					<view :class="['title-screen-box',{'red_line':nowShow === 4}]" @click="aviationPro(4,'通用航空')">
						<view>通用航空</view>
					</view>
					<view :class="['title-screen-box',{'red_line':nowShow === 5}]" @click="materialPro(5,'先进材料')">
						<view>先进材料</view>
					</view>
					<view :class="['title-screen-box',{'red_line':nowShow === 6}]" @click="techPro(6,'科技服务')">
						<view>科技服务</view>
					</view>
					<view :class="['title-screen-box',{'red_line':nowShow === 7}]" @click="anotherPro(7,'其他')">
						<view>其他</view>
					</view>
					</scroll-view>
					<view class="title-screen-box" style="background-color: #fff;margin-right: 0;text-align: center;">
						<view class="title-screen-box-btn"><image src="../../static/supply.png"></image></view>
					</view>
				</view>
			</view>
			
			<view class="recommend-info">
				<view class="" v-if="showList.length === 0">
					<view class="" style="color: orangered;">
						这类产品还没有哦
					</view>
				</view>
				<view class="goods-list" v-else>
					<view class="list" v-for="(it,index) in showList" :key="index" ref="ling" @click="GoodsDetails(it)">
						<view class="pictrue" v-if="it.isImg">
							<image :src="baseURL + it.url" mode="heightFix"></image>
						</view>
						<view class="pictrue" v-else>
							<image src="../../static/img/add.jpg" mode="heightFix"></image>
							
						</view>
						<view class="title-tag">
							<view class="tag">
								{{it.title}}
							</view>
							<view class="tag-small">
								{{it.remark}}
							</view>
						</view>
						<view class="price-info">
							<view class="user-price">
								<view class="goods-city"><image src="../../static/image/default_logo.jpg"></image><span>{{it.companyName}}</span></view>
								<view class="goods-city-img"><image src="../../static/right2.png"></image></view>
							</view>
							<view class="vip-price">
							</view>
						</view>
					</view>
					
					
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import moHuSearch from '../../components/qj-fuzzy-search/index.vue'
	import baseURL from '@/common/config.js'
	export default {
		components: {
			moHuSearch
		},
		data() {
			return {
				// 当前显示的种类
				nowShow:1,
				showList:[],
				allList:[],
				keyWord:'',
				selectShow:false,
				comList:[],
				// isImg:false,
				baseURL:baseURL
				// // 装备制造
				// equipList:[],
				// // 医药
				// medList:[],
				// // 食品工业
				// foodList:[],
				// // 通用航空
				// aviation:[],
				// // 先进材料
				// materialList:[],
				// // 科技服务
				// techList:[],
				// // 其他
				// anotherList:[]
				}
		},
		mounted() {
			// console.log(this.$refs.line.getBoundingClientRect())
			// console.log(this.$refs.ling)
			// #ifdef APP-PLUS
				this.getProList()
				// this.equipPro()
			// #endif
			this.getProList()
			// this.equipPro()
			// this.equipPro()
		},
		// onLoad() {
		// 	// #ifdef APP-PLUS
		// 		this.getProList()
		// 		// this.equipPro()
		// 	// #endif
		// 	this.getProList()
		// 	// this.equipPro()
		// 	// this.equipPro()
		// },
		methods: {
			// 获取商品列表
			getProList(){
				request({
					url:'/api/Extend/baseproduct/GetListByApp',
					method:'get',
					data:{
						pageSize:1000
					}
				}).then(res=>{
					if(res.code === 200){
						console.log(res)
						this.allList = res.data.list
						this.allList = res.data.list.map(it=>{
							let url = ''
							if(it.vimages.length > 0){
								url = it.vimages[0].url
							}
							return {
								...it,
								isImg:it.vimages.length > 0,
								url:url
								// url:it.vimages
								// firstImg:JSON.parse(JSON.stringify(it.vimages[0].url))
							}
						})
						this.equipPro()
					}
				})
			},
			selectPro(){
				this.selectShow = true
				request({
					url:'/api/Extend/baseproduct/GetListByApp',
					method:'get',
					data:{
						keyWord:this.keyWord,
						pageSize:1000
					}
				}).then(res=>{
					if(res.code === 200){
						console.log(res)
						// this.comList = res.data.list
						let arr = res.data.list
						this.comList = arr.map(it=>{
							return {
								...it,
								name:it.title
							}
						})
					}
				})
			},
			select(item) {
				// this.selectName = item.name;
				// this.selectId = item.id
				// this.categoryId = item.categoryId
				// console.log("栏目ID",this.categoryId)
				
				this.GoodsDetails(item)
				this.selectShow = false;
			},
			// 点击装备制造
			equipPro(index,name){
				let that = this
				this.nowShow = index
				
				this.showList = this.allList.filter(it=>{
					return it.stage === '359691172446209285'
				})
				console.log(this.showList)
			},
			// 点击医药
			medPro(index,name){
				let that = this
				that.nowShow = index
				this.showList = this.allList.filter(it=>{
					return it.stage === '359691279140914437'
				})
				console.log(this.showList)

			},
			// 点击食品工业
			foodPro(index,name){
				let that = this
				that.nowShow = index
				this.showList = this.allList.filter(it=>{
					return it.stage === '359691451568751877'
				})
				console.log(this.showList)
			
			},
			// 点击通用航空
			aviationPro(index,name){
				let that = this
				that.nowShow = index
				this.showList = this.allList.filter(it=>{
					return it.stage === '359691522012087557'
				})
				console.log(this.showList)
			
			},
			// 点击先进材料
			materialPro(index,name){
				let that = this
				that.nowShow = index
				
				this.showList = this.allList.filter(it=>{
					return it.stage === '359691580954641669'
				})
				console.log(this.showList)
			
			},
			// 点击科技服务
			techPro(index,name){
				let that = this
				that.nowShow = index
				this.showList = this.allList.filter(it=>{
					return it.stage === '402616512570983685'
				})
				console.log(this.showList)
			
			},
			// 点击其他
			anotherPro(index,name){
				let that = this
				that.nowShow = index
				this.showList = this.allList.filter(it=>{
					return it.stage === '361520745303508229'
				})
				console.log(this.showList)
			
			},
			GoodsDetails(item) {
				uni.navigateTo({
					url: `/pages/GoodsDetails/GoodsDetails?data=${JSON.stringify(item)}`
				})
			},
			// 跳转到产品发布
			toPostProduct(){
				uni.navigateTo({
					url:'/pages/postProduct/postProduct'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	@import 'supply.scss';
</style>
