// pages/dispatch/waybillModel/components/shareDrawing/index.js
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {

	},

	/**
	 * 组件的初始数据
	 */
	data: {
		photoFile: '' //本地图片路径
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		/**
		 * 获取本地图片
		 */
		getPhotoFile: function(e) {
			e.success(this.data.photoFile);
		},

		getShareDrawing: function(e) {
			let _this = this;
			let goodsName = e.goodsName; //货物名称
			let beginCity = e.beginCity; //出发省份
			let beginAddress = e.beginAddress; //出发详细地址
			let endCity = e.endCity; //目的地城市
			let endAddress = e.endAddress; //目的地详情地址
			let QRCode = e.QRCode; //二维码图片
			//返回一个 SelectorQuery 对象实例
			const query = this.createSelectorQuery();
			//选择canvas
			query.select('#myCanvas')
				.fields({
					node: true,
					size: true
				})
				.exec((res) => {
				   
					const canvas = res[0].node; //获取 canvas 对象
					const ctx = canvas.getContext('2d'); // 获取Context 对象

					//canvas 缩放
					const dpr = wx.getSystemInfoSync().pixelRatio;
					canvas.width = res[0].width * dpr;
					canvas.height = res[0].height * dpr;
					ctx.scale(dpr, dpr);
						
					//绘制顶部边条
					_this.setHeadStrip(canvas, ctx);
					//绘制货物名称
					_this.setTitle(ctx, goodsName);
					//绘制提示
					_this.setTips(ctx);
					//绘制二维码
					_this.setQRCode(canvas, ctx, QRCode)

					//绘制出发地图标
					_this.setBeginIcon(canvas, ctx);
					//绘制出发省份
					_this.setBeginCity(ctx, beginCity);
					//绘制出发详细地址
					_this.setBeginAddress(ctx, beginAddress);
					//绘制目的地图标
					_this.setEndIcon(canvas, ctx);
					//绘制目的地城市
					_this.setEndCity(ctx, endCity);
					//绘制目的地详情地址
					_this.setEndAddress(ctx, endAddress);
					//生成图片
					wx.canvasToTempFilePath({
						canvas,
						success(res) {
							_this.setData({
								photoFile: res.tempFilePath
							})
						}
					})

					//end exec
				})
			//end

		},
		/**
		 * 设置货物名称
		 * [@param](/user/param) {Object} ctx  Context 对象
		 * [@param](/user/param) {Object} str  名称文本
		 */
		setTitle: function(ctx, str) {
			const width = 342 // 获取设备宽度
			ctx.font = '500 19px PingFangSC-Medium';
			ctx.fillStyle = '#000';
			ctx.fillText(str, (width - ctx.measureText(str).width) * 0.5, 40);
		},
		/**
		 * 设置顶部条形
		 * [@param](/user/param) {Object} canvas canvas 对象
		 * [@param](/user/param) {Object} ctx  Context 对象
		 * [@param](/user/param) {Object} src 图片链接
		 */
		setHeadStrip: function(canvas, ctx) {
			const headerImg = canvas.createImage(); // 获取image 对象
			headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/head.png';
			headerImg.onload = () => {
				ctx.drawImage(headerImg, 0, 0, 342, 10);
			};
		},
		/**
		 * 绘制二维码
		 * [@param](/user/param) {Object} canvas  canvas 对象
		 * [@param](/user/param) {Object} ctx  Context 对象
		 * [@param](/user/param) {Object} src 图片链接
		 */
		setQRCode: function(canvas, ctx, src) {
			const headerImg = canvas.createImage(); // 获取image 对象
			headerImg.src = src;
			headerImg.onload = () => {
				ctx.drawImage(headerImg, 101, 103, 140, 140);
				ctx.restore();
			};
		},
		/**
		 * 绘制提示
		 * [@param](/user/param) {Object} ctx  Context 对象
		 */

		setTips: function(ctx) {
			const width = 342 // 获取设备宽度
			ctx.font = '500 15px PingFangSC-Medium';
			ctx.fillStyle = '#F1950A';
			let str = "请司机扫码上传证件";
			ctx.fillText(str, (width - ctx.measureText(str).width) * 0.5, 70);
		},

		/**
		 * 绘制出发地图标
		 *  [@param](/user/param) {Object} canvas  canvas 对象
		 *  [@param](/user/param) {Object} ctx  Context 对象
		 */
		setBeginIcon: function(canvas, ctx) {
			const headerImg = canvas.createImage(); // 获取image 对象
			headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/begin1.png';
			headerImg.onload = () => {
				ctx.drawImage(headerImg, 30, 300, 21, 34);
			};
		},
		/**
		 * 绘制出发城市
		 */
		setBeginCity: function(ctx, str) {
			ctx.font = '500 16px PingFangSC-Medium';
			ctx.fillStyle = '#000';
			ctx.fillText(str, 61, 310);
		},
		/**
		 * 绘制详细地址
		 */
		setBeginAddress: function(ctx, str) {
			ctx.font = '400 14px PingFangSC-Medium';
			ctx.fillStyle = '#666666';
			ctx.fillText(str, 61, 330);
		},
		/**
		 * 绘制目的地图标
		 *  [@param](/user/param) {Object} canvas  canvas 对象
		 *  [@param](/user/param) {Object} ctx  Context 对象
		 */
		setEndIcon: function(canvas, ctx) {
			const headerImg = canvas.createImage(); // 获取image 对象
			headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/end1.png';
			headerImg.onload = () => {
				ctx.drawImage(headerImg, 30, 368, 21, 34);
			};
		},
		/**
		 * 绘制目的地城市
		 */
		setEndCity: function(ctx, str) {
			ctx.font = '500 16px PingFangSC-Medium';
			ctx.fillStyle = '#000';
			ctx.fillText(str, 61, 380);
		},
		/**
		 * 绘制目的地详细地址
		 */
		setEndAddress: function(ctx, str) {
			ctx.font = '400 14px PingFangSC-Medium';
			ctx.fillStyle = '#666666';
			ctx.fillText(str, 61, 400);
		}

	}
})