<template>
	<div class="analysis-table">
		<!-- 表格组件 -->
		<Table border ref="table" :data="optionsData" :columns="optionColumns"></Table>



	</div>
</template>
<script>
	export default {
		props: {
			optionRate: {
				type: Object,
				default: () => {}
			},
			options: {
				type: Array,
				default: () => []
			},
			answer:{
				type: Array,
				default: () => []
			}

		},
		data(vm) {
			return {
				optionsData: [],
				optionColumns: [{
						title: vm.$t('totalAnalysis.myTable.option'),
						key: 'option',
						align: 'center',
						width: 70
					},
					{
						title: vm.$t('totalAnalysis.myTable.answerCount'),
						key: 'num',
						align: 'center',
						width: 200
					},
					{
						title: vm.$t('totalAnalysis.myTable.answerRate'),
						key: 'rate',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Progress', {
									props: {
										percent: +params.row.rate.replace('%',''),
										strokeColor: params.row.isTrue ? '#14db14' : '#b5bcbe'
									}
								})
							])
						}
					},
					{
						title: vm.$t('totalAnalysis.myTable.RHRate'),
						align: 'center',
						key: 'PH',
						width:180
					},
					{
						title: vm.$t('totalAnalysis.myTable.RLRate'),
						align: 'center',
						key: 'PL',
						width:180
					}
				],
			}
		},
		created() {

		},
		methods: {


		},
		watch: {
			optionRate: {
				handler(n, o) {
					if (Object.keys(n).length) {
						let total = this.$store.state.totalAnalysis.analysisJson.all.total // 取总人数
						let phCount = Math.floor(total * 0.27) //取高分组人数
						this.options.forEach(key => {
							this.optionsData.push({
								option: key,
								isTrue: this.answer[0].includes(key) ,
								num: n.record[key] || 0,
								rate: n.record[key] ? Number((n.record[key] / total) * 100).toFixed(1) +
									'%' : '0',
								PH: n.ph[key] ? Number((n.ph[key] / phCount) * 100).toFixed(1) + '%' : 0,
								PL: n.pl[key] ? Number((n.pl[key] / phCount) * 100).toFixed(1) + '%' : 0,
							})
						})
						console.log(this.optionsData)
					}
				},
				immediate: true,
				deep: true
			},

		}

	}
</script>
