<template>
	<div >
		<div v-for="(item, index) in dataList" :key="index" class="dataSetting" flex>
			<p style="width: 100px;text-align: right;">{{item.billName}}</p>
			<div flex flex-wrap style="margin-left: 10px;width: calc(100% - 150px);">
				<p class="recordText" v-for="el in item.buttonList" :class="{'active':el.type}" @click="typeChange(el)">{{el.name}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		GetAllBillDataPepedom,
		GetAllBilldata
	} from '@/api/apis/jurisdiction.js'
	export default {
		name: "dataSetting",
		data() {
			return {
				dataList: [],
				dataPepedom: [],
				dataSet: [],
				activeList:[],
			}
		},
		created() {
			// this.inPage()
		},

		methods: {
			inPage() {
				let dataPepedom = this.getDataPepedom()
				let dataSet = this.getDataSet()
				Promise.all([dataSet, dataPepedom]).then((value) => {
					this.getDataList(value[0], value[1])
				})
			},

			async getDataPepedom() {
				let res = await GetAllBillDataPepedom()
				if (res.code == 1) {
					return res.data[0]
				}
			},
			async getDataSet() {
				let res = await GetAllBilldata()
				if (res.code == 1) {
					res.data[0].forEach(el=>{
						el.buttonList = []
					})
					return res.data[0]
				}
			},
			getDataList(dataSet, dataPepedom) {
				this.dataList = []
				let arr =  []
				dataSet.forEach((el, index) => {
					dataPepedom.forEach((item) => {
						if (el.billKindID == item.billKindID) {
							el.buttonList.push(item)
						}
					})
				})
				this.dataList = dataSet
				if(this.activeList.length > 0){
					this.dataList.forEach(item=>{
						item.buttonList.forEach(bItem=>{
							this.activeList.forEach(el=>{
								if(el == bItem.id){
									bItem.type = true
								}
							})
						})
					})
				}
			},
			typeChange(item) {
				item.type = !item.type
				this.$forceUpdate()
			},
		}
	}


</script>
<style lang="scss">
	$activeColor: var(--bg-color, "#00aaff");

	.el-icon-star-on {
		/* color: #00aa00; */
		color: $activeColor;
	}

	.dataSetting {
		color: #000;
		.recordText {
			border: 1px solid #fff;
			width: 80px;
			padding: 8px 0;
			text-align: center;
			font-size: 12px;
			cursor: pointer;
			background: #f2f2f2;
			color: #e0e0e0;
			margin:3px;
		}
		
		.recordText.active {
			background: $activeColor;
			color: #fff;
		}
	}
</style>
