<template>
	<view class="add_card" :class="{ over_hide: isHide }">
		<!-- 名片信息 -->
		<view class="add_card_top">
			<!-- 正反面 -->
			<view class="add_card_single">
				<view class="card_front flex_center" @click="uploadPositive()">
					<view class="show_img" v-if="front_image"><image :src="front_image" mode="aspectFill"></image></view>
					<view class="flex_center" v-else>
						<view class="card_upload"><image src="../../static/add.png" mode=""></image></view>
						<view class="card_tips">上传名片正面图片</view>
					</view>
				</view>
				<view class="card_front flex_center" @click="uploadSide()">
					<view class="show_img" v-if="reverse_image"><image :src="reverse_image" mode="aspectFill"></image></view>
					<view class="flex_center" v-else>
						<view class="card_upload"><image src="../../static/add.png" mode=""></image></view>
						<view class="card_tips">上传名片背面图片</view>
					</view>
				</view>
				<view class="upload_tips">建议名片尺寸为360*210像素 </view>
				<view class="msg_single layer_between">
					<view class="single_l">公司名称：</view>
					<input class="single_r" type="text" v-model="company_name" placeholder="请输入公司名称" />
				</view>
			</view>
			<!-- 公司简介 -->
			
			<view class="add_card_single">
				<view class="msg_single">
					<view class="single_l">公司简介：</view>
					<textarea v-model="brief" placeholder="请输入公司简介" maxlength="2000"/>
					<view class="layer_nostar flex_wrap_no">
						<view class="wx_code" v-for="(item, index) in brief_images" :key="index">
							<image :src="item" mode=""></image>
							<image @click="deleteCompany(index)" class="cancle_icon" src="../../static/del_icon@2x.png" mode=""></image>
						</view>
						<view class="wx_code" @click="uploadCompay()"><image src="../../static/add_wx.png" mode=""></image></view>
					</view>
				</view>
			</view>
			<!-- 经营范围 -->
			<view class="add_card_single">
				<view class="msg_single">
					<view class="single_l">经营范围：</view>
					<textarea v-model="scope" placeholder="请输入经营范围" maxlength="2000"/>
					<view class="layer_nostar flex_wrap_no">
						<view class="wx_code" v-for="(item, index) in scope_images" :key="index">
							<image :src="item" mode=""></image>
							<image @click="deleteScope(index)" class="cancle_icon" src="../../static/del_icon@2x.png" mode=""></image>
						</view>
						<view class="wx_code" @click="uploadBusiness()"><image src="../../static/add_wx.png" mode=""></image></view>
					</view>
				</view>
			</view>
			<!-- 各种联系方式 -->
			<view class="add_card_single">
				<view class="msg_single layer_between">
					<view class="single_l">联系人：</view>
					<input class="single_r" type="text" v-model="name" placeholder="请输入联系人" />
				</view>
			</view>
			<view class="add_card_single">
				<view class="msg_single layer_between">
					<view class="single_l">地址：</view>
					<input class="single_r" type="text" v-model="site" placeholder="请输入地址" />
				</view>
			</view>
			<view class="add_card_single">
				<view class="msg_single layer_between">
					<view class="single_l">电话：</view>
					<input class="single_r" type="text" v-model="phone" placeholder="请输入电话" />
				</view>
			</view>
			<view class="add_card_single">
				<view class="msg_single layer_between">
					<view class="single_l">传真：</view>
					<input class="single_r" type="text" v-model="fax" placeholder="请输入传真" />
				</view>
			</view>
			<view class="add_card_single">
				<view class="msg_single layer_between">
					<view class="single_l">手机号：</view>
					<input class="single_r" maxlength="11" type="text" v-model="mobile" placeholder="请输入手机号" />
				</view>
			</view>
			<view class="add_card_single">
				<view class="msg_single layer_between">
					<view class="single_l">QQ：</view>
					<input class="single_r" type="text" v-model="qq" placeholder="请输入QQ号" />
				</view>
			</view>
			<view class="add_card_single">
				<view class="msg_single layer_between">
					<view class="single_l">微信：</view>
					<input class="single_r" type="text" v-model="wechat" placeholder="请输入微信" />
				</view>
			</view>
			<view class="add_card_single">
				<view class="msg_single">
					<view class="single_l">微信二维码：</view>
					<view class="layer_nostar" @click="uploadCode()">
						<view class="wx_img" v-if="weichat_image"><image :src="weichat_image" mode=""></image></view>
						<view class="wx_code" v-else><image src="../../static/add_wx.png" mode=""></image></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 名片分类 -->
		
		<view class="add_card_classify">
			<view class="classify_title">
				名片分类：
				<text>（可选择{{ category_num }}个名片分类）</text>
			</view>
			<view class="classify_tips">想要增加更多分类，请提交名片升级成VIP后到会员中心增加</view>
			<!-- 轴承列表 -->
			<view class="bearing_classify layer_nostar">
				<!-- 左侧类目 -->
				<view class="bearing_l">
					<view class="bear_l_box flex_column_center">
						<view
							class="bear_l_single flex_warp"
							:class="{ bear_l_active: isLeft == item.id }"
							v-for="(item, index) in leftList"
							:key="index"
							@click="changeLeft(item, index)"
						>
							<view class="bear_l_child">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<!-- 右侧具体分类 -->
				<view class="bearing_r">
					<view class="bear_r_box">
						<view class="bear_r_single" :class="{ bear_r_active: item.isChoice }" v-for="(item, index) in rightList" :key="index" @click="changeRight(item, index)">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提交名片 -->
		<view class="submit_btn" @click="submitCard()">提交名片</view>
		<!-- 提交弹窗 -->
		<view class="tx_mask" v-if="isHide" @click="closeDialog()"></view>
		<view class="mask_content" v-if="isHide">
			<view class="mask_top">成为VIP会员，其他用户可以搜索到您的名片</view>
			<view class="mask_bottom" @click="getNow()">立即获取</view>
		</view>
	</view>
