<template>
	<div v-if="(resultset) && (resultset.length == 1) && (!resultset[0][0].startsWith('1^'))" class="detail">{{resultset[0].join('\r\n')}}</div>
	<div v-else-if="(resultset_calculated) && (resultset_calculated.length)" class="accordion">
		<div v-for="item in resultset_calculated" class="accordion-item" :key="item">
			<h2 class="accordion-header">
				<button type="button" class="accordion-button report-row" :class="{ collapsed: !show[item.hash] }" @click="show[item.hash] = !show[item.hash]">
					<span v-for="entry in table" class="report-col">{{item[entry.subscript]}}</span>
				</button>
			</h2>
			<div class="accordion-collapse collapse" :class="{ show: show[item.hash] }">
				<div class="detail accordion-body">{{item[detail]}}</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.report-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.report-col {
		flex: 1;
	}
	.detail {
		font-family: monospace;
		white-space: pre-wrap;
	}
</style>

<script>
	import { strHashJenkins } from './util.mjs';

	export default {
		props: {
			client: Object,
			resultset: Array,
			table: Array,
			detail: Number
		},
		data() {
			return {
				show: {}
			};
		},
		computed: {
			resultset_calculated() {
				return this.resultset ? this.resultset.map(item => {
					var res = [], line, brk, sub;
					for(var i = 0; i < item.length; ++i) {
						brk = (line = item[i]).indexOf('^');
						if(brk >= 0) {
							if(res[sub = line.substring(0, brk)]) res[sub].push(line.substring(brk + 1));
							else res[sub] = [line.substring(brk + 1)];
						}
					}
					for(var k in res) if(res[k]) res[k] = res[k].join('\r\n');
					res.hash = strHashJenkins(item.join(''));
					return res;
				}) : [];
			}
		}
	};
</script>
