<template>
	<div
		style="position:relative; width: 100%; height: 100%; overflow: hidden; margin-top: 0;border-bottom: 1px solid #ddd;">
		<div v-show="ids === 'svg0'" class="sheet-paper-title">
			<BaseTitleEditor :ids="'sheetName' + ids" :content="sheetPaperName"></BaseTitleEditor>
		</div>
		<svg :id="ids" width="100%" height="100%" style="background: #fff"></svg>
	</div>
</template>

<script>
	import BaseTitleEditor from './BaseTitleEditor'
	import Snap from "imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js";
	import {
		PAPER_W,
		PAPER_H,
		ANCHORPROP,
		SVG_BORDER_PROP
	} from "@/utils/sheetConfig.js";
	export default {
		props: {
			ids: {
				type: String,
				default: "",
			},
			total: {
				type: Number,
				default: 0,
			},
		},
		datas() {
			return {
				pageCount: 1,
				snap: null,
				pageBox: null,
				anchorBox: null,
				sheetPaperName:''
			};
		},
		components: {
			BaseTitleEditor
		},
		created() {},
		methods: {
			doRenderPageAnchor(snap) {
				this.anchorBox.remove(); // 先清除之前的绘制内容
				this.anchorBox = this.snap.paper.g();
				let curPage = Number(this.ids.replace("svg", ""));
				// 将当前页码转换成二进制进行页码锚点绘制
				let i = (curPage + 1).toString(2)
				let radixArr = i.length === 1 ? '00' + i : i.length === 2 ? '0' + i : i
				// 绘制锚点
				for (let index = 0; index < 3; index++) {
					this.anchorBox.add(
						snap
						.rect(
							ANCHORPROP.gapX + 65 + 30 * index,
							PAPER_H - ANCHORPROP.height - ANCHORPROP.gapY,
							20,
							10
						)
						.attr({
							fill: radixArr.split('')[index] === '1' ? '#000' : "none",
							stroke: "#000000",
							strokeWidth: radixArr.split('')[index] === '1' ? 0 : 1
						})
					);
				}
			},

			doRenderPage(snap) {
				this.pageBox.remove(); // 先清除之前的绘制内容
				this.pageBox = this.snap.paper.g();
				// 页码
				var page = snap
					.text(
						(PAPER_W - 100) / 2,
						PAPER_H - 40,
						`第 ${Number(this.ids.replace("svg", "")) + 1} 页  /  共 ${
            this.total
          } 页`
					)
					.attr({
						fontSize: 12,
						fontFamily: "Times New Roman",
					});
				this.pageBox.add(page);
			},
		},
		mounted() {
			var snap = Snap("#" + this.ids);
			this.pageBox = snap.paper.g();
			this.anchorBox = snap.paper.g();
			let anchorProp = ANCHORPROP;
			// snap
			//   .rect(SVG_BORDER_PROP.x, SVG_BORDER_PROP.y, SVG_BORDER_PROP.width, SVG_BORDER_PROP.height)
			//   .attr({ fill: "none", stroke: "#000", strokeWidth: 1 });

			// 画四个锚点
			snap.rect(
				anchorProp.gapX,
				anchorProp.gapY,
				anchorProp.width,
				anchorProp.height
			);
			snap.rect(
				anchorProp.gapX - 5,
				anchorProp.gapY - 5,
				anchorProp.width + 10,
				anchorProp.height + 10
			).attr({
				fill: "none",
				stroke: "#000",
				strokeWidth: 4
			});
			snap.rect(
				anchorProp.gapX,
				PAPER_H - anchorProp.height - anchorProp.gapY,
				anchorProp.width,
				anchorProp.height
			);
			snap.rect(
				anchorProp.gapX - 5,
				PAPER_H - anchorProp.height - anchorProp.gapY - 5,
				anchorProp.width + 10,
				anchorProp.height + 10
			).attr({
				fill: "none",
				stroke: "#000",
				strokeWidth: 4
			});
			snap.rect(
				PAPER_W - anchorProp.width - anchorProp.gapX,
				anchorProp.gapY,
				anchorProp.width,
				anchorProp.height
			);
			snap.rect(
				PAPER_W - anchorProp.width - anchorProp.gapX - 5,
				anchorProp.gapY - 5,
				anchorProp.width + 10,
				anchorProp.height + 10
			).attr({
				fill: "none",
				stroke: "#000",
				strokeWidth: 4
			});
			snap.rect(
				PAPER_W - anchorProp.width - anchorProp.gapX,
				PAPER_H - anchorProp.height - anchorProp.gapY,
				anchorProp.width,
				anchorProp.height
			);
			snap.rect(
				PAPER_W - anchorProp.width - anchorProp.gapX - 5,
				PAPER_H - anchorProp.height - anchorProp.gapY - 5,
				anchorProp.width + 10,
				anchorProp.height + 10
			).attr({
				fill: "none",
				stroke: "#000",
				strokeWidth: 4
			});
			this.snap = snap;
			this.doRenderPage(snap);
			this.doRenderPageAnchor(snap);

		},
		computed: {
			paperName() {
				return this.$store.state.answerSheet.paperItem
			}
		},
		watch: {
			paperName: {
				handler(n, o) {
					this.sheetPaperName = n.name
				},
				deep: true,
				immediate: true
			},
			total(n, o) {
				this.doRenderPage(this.snap);
			},
			immediate: true
		},
	};
</script>

<style lang="less">
	.sheet-paper-title {
		position: absolute;
		top: 70px;
		left: 80px;

		.w-e-text {
			font-size:18px !important;
			text-align: center !important;
		}
	}
</style>
