export default defineMixin({
	emits: ['click'],
	props: {
		// 图标大小
		size: {
			type: Number,
			default: 24
		},
		// 线段粗细
		strokeWidth: {
			type: Number,
			default: 4
		},
		// 图标风格（颜色）
		theme: {
			type: String,
			default: "outline"
		},
		// 图标颜色["外部描边颜色","外部填充颜色","内部描边颜色","内部填充颜色"]
		fill: {
			type: Array,
			default: ["#000000"]
		},
		// 端点类型
		strokeLinecap: {
			type: String,
			default: "round"
		},
		// 拐点类型
		strokeLinejoin: {
			type: String,
			default: "round"
		}
	},
	methods: {
		onClick() {
			this.$emit("click");
		},
		/**
		 * 获取当前颜色
		 */
		currentColor(index : number, defaultColor : string) : string {
			const fill = this.fill as string[];
			const isExistence : boolean = fill.length >= (index + 1) ? true : false;
			return isExistence ? fill[index] : defaultColor;
		},
		/**
		 * 多色
		 */
		multiColor() : string[] {
			return [this.currentColor(0, "#000000"), this.currentColor(1, "#2F88FF"), this.currentColor(2, "#FFFFFF"), this.currentColor(3, "#43CCF8")];
		},
		/**
		 * 双色
		 */
		twoTone() : string[] {
			return [this.currentColor(0, "#000000"), this.currentColor(1, "#2F88FF"), this.currentColor(0, "#000000"), this.currentColor(1, "#2F88FF")];
		},
		/**
		 * 填充
		 */
		filled() : string[] {
			return [this.currentColor(0, "#000000"), this.currentColor(0, "#000000"), "#FFFFFF", "#FFFFFF"];
		},
		/**
		 * 线性
		 */
		outline() : string[] {
			return [this.currentColor(0, "#000000"), "none", this.currentColor(0, "#000000"), "none"];
		},
		/**
		 * 根据主题取色彩
		 */
		colors(index : number) : string {
			if (this.theme == "filled") {
				return this.filled()[index]
			} else if (this.theme == "two-tone") {
				return this.twoTone()[index]
			} else if (this.theme == "multi-color") {
				return this.multiColor()[index]
			} else {
				return this.outline()[index]
			};
		}
	}
})