<template>
	<view class="p-root-bind-my-main g_flex_column_center flex_center g_w_all g_h_all g_bg_f_5 g_kuaishou" :style="{ 'background-image': showBg ? 'url(' + cdnBaseImg + 'share_bg.svg)' : '' }" :class="showBg ? 'g_pt_32' : ''">
		<view class="g_flex_row_center g_fs_22 g_c_3 g_fw_600 g_mb_24" v-if="showBg">邀请粉丝（代理）关注我的发单号</view>
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<image :src="shareJobImg" show-menu-by-longpress style="width: 343px; height: 555px; margin: 0 auto; display: block" mode=""></image>
		<view class="g_text_c g_fs_16 g_mt_12 g_mb_12 g_fw_600">长按图片转发给微信好友</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<canvas
			:style="{
				width: canvasWidth + 'px',
				height: canvasHeight + 'px',
				position: 'absolute',
				left: '-2000px',
				background: '#fff',
			}"
			canvas-id="text"
		></canvas>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="canvas-card g_position_rela" id="canvas-card" style="background-image: url('https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/v3/bg.png')">
			<view class="m-card g_position_abso" style="left: 50%; transform: translateX(-50%)">
				<view class="g_w_all g_h_all g_position_rela">
					<view class="g_pl_20 g_pt_18 g_pr_24">
						<view class="">
							<view class="g_fs_20 g_c_3 g_fw_600">{{ agencyName }}</view>
							<view class="g_fs_14 g_c_9 g_mt_6">今日更新职位{{ recommendList.jobUpdateNum }}</view>
						</view>
						<view>
							<image
								:src="recommendList.logo"
								style="border-radius: 50%; position: absolute; border: 2px solid #fff"
								:style="{
									width: appLogoSize / 2 + 'px',
									height: appLogoSize / 2 + 'px',
									top: appLogoTop,
									right: appLogoLeft,
								}"
							></image>
						</view>
					</view>
					<view class="g_flex_row_start g_pl_20" style="margin-top: 28px">
						<view class="g_mr_12">
							<view class="g_fs_22 g_c_3 g_flex_row_center g_fw_600">{{ recommendList.jobNum }}</view>
							<view class="g_fs_14 g_c_9 g_mt_4 g_flex_row_center">总职位</view>
						</view>
						<view class="g_mr_12">
							<view class="g_fs_22 g_c_3 g_flex_row_center g_fw_600">{{ recommendList.recruitmentJobNum.toString() }}</view>
							<view class="g_fs_14 g_c_9 g_mt_4 g_flex_row_center">在招数</view>
						</view>
						<view class="">
							<view class="g_fs_22 g_c_3 g_flex_row_center g_fw_600">{{ recommendList.downNum }}</view>
							<view class="g_fs_14 g_c_9 g_mt_4 g_flex_row_center">粉丝数</view>
						</view>
					</view>
				</view>
			</view>
			<view class="m-logo g_flex_c">
				<image
					:src="wxCode"
					style="position: absolute; left: 50%; transform: translateX(-50%)"
					:style="{
						width: appCodeSize / 2 + 'px',
						height: appCodeSize / 2 + 'px',
						top: appCodeTop,
					}"
				></image>
			</view>
		</view>
		<!-- #endif -->

		<view v-if="allowClick">
			<view class="g_h_100"></view>
			<g-panel-fixed>
				<slot>
					<view class="g_flex_row_center">
						<!-- #ifdef APP-PLUS -->
						<g-button btnText="扫一扫" size="small" type="default" @clickBtn="handleOpenCamera"></g-button>
						<g-button btnText="保存图片" class="g_ml_16" size="small" type="primary" @clickBtn="saveAppImageCanvas"></g-button>
						<!-- #endif -->

						<!-- #ifdef H5 -->
						<g-button btnText="保存图片" size="small" type="primary" @clickBtn="saveH5ImageCanvas"></g-button>
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<g-button btnText="保存图片" size="small" type="default" @clickBtn="saveWXImageToAlbum"></g-button>
						<g-button btnText="直接转发" class="g_ml_16" size="small" openType="share" type="primary"></g-button>
						<!-- #endif -->
					</view>
				</slot>
			</g-panel-fixed>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<canvas type="2d" style="position: absolute; left: -2000px; width: 425px; height: 350px; background: #fff" id="canvasId" ref="canvasId"></canvas>
		<!-- #endif -->
	</view>
