<template>
	<view class="companyDetails">
		<loadlogo v-if="!loadlogo" />
		<far-bottom></far-bottom>
		<view class="content">
			<!-- 头部 -->
			<view class="content-title dis-flex">
				<view class="left">
					<view class=" dis-flex">
						<view class="name">
							{{detailsData.storename}}
						</view>
						<view class="tag" v-if="detailsData.is_authentication == 1">
							已认证
						</view>
					</view>
					<view class="tabs">
						<text class="tabs-item">{{detailsData.nature}}</text>
						<text class="tabs-item-l">·</text>
						<text class="tabs-item">{{detailsData.scale}}</text>
						<text class="tabs-item-l">·</text>
						<text class="tabs-item">{{detailsData.industry}}</text>
					</view>
				</view>
				<view class="right">
					<view class="right-img">
						<image :src="detailsData.logo" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 切换 -->
			<view class="content-tabs dis-flex">
				<view  style="flex:0.5;">
					<v-tabs
					:lineScale="0.3" 
					:lineRadius="'4px 4px 0px 0px'" 
					:lineHeight="'6rpx'"
					:height="'100rpx'"
					:fontSize="'30rpx'" 
					:paddingItem="'40rpx 22rpx 40rpx'" 
					:activeColor="'#3388FF'" 
					:lineColor="'#3388FF'"
					v-model="sort" 
					:scroll="false"
					:bold="false"
					:tabs="['简介','职位','动态']"></v-tabs>
				</view>
				<view class="b-f" style="flex:0.5;">
					
				</view>
			</view>
			<!-- 切换内容 -->
			<view class="content-content" v-if="sort == 0">
				<view :class="islook? 'content-brief-l b-f':'content-brief b-f'">
					<jyf-parser domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" gesture-zoom lazy-load ref="article" selectable
			show-with-animation use-anchor  :html="detailsData.introduction"></jyf-parser>
					<!-- {{detailsData.introduction || '暂无简介'}} -->
				</view>
				<view class="lookadd b-f" v-if="detailsData.introduction" @click="changeIslook">
					{{islook?'收起':'查看更多'}}
				</view>
				<view class="content-navigation">
					<view class="n-title">
						公司地址
					</view>
					<view class="dis-flex n-address">
						<view class="n-content" style="flex: 0.85;">
						{{detailsData.address}}
						</view>
						<view  style="flex: 0.15;">
							<view class="address-btn" @click="openNavigation">
								<text class="iconfont icon-daohang1" style="padding-right: 10upx;"></text>
								<text>导航</text>
							</view>
						</view>
					</view>
				</view>
				<view class="dis-flex container" style="padding:30upx;">
					<view style="flex:0 0 30%;height:210upx;padding-bottom: 30upx;" v-for="(item,index) in detailsData.album">
						<image style="width: 100%;height: 100%;border-radius: 15upx;" :src="item" mode="aspectFill" @click="lookimg(detailsData.album,index)"></image>
					</view>
					<nonemores v-if="detailsData.album && detailsData.album.length == 0"></nonemores>
				</view>
			</view>
			<view class="content-content" style="padding: 30upx;" v-if="sort == 1">
				<view  v-if="companyList.length > 0">
					<work-List :inviteList="companyList"></work-List>
					<load-more :isMore="isMore1" :bgc="'#ffffff'"></load-more>
				</view>
				<nonemores v-if="companyList.length == 0"></nonemores>
				
			</view>
			<view class="dis-flex flex-warp flex-x-between" style="padding:10px;" v-if="sort == 2">
				<view v-for="(item,index) in trendsListData" :key="index" style="width: 48%;margin-bottom: 10px;box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.03);">
					<post-list-two :itemInfo="item" :indexNumber="index" :indexShow='indexShow' @operationShow="operationShow" @delet="" :isMe="false"></post-list-two>
				</view>
				<load-more :isMore="isMore2" :bgc="'#ffffff'" style="width: 100%;"></load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import loadMore from '@/components/template/loadmore.vue';
	import vTabs from '@/components/v-tabs/v-tabs.vue';
	import workList from '@/components/template/workList.vue';
	// #ifdef H5
	import wxApi from "@/common/js/wxApi.js"
	// #endif
	import Loadlogo from '@/components/template/loadlogo.vue';
	import jyfParser from '@/components/jyf-parser/jyf-parser.vue';
	import nonemores from '@/components/template/nonemores.vue'
	import Map from '@/common/js/ms-openMap/openMap.js'
	import postListTwo from '@/components/template/postListTwo.vue'
	export default{
		data(){
			return{
				sort:0,
				islook:false,
				pageId:'',
				detailsData:{},
				companyList:[],
				loadlogo:false,
				isMore1:false,
				isMore2:false,
				page:1,
				pageIndex:10,
				total:1,
				indexShow: -1,
				trendsListData: []
			}
		},
		components:{
			vTabs,
			Loadlogo,
			jyfParser,
			loadMore,
			workList,
			nonemores,
			postListTwo
		},
		onReachBottom() {
			if(this.sort==1 && this.page == this.total) return
			this.page++;
			this.isMore1 = false;
			this.isMore2 = false;
			this.getCompanyList(true);
			this.getTrendsListData(true);
		},
		onLoad(e) {
			this.pageId = e.id;
			const pages = getCurrentPages();
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('acceptDataFromOpenedPageA', {data: 'to detail'});
		},
		onShow(){
			this.page = 1;
			this.getCompanyDetails();
			this.getCompanyList();
			this.getTrendsListData();
		},
		methods:{
			lookimg(imgs,index){
				wx.previewImage({
					current: index,
					urls: imgs
				})
			},
			openNavigation(){
				let detailsData = this.detailsData;
				detailsData.location = {
					lat:detailsData.lat,
					lng:detailsData.lng
				}
				// #ifdef H5
				console.log(detailsData);
				wxApi.WxopenLocation(
					detailsData['lat'],
					detailsData['lng'],
					detailsData['storename'],
					detailsData['address']
				)
				// #endif
				// #ifdef MP-WEIXIN
				App.openLocation(detailsData)
				// #endif
				//#ifdef APP-PLUS
				    Map.openMap(Number(detailsData['lat']),Number(detailsData['lng']),detailsData['storename'],'gcj02')
				 //#endif
			},
			getCompanyList(flag){
				let data = {
					page:this.page,
					page_index:this.pageIndex,
					release_sid:this.pageId,
					is_total:1
				}
				App._post_form(
					`&p=recruit&do=homeList`,
					data,
					res => {
						console.log(res);
						if(flag){
							this.companyList = this.companyList.concat(res.data.list);
						}else{
							this.companyList = res.data.list;
							this.total = res.data.total;
						}
					},
					false,
					() => {
						this.isMore1 = true;
					}
				);
			},
			getCompanyDetails(){
				
					App._post_form(
						`&p=recruit&do=enterpriseDesc&id=${this.pageId}`,
						{},
						res => {
							console.log(res,111111)
							this.detailsData = res.data;
						},
						false,
						() => {
							this.loadlogo = true;
						}
					);
				
			},
			changeIslook(){
				this.islook = !this.islook;
				// 小程序把方法的内容写在行间,真机会报错
			},
			operationShow(e) {
				let _this = this;
				_this.indexShow = e;
			},
			getTrendsListData(flag){
				let data = {
					page:this.page,
					// page_index:this.pageIndex,
					sid:this.pageId,
					// is_total:1
				}
				App._post_form(
					`&p=pocket&do=getStorePocketList`,
					data,
					res => {
						console.log(res);
						if(flag){
							this.trendsListData = this.trendsListData.concat(res.data.list);
						}else{
							this.trendsListData = res.data.list;
							this.total = res.data.total;
						}
					},
					false,
					() => {
						this.isMore2 = true;
					}
				);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-content{
		padding-bottom: 100upx;
	}
	.content{
		.content-title{
			background-color: #FFFFFF;
			padding: 50upx 30upx;
			border-bottom: 20upx solid #F8F8F8;
			.left{
				flex: 0.85;
				.name{
					height: 60upx;
					font-size: 48upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					width: 550upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.tag{
					font-size: 22upx;
					font-family: PingFang SC;
					font-weight: 500;
					// height: 20upx;
					margin: 10upx 20upx;
					color: #FFFFFF;
					padding: 4upx 7upx;
					background-color: #3388FF;
					border-radius: 4upx;
				}
				.tabs{
					padding-top: 10upx;
					.tabs-item{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
					.tabs-item-l{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin: 0 10upx;
					}
				}
			}
			.right{
				flex: 0.15;
				.right-img{
					image{
						width: 110upx;
						height: 110upx;
						border-radius: 10px;
					}
				}
			}
		}
		.content-tabs{
			border-bottom: 1upx solid #eeeeee;
		}
		.content-content{
			// background-color: #FFFFFF;
			.content-brief{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 60upx;
				padding: 30upx 30upx 0;
				overflow: hidden;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:8;
			}
			.content-brief-l{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 60upx;
				padding: 30upx 30upx 0;
			}
			.lookadd{
				font-size: 28upx;
				padding: 0 30upx 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3388FF;
				line-height: 48upx;
			}
			.content-navigation{
				border-top: 20upx solid #F8F8F8;
				padding: 50upx 30upx 20upx;
				background-color: #FFFFFF;
				.n-title{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 26upx;
				}
				.n-address{
					padding-top: 30upx;
					.n-content{
						width: 500upx;
						height: 75upx;
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 80upx;
						padding-right: 30upx;
					}
					.address-btn{
						margin-top: 8upx;
						width: 141upx;
						// height: 71upx;
						border: 1upx solid #3388FF;
						border-radius: 35upx;
						padding: 5upx 22upx;
						box-sizing: border-box;
						text{
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #3388FF;
							text-align: center;
						}
					}
					
				}
			}
			.card-name{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.card-tag{
				// width: 30upx;
				height: 30upx;
				background: #F1C426;
				border-radius: 4upx;
				font-size: 22upx;
				line-height: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				padding: 4upx 6upx;
				margin: 5upx 0 0 20upx;
			}
			.card-pay{
				flex: 1;
				font-size: 32upx;
				font-family: DINPro;
				font-weight: 600;
				color: #FF4444;
				text-align: right;
			}
			.tab-item{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				background: #F4F4F4;
				border-radius: 4px;
				padding: 8upx 20upx;
				display: inline-block;
				margin-right: 10upx;
			}
			.advance-the-date{
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				text-align: right;
			}
			.bottom-border{
				border-bottom: 1upx solid #EEEEEE;
			}
			// .container{
			// 	display:flex;
			// 	      display: -webkit-flex; /* Safari */
			// 	      flex-wrap: wrap;
			// 	      justify-content: space-between;
			// }
			// .container:after {
			//                 content: ' ';
			//                 flex: 0 0 30%;
			//             }
			
		}
		.container{
		    display: flex;
		    width: auto;
		    justify-content: space-between;
		    flex-wrap: wrap;
		    overflow: scroll;
		  }
		  .container:after {
		      content: "";
		      flex: 0 0 30%;
		   }
	}
</style>
