<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
	<div id="app">
		<div class="header">
			<h1>{{ textHeader[0] }}</h1>
			<p>{{ textHeader[1] }}</p>
			<p>
				<button @click="toggleLang" :data-lang="lang">中/Eng</button>
				&nbsp;
				<button @click="loadSample">{{ textHeader[2] }}</button>
				&nbsp;
				<button @click="clear">{{ textHeader[3] }}</button>
				&nbsp;
				<button @click="addBill" :data-bill-index="billIndex">
					{{ textHeader[4] }}
				</button>
			</p>
			<p>
				{{ textHeader[5] }}
				<span id="totalByItem" style="font-weight: bold; color: black">
					{{ totalByItem }}
				</span>
			</p>
			<p>
				{{ textHeader[6] }}
				<span id="totalByHead" style="font-weight: bold; color: black">
					{{ totalByHead }}
				</span>
			</p>
		</div>
		<div class="bill-container">
			<div class="bill" v-for="(bill, i) in bills" :key="i">
				<h4>
					{{ textBill[0] }}
					<span class="ref-num">{{ i + 1 }}</span>
				</h4>
				<p>
					{{ textBill[1] }}
					<input class="notes" type="text" placeholder="eg: 2023-06-26 Lunch" />
					<br />
				</p>
				<p>
					{{ textBill[2] }}:
					<input v-model="bill.orderTotal" type="number" min="0" />
				</p>
				<p>
					{{ textBill[3] }}:
					<input v-model="bill.actualPaid" type="number" min="0" />
					<br />
				</p>
				<p>
					{{ textBill[4] }}:
					<input v-model="bill.itemPrice" type="number" min="0" />
				</p>
				<p>
					{{ textBill[5] }}:
					<span class="calc">{{ billCalc[i].actualItemPrice }}</span>
					<br />
				</p>
				<p>
					{{ textBill[6] }}:
					<input v-model="bill.numOfPeople" type="number" min="1" />
				</p>
				<p>
					{{ textBill[7] }}:
					<span class="calc">{{ billCalc[i].avgAmount }}</span>
				</p>
				<div class="del" @click="del(i)">×</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		var textHeaderEn = [
			"Calculator for Splitting Bills",
			"Designed for calculating one person's payment due in group expenses",
			"Load Sample",
			"Clear",
			"Add Bill",
			"Total Payment Due by Item:",
			"Total Payment Due by Person:"
		];
		var textBillEn = [
			"Ref: Bill",
			"Notes",
			"Order Total",
			"Order Actual Paid Total",
			"Item Price",
			"Item Actual Price",
			"Number of People",
			"Amount Per Person"
		];
		var textHeaderZh = [
			"账单AA计算器",
			"用以计算单人在聚餐时应付的费用",
			"加载示例",
			"清除",
			"新增账单",
			"按单价计算的应付金额:",
			"按人头计算的应付金额:"
		];
		var textBillZh = [
			"编号: 账单",
			"备注",
			"订单总价",
			"订单实付",
			"单价",
			"单项应付",
			"用餐人数",
			"每人应付"
		];
		return {
			lang: "Eng",
			textHeaderEn,
			textHeaderZh,
			textBillEn,
			textBillZh,
			textHeader: textHeaderEn,
			textBill: textBillEn,
			bills: [
				{
					notes: "",
					orderTotal: "",
					actualPaid: "",
					itemPrice: "",
					numOfPeople: ""
				}
			]
		};
	},
	computed: {
		billCalc() {
			var len = this.bills.length;
			var result = [];
			for (var i = 0; i < len; i++) {
				let orderTotal = this.bills[i].orderTotal;
				let actualPaid = this.bills[i].actualPaid;
				let itemPrice = this.bills[i].itemPrice;
				let numOfPeople = this.bills[i].numOfPeople;
				let actualItemPrice =
					orderTotal && actualPaid && itemPrice
						? (itemPrice * 100 * actualPaid * 100) / (orderTotal * 10000)
						: 0;
				actualItemPrice = actualItemPrice.toFixed(1);
				let avgAmount = numOfPeople ? (actualPaid * 100) / (numOfPeople * 100) : 0;
				avgAmount = avgAmount.toFixed(1);
				result[i] = { actualItemPrice, avgAmount };
			}
			return result;
		},
		totalByItem() {
			var len = this.bills.length;
			var result = 0;
			for (var i = 0; i < len; i++) {
				result += 1 * this.billCalc[i].actualItemPrice;
			}
			result = result.toFixed(1);
			return result;
		},
		totalByHead() {
			var len = this.bills.length;
			var result = 0;
			for (var i = 0; i < len; i++) {
				result += 1 * this.billCalc[i].avgAmount;
			}
			result = result.toFixed(1);
			return result;
		}
	},
	methods: {
		toggleLang() {
			var lang = this.lang;
			if (lang == "Eng") {
				this.lang = "中";
				this.textHeader = this.textHeaderZh;
				this.textBill = this.textBillZh;
			} else {
				this.lang = "Eng";
				this.textHeader = this.textHeaderEn;
				this.textBill = this.textBillEn;
			}
		},
		loadSample() {
			var len = this.bills.length;
			var bills = [];
			for (var i = 0; i < len; i++) {
				bills[i] = {
					notes: "2023-06-26 Lunch",
					orderTotal: 196,
					actualPaid: 151.9,
					itemPrice: 36,
					numOfPeople: 3
				};
			}
			this.bills = bills;
		},
		clear() {
			var bills = this.bills;
			for (var i = 0; i < bills.length; i++) {
				bills[i].notes = "";
				bills[i].orderTotal = "";
				bills[i].actualPaid = "";
				bills[i].itemPrice = "";
				bills[i].numOfPeople = "";
			}
		},
		addBill() {
			var bill = {
				notes: "",
				orderTotal: "",
				actualPaid: "",
				itemPrice: "",
				numOfPeople: ""
			};
			this.bills.push(bill);
		},
		del(id) {
			this.bills.splice(id, 1);
		}
	}
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
html,
body {
	margin: 0px;
	font-family: Arial;
	font-size: 18px;
}
#app {
	margin: 0px auto;
	padding: 20px 0px 0px 0px;
	width: 1040px;
	max-width: 100%;
	min-width: 320px;
}
h1 {
	color: black;
	font-size: 28px;
	line-height: 28px;
}
h4,
p,
button,
input {
	font-size: 18px;
	line-height: 18px;
}
h4 {
	color: black;
	margin-bottom: 0px;
	font-size: 20px;
}
p {
	font-family: Arial, 幼圆;
}
input {
	width: 200px;
	color: black;
	border: 1px solid silver;
	display: block;
}
input.remark {
	display: inline-block;
}
.calc {
	padding-left: 0px;
	color: black;
	font-weight: bold;
	border: 2px solid transparent;
	display: block;
}
button {
	padding: 6px 10px;
	color: black;
	font-size: 16px;
	border: 1px solid gray;
	border-radius: 5px;
	-webkit-appearance: none;
	cursor: pointer;
}
button:hover {
	background: rgb(225, 225, 225);
}
.bill-container {
	display: flex;
	flex-wrap: wrap;
}
.bill {
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 0px 10px;
	max-width: 312px;
	border: 1px solid silver;
	background: white;
	position: relative;
}
.del {
	position: absolute;
	top: -2px;
	right: 6px;
	cursor: pointer;
	font-size: 35px;
}
.bill:first-child .del {
	display: none;
}
</style>