</template>

<script>
// #ifdef H5
import { saveAs } from "file-saver";
// #endif

export default {
	onReady() {
		this.G.setNavStyle();
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			localBaseImg: this.G.store().localBaseImg,
			cdnBaseImg: this.G.store().cdnBaseImg,
			wxCode: "",
			appCodeSize: 0,
			appLogoSize: 0,
			appCodeTop: 0,
			appLogoTop: 0,
			appLogoLeft: 0,
			agencyName: "",
			shareJobImg: "",
			allowClick: false,
			appInfo: {},
			appfile: null,
			canvasWidth: 0,
			canvasHeight: 0,
		};
	},
	props: {
		showBg: {
			type: Boolean,
			default: () => {
				return true;
			},
		},
		active: {
			default: 0,
		},
		recommendList: {
			type: Object,
			default: () => {
				return {
					logo: "",
					jobNum: 0,
					jobUpdateNum: 0,
					recruitmentJobNum: 0,
					downNum: 0,
				};
			},
		},
	},
	created() {
		let that = this;

		uni.getImageInfo({
			src: "https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/canvasBg.png", // 网络图片
			success(res) {
				that.canvasWidth = res.width;
				that.canvasHeight = res.height;
			},
		});

		// #ifdef MP-WEIXIN || H5
		this.init();
		uni.showLoading({
			title: "生成中...",
		});
		// #endif
	},
	watch: {
		shareJobImg(newValue, oldValue) {
			if (newValue) {
				uni.hideLoading();
			}
		},
		recommendList(val) {
			let that = this;
			// #ifdef APP-PLUS || MP-KUAISHOU || MP-TOUTIAO
			console.log("watch:", val);
			uni.showLoading({
				title: "生成中...",
			});
			that.appInfo = val;
			this.init();
			// #endif
		},
		// $route: "init",
	},
	methods: {
		init() {
			let that = this;
			that.appInfo = that.recommendList;
			console.log("that.appInfo", that.appInfo);
			// #ifdef APP-PLUS || MP-KUAISHOU
			let _env = "app";
			// #endif
			// #ifdef H5
			let _env = "app";
			// #endif
			// #ifdef MP-WEIXIN
			let _env = uni.getAccountInfoSync().miniProgram.envVersion;
			// #endif
			that.G.Get(
				that.api.bind_getCode,
				{
					env: _env,
				},
				(res) => {
					console.log("获取邀请码：", res);
					that.wxCode = "https://daotian.matripe.com.cn" + res.qrcode;
					that.agencyName = res.agencyName;
					// #ifdef MP-WEIXIN
					console.log("canvasRes1");

					that.getWXCanvas("https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/canvasBg.png").then((canvasRes) => {
						console.log("canvasRes", canvasRes);
						that.shareJobImg = canvasRes.tempFilePath;
						that.allowClick = true;
						that.$emit("setImg", that.shareJobImg);
					});
					that.$emit("exportCode", {
						code: res.code,
						agencyName: res.agencyName,
					});
					// #endif
					// #ifdef H5
					that.appCodeSize = uni.getSystemInfoSync().windowWidth * (122 / 375) * 2;
					that.appCodeTop = (((uni.getSystemInfoSync().windowWidth - 32) * 2248) / 1372) * (290 / 562) + "px";

					that.appLogoSize = uni.getSystemInfoSync().windowWidth * (68 / 375) * 2;
					that.appLogoTop = (((uni.getSystemInfoSync().windowWidth - 32) * 2248) / 1372) * (36 / 562) - uni.getSystemInfoSync().windowWidth * 0.046 + "px";
					that.appLogoLeft = (uni.getSystemInfoSync().windowWidth - 74) * (24 / 303) + uni.getSystemInfoSync().windowWidth * 0.00065 + "px";
					uni.hideLoading();
					that.allowClick = true;
					that.$emit("exportCode", {
						code: res.code,
						agencyName: res.agencyName,
					});
					// #endif

					// #ifdef APP-PLUS || MP-KUAISHOU
					uni.hideLoading();
					that.allowClick = true;
					that.getAppCanvas("https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/canvasBg.png");
					console.log("canvasRes12");
					// #endif
				}
			);
		},

		// App端绘制
		getAppCanvas(sharelImg, type) {
			let that = this,
				ctx = uni.createCanvasContext("text");
			let info = that.appInfo;
			new Promise(function (resolve) {
				// 绘制背景图片
				uni.downloadFile({
					url: sharelImg,
					success: function (bgRes) {
						uni.getImageInfo({
							src: bgRes.tempFilePath, // 网络图片
							success(res) {
								let _width = res.width;
								let _height = res.height;
								ctx.drawImage(bgRes.tempFilePath, 0, 0, _width, _height);
								uni.downloadFile({
									url: info.logo,
									success: function (bgRes) {
										that.G.roundRect(ctx, bgRes.tempFilePath, 915, 218, 272, 272, 136); // logo
										uni.downloadFile({
											url: that.wxCode,
											success: function (QRres) {
												that.G.roundRect(ctx, QRres.tempFilePath, (_width - 488) / 2, 1160, 488, 488, 0);
												that.G.fillTextLineBreak(ctx, info.agencyName, 140, 300, info.agencyName.length * 80, 80, "#333", 80, 600, "left"); // 企业名称
												that.G.fillTextLineBreak(ctx, "今日更新职位" + info.jobUpdateNum, 140, 400, ("今日更新职位" + info.jobUpdateNum).length * 56, 56, "#999", 56, 500, "left"); // 今日更新职位

												that.G.fillTextLineBreak(ctx, info.jobNum.toString(), 230, 620, info.jobNum.toString().length * 88, 88, "#333", 88, 600); // 总职位
												that.G.fillTextLineBreak(ctx, info.recruitmentJobNum.toString(), 480, 620, info.recruitmentJobNum.toString().length * 88, 88, "#333", 88, 600); // 在招数
												that.G.fillTextLineBreak(ctx, info.downNum.toString(), 730, 620, info.downNum.toString().length * 88, 88, "#333", 88, 600); // 粉丝数

												that.G.fillTextLineBreak(ctx, "总职位", 230, 700, "总职位".length * 56, 56, "#999", 56, 500); // 总职位
												that.G.fillTextLineBreak(ctx, "在招数", 480, 700, "在招数".length * 56, 56, "#999", 56, 500); // 在招数
												that.G.fillTextLineBreak(ctx, "粉丝数", 730, 700, "粉丝数".length * 56, 56, "#999", 56, 500); // 粉丝数
												ctx.restore();
												ctx.draw(false, () => {
													setTimeout(function () {
														that.endAppCanvas(ctx, _width, _height);
													}, 50);
												});
											},
										});
									},
								});
							},
							fail(err) {},
						});
					},
				});
			}).then(() => {});
		},
		endAppCanvas(ctx, _width, _height) {
			let that = this;
			uni.canvasToTempFilePath({
				x: 0,
				y: 0,
				width: _width,
				height: _height,
				canvasId: "text",
				success: function (pathRres) {
					const savedFilePath = pathRres.tempFilePath; //相对路径
					const path = plus.io.convertLocalFileSystemURL(savedFilePath); //绝对路径
					const fileReader = new plus.io.FileReader();
					fileReader.readAsDataURL(path);
					fileReader.onloadend = (res) => {
						that.shareJobImg = res.target.result;
						that.appfile = savedFilePath;
					};
				},
			});
		},
		// 微信端绘制
		getWXCanvas(sharelImg, type) {
			const that = this;
			return new Promise((resolve) => {
				var mycenter = 0; //文字左右居中显示
				var myheight = 0; //文字高度
				const query = uni.createSelectorQuery().in(this);
				query
					.select("#canvasId")
					.fields({
						node: true,
						size: true,
					})
					.exec((res) => {
						console.log("uni 获取节点信息：", res);
						// console.log("sharelImg", sharelImg);
						const canvas = res[0].node;
						const ctx = canvas.getContext("2d");
						new Promise(function (resolve) {
							// 绘制背景图片
							uni.getImageInfo({
								src: sharelImg, // 网络图片
								success(res) {
									console.log("res111", res);
									canvas.width = res.width;
									canvas.height = res.height;
									mycenter = canvas.width;
									myheight = canvas.height;
									const img = canvas.createImage();
									img.src = res.path;
									console.log("img111", img);
									img.onload = (info) => {
                    // 绘制背景色
										ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
										console.log("info111", info);
										resolve(true);
									};
								},
								fail(err) {},
							});
						}).then(() => {
							//使用：
							this.setShareJobImg(ctx, canvas, mycenter)
								.then(function (canvas1) {
									console.log("canvas1", canvas1);
									uni.canvasToTempFilePath({
										canvas: canvas1,
										success(res) {
											console.log("res222", res);
											resolve(res);
										},
										fail(res) {
											uni.hideLoading();
											uni.showToast({
												title: res.errMsg,
												icon: "error",
											});
										},
									});
								})
								.catch((err) => {
									uni.hideLoading();
									uni.showToast({
										title: "生成失败,请重试",
									});
								});
						});
					});
			});
		},

		// 微信端下载
		saveWXImageToAlbum() {
			let that = this;
			uni.saveImageToPhotosAlbum({
				filePath: that.shareJobImg,
				success() {
					uni.showToast({
						title: "保存成功",
					});
				},
				fail(err) {
					uni.showToast({
						title: "保存失败, 请重试",
					});
				},
			});
		},
		// H5下载
		saveH5ImageCanvas() {
			let that = this;
			// #ifdef H5
			// #endif
		},
		// APP下载
		saveAppImageCanvas() {
			let that = this;
			uni.saveImageToPhotosAlbum({
				filePath: that.appfile,
				success() {
					uni.showToast({
						title: "保存成功",
						icon: "success",
					});
				},
				fail() {
					uni.showToast({
						title: "保存失败",
						icon: "none",
					});
				},
			});
		},

		// 设置分享布局
		setShareJobImg(ctx, canvas, mycenter, funObj) {
			let that = this;
			return new Promise((imgres) => {
				uni.getImageInfo({
					src: that.wxCode,
					success(res) {
						const img = canvas.createImage();
						console.log("res333", res);
						img.src = res.path;
						img.onload = () => {
							that.G.roundRect(ctx, img, (mycenter - 488) / 2, 1160, 488, 488, 0);
							let info = that.recommendList;
							console.log("info", info);
							if (!info.logo) {
								info.logo = "https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/defaultAvatar.png";
							}
							console.log("that.recommendList333", that.recommendList);
							uni.getImageInfo({
								src: info.logo,
								success(res) {
									console.log("res444", res);
									const img = canvas.createImage();
									img.src = res.path;
									img.onload = () => {
										that.G.roundRect(ctx, img, 915, 218, 272, 272, 136); // logo
										that.G.fillTextLineBreak(ctx, info.fullName, 140, 300, info.fullName.length * 80, 80, "#333", 80, 600, "left"); // 企业名称
										that.G.fillTextLineBreak(ctx, "今日更新职位" + info.jobUpdateNum, 140, 400, ("今日更新职位" + info.jobUpdateNum).length * 56, 56, "#999", 56, 500, "left"); // 今日更新职位

										that.G.fillTextLineBreak(ctx, info.jobNum.toString(), 230, 620, info.jobNum.toString().length * 88, 88, "#333", 88, 600); // 总职位
										that.G.fillTextLineBreak(ctx, info.recruitmentJobNum.toString(), 480, 620, info.recruitmentJobNum.toString().length * 88, 88, "#333", 88, 600); // 在招数
										that.G.fillTextLineBreak(ctx, info.downNum.toString(), 730, 620, info.downNum.toString().length * 88, 88, "#333", 88, 600); // 粉丝数

										that.G.fillTextLineBreak(ctx, "总职位", 230, 700, "总职位".length * 56, 56, "#999", 56, 500); // 总职位
										that.G.fillTextLineBreak(ctx, "在招数", 480, 700, "在招数".length * 56, 56, "#999", 56, 500); // 在招数
										that.G.fillTextLineBreak(ctx, "粉丝数", 730, 700, "粉丝数".length * 56, 56, "#999", 56, 500); // 粉丝数
										imgres(canvas);
									};
								},
								fail(err) {},
							});
						};
					},
					fail(err) {},
				});
			});
		},
		// 扫一扫
		handleOpenCamera() {
			let that = this;
			that.G.handleScanCode();
		},
	},
};
</script>

<style lang="scss">
.p-root-bind-my-main {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	.canvas-card {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: calc(100vw - 32px);
		height: calc(calc(100vw - 32px) * 2248 / 1372);
	}
	.m-card {
		top: calc(calc(calc(100vw - 32px) * 2248 / 1372) * (36 / 562));
		border-radius: 15px;
		width: calc(100vw - 74px);
		height: calc(calc(calc(100vw - 32px) * 2248 / 1372) * (198 / 562));
	}
}
</style>