</template>

<script>
import App from '../../App.vue';
export default {
	data() {
		return {
			front_image: '', //正面图片
			reverse_image: '', //反面图片
			company_name: '', //公司名称
			brief: '', //公司简介
			brief_images: [], //公司简介图片
			scope: '', //经营范围
			scope_images: [], //经营范围图片
			name: '', //联系人
			phone: '', //电话
			site: '', //地址
			mobile: '', //手机号
			fax: '', //传真
			qq: '', //	QQ
			wechat: '', //微信
			weichat_image: '', //微信二维码
			category_ids: [], //分类ID
			category_num: '', //可选分类个数
			// 轴承列表
			// 左侧
			leftList: [],
			isLeft: 0,
			// 右侧
			rightList: [],
			isRight: 0,
			// 弹窗
			isHide: false,
			// 是否为vip 1:是  2:否
			isVip: '',
			// 防连点
			isClick:false,
			imgBrief: [], //公司简介上传数量
			imgScope: []
		};
	},
	methods: {
		// 上传正面图片
		uploadPositive() {
			let t = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					App.upload(tempFilePaths[0]).then(res => {
						this.front_image = res.url;
					});
				}
			});
		},
		// 上传反面图片
		uploadSide() {
			let t = this; 
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					App.upload(tempFilePaths[0]).then(res => {
						this.reverse_image = res.url;
					});
				}
			});
		},
		// 上传公司简介图片
		uploadCompay() {
			let t = this;
			uni.chooseImage({
				count: 3, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					t.imgBrief = [...t.imgBrief,...tempFilePaths]
					if(t.imgBrief.length>3){
						uni.showToast({
							title: '图片总数超过3张',
							icon: 'none'
						});
						return false;
					}
					tempFilePaths.forEach(el => {
						App.upload(el).then(res => {
							t.brief_images.push(res.url);
						});
					});
				}
			});
		},
		// 上传经营范围图片
		uploadBusiness() {
			let t = this;
			uni.chooseImage({
				count: 3, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					t.imgScope = [...t.imgScope, ...tempFilePaths];
					if (t.imgScope.length > 3) {
						uni.showToast({
							title: '图片总数超过3张',
							icon: 'none'
						});
						return false;
					}
					tempFilePaths.forEach(el => {
						App.upload(el).then(res => {
							t.scope_images.push(res.url);
						});
					});
				}
			});
		},
		// 删除公司简介图片
		deleteCompany(index){
			this.imgBrief.splice(index, 1);
			this.brief_images.splice(index,1)
		},
		// 删除经营范围图片
		deleteScope(index){
			this.imgBrief.splice(index, 1);
			this.scope_images.splice(index,1)
		},
		// 上传二维码
		uploadCode() {
			let t = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					App.upload(tempFilePaths[0]).then(res => {
						t.weichat_image = res.url;
					});
				}
			});
		},
		// 首页分类数据 左侧一级分类
		getType() {
			let t = this;
			t.leftList = [];
			t.rightList = [];
			let url = '/api/category/get_category_one';
			App.post(url).then(res => {
				t.leftList = res;
				t.rightList = res[0].children;
				t.isLeft = res[0].id;
				t.rightList.forEach(el => {
					el.isChoice = false;
				});
			});
		},
		// 左侧列表选中
		changeLeft(item, index) {
			this.isLeft = item.id;
			this.rightList = item.children;
		},
		// 右侧列表选中
		changeRight(item, index) {
			let arr = [];
			item.isChoice = !item.isChoice;
			this.leftList.forEach(lel=>{
				// 找出已选择的二级分类
				lel.children.forEach(rel=>{
					if(rel.isChoice == true){
							arr.push(rel);
					}
				})
			})
			// 根据后台返回的可选择类型数量选择
			if (arr.length > this.category_num) {
				// 删除超出可选数量的最后一位
				let end =  arr.pop();
				end.isChoice = false;
				uni.showToast({
					title:"已超出可选分类数量",
					icon:"none"
				})
				return false
			}
			arr.forEach(el => {
				this.category_ids.push(el.id);
			});
			// 去重
			this.category_ids = [...new Set(this.category_ids)];
			// 回显选中的分类
			this.$forceUpdate();
		},
		// 提交名片
		submitCard() {
			if(!this.isClick){
				let t = this;
				t.isClick = true
				let url = '/api/goods/publish_card';
				let params = {
					front_image: t.front_image,
					reverse_image: t.reverse_image,
					company_name: t.company_name,
					brief: t.brief,
					brief_images: t.brief_images.toString(),
					scope: t.scope,
					scope_images: t.scope_images.toString(),
					name: t.name,
					phone: t.phone,
					site: t.site,
					mobile: t.mobile,
					fax: t.fax,
					qq: t.qq,
					wechat: t.wechat,
					wechat_image: t.weichat_image,
					category_ids: t.category_ids.toString()
				};
				if (t.front_image) {
					if (t.company_name) {
						if (t.brief) {
							if (t.scope) {
								if (t.name) {
									App.post(url, params).then(res => {
										uni.showToast({
											title: '发布成功',
											icon: 'success',
											duration: 1000
										});
										setTimeout(function() {
											if(t.isVip == 2){
												t.isHide = true;
											}else{
												uni.navigateBack({
													delta: 1
												});
											}
											t.isClick = false
										}, 1000);
									});
								} else {
									uni.showToast({
										title: '请输入联系人姓名',
										icon: 'none'
									});
									t.isClick = false
								}
							} else {
								uni.showToast({
									title: '请输入经营范围',
									icon: 'none'
								});
								t.isClick = false
							}
						} else {
							uni.showToast({
								title: '请输入公司简介',
								icon: 'none'
							});
							t.isClick = false
						}
					} else {
						uni.showToast({
							title: '请填写公司名称',
							icon: 'none'
						});
						t.isClick = false
					}
				} else {
					uni.showToast({
						title: '请上传正面图片',
						icon: 'none'
					});
					t.isClick = false
				}
			}
			
		},
		// 关闭弹窗
		closeDialog() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 立即获取vip
		getNow() {
			uni.redirectTo({
				url: '/pages/vip/myVip'
			});
		}
	},
	onLoad() {
		this.category_num = uni.getStorageSync('category_num');
		this.isVip = uni.getStorageSync("is_vip");
		this.getType();
		
	}
};
</script>

<style>
@import url('../../style/addCard');
</style>