<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { customInterence } from '@/api/api.js'


const props = defineProps({
  id: {
    type:Number,
  },
  autharr:{
    type:Array,
    default:[]
  }
})
const emit = defineEmits(['addOver','close'])


const qyCheckList = ref([])
/* 确认新增 */
function addHandle() {
	let checkArr = [];
	// ficc和权益合并
	if(props.autharr[0] && props.autharr[0].RaiMerge != 2){
		props.autharr.forEach(item => {
			if(item.CheckList.length) {
				checkArr.push(item.CheckList)
			}
		})
	}else{
		// 权益拆分
		checkArr = qyCheckList.value
	}
	customInterence.addTryout({
		CompanyId:props.id,
		ChartPermissionId:checkArr.join()
	}).then(res => {
		if(res.Ret===200) {
			ElMessage.success(res.Msg)
			emit('addOver')
		}
	})
}

/* 选择全选或取消全选 */
function handleCheckAll(item) {
	// 取到所有的子菜单id
	let ids = item.Items.map(item =>{
		return item.ChartPermissionId
	})
	item.CheckList = item.checkAll ? ids : [];
			item.isIndeterminate = false;
}

/* 复选框組选中时 */
function handleChecked(item) {
	if(item.RaiMerge==1){
		// 权益合并
		item.Items.map((it,i)=>{
			if(item.CheckList.includes(it.ChartPermissionId) && it.PermissionType==1){
				// 主观被选上，将客观的ID也push上
				let ob=item.Items.find(pe => pe.PermissionName == it.PermissionName && pe.PermissionType==2)
				item.CheckList.push(ob?ob.ChartPermissionId:0)
			}else if(!item.CheckList.includes(it.ChartPermissionId) && it.PermissionType==1){
				// 主观被去除，将客观的ID也去除
				let ob=item.Items.find(pe => pe.PermissionName == it.PermissionName && pe.PermissionType==2)
				let obIndex = item.CheckList.indexOf(ob?ob.ChartPermissionId:0)
				if(obIndex!=-1){
					item.CheckList.splice(obIndex,1)
				}
			}
		})
	}
	item.CheckList = [...new Set(item.CheckList)]
	let len = item.Items.filter(it => item.CheckList.includes(it.ChartPermissionId)).length
	item.checkAll = len === item.Items.length;
	item.isIndeterminate = len > 0 && len < item.Items.length;
}

// 权益选择套餐方法
// 合并单元格
function spanMethod({ row, rowIndex, column,columnIndex  }){
	if(Object.values(row)[columnIndex].merge){
		if(rowIndex == 1){
			return [2,1]
		}else if(rowIndex == 2){
			return [0,0]
		}
	}
}

function handleCheckQY(item){
	// 全选
	if(item.isCheckAll){
		if(["客观","主观"].includes(item.value)){
			qyCheckList.value = [...new Set([...qyCheckList.value,...item.ids])]
		}else{
			qyCheckList.value = [...new Set([...qyCheckList.value,...item.bothIds])]
		}
	}else{ //全部不选
		if(["客观","主观"].includes(item.value)){
			item.ids.map(pId =>{
				// 需要删除的索引
				let deleteIndex = qyCheckList.value.findIndex(id=> id==pId && !(props.autharr[0].defaultAuth.includes(id)));
				if(deleteIndex!=-1) qyCheckList.value.splice(deleteIndex,1)
			})
		}else{
			item.bothIds.map(pId =>{
				// 需要删除的索引
				let deleteIndex = qyCheckList.value.findIndex(id=> id==pId && !(props.autharr[0].defaultAuth.includes(id)));
				if(deleteIndex!=-1) qyCheckList.value.splice(deleteIndex,1)
			})
		}
	}
}


</script>
<template>
<div class="CauthList_container" >
		<span style="fontSize:16px;">请选择新增试用的品种：</span>
		<!-- 权益合并的和FICC -->
		<ul class="menu_lists" style="marginBottom:40px;" v-if="autharr[0] && autharr[0].RaiMerge != 2">
			<li v-for="item in autharr" :key="item.ClassifyName" class="menu_item">
				<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="item.defaultAuth.length" style="marginRight:30px;fontWeight:bold;minWidth:90px;" @change="handleCheckAll(item)">{{item.ClassifyName+':'}}</el-checkbox>
				<el-checkbox-group v-model="item.CheckList"  @change="handleChecked(item)">
					<!-- PermissionType 为2 代表的是权益区分主客观的客观 1表示权益区分主客观的主观 0表示为不区分主客观的行业包括FICC的 -->
					<el-checkbox v-for="list in item.Items.filter(it => it.PermissionType!=2)" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item" :disabled="item.defaultAuth.indexOf(list.ChartPermissionId)!=-1" >{{list.PermissionName}}</el-checkbox>
				</el-checkbox-group>
			</li>
		</ul>
		<!-- 权益拆分 -->
		<div v-if="autharr[0] && autharr[0].RaiMerge == 2" class="qy_menuList">
			<el-table :data="autharr[0].dataList" :show-header="false" border :span-method="spanMethod">
				<el-table-column align="center" :width="autharr[0].dataList[0][key].width?autharr[0].dataList[0][key].width:''" 
				v-for="key in Object.keys(autharr[0].dataList[0])" :key="key">
					<template #default="scope">
						<!-- 主客观 区分的品种+复选框-->
						<el-checkbox :label="scope.row[key].value" @change="handleCheckQY(scope.row[key])"
						v-model="scope.row[key].isCheckAll" :disabled="scope.row[key].isDisabled"
						:indeterminate="scope.row[key].isIndeterminate"
						v-if="(scope.row[key].ids && scope.row[key].ids.length) || (scope.row[key].bothIds&& scope.row[key].bothIds.length)"></el-checkbox>
						<!-- 不区分 只有复选框-->
						<el-checkbox-group v-model="qyCheckList" v-else-if="typeof(scope.row[key].value)=='number'">
							<el-checkbox :label="scope.row[key].value" class="checkbox-flex"
							:disabled="scope.row[key].isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
						<!-- 只有品种名称 -->
						<template v-else>
							{{scope.row[key].value}}
						</template>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div style="display:flex;justify-content:center;margin:75px 0 26px;">
			<el-button type="primary" style="width:80px;marginRight:24px;" @click="addHandle">确定</el-button>
			<el-button  style="width:80px;" @click="emit('close')">取消</el-button>
		</div>
</div>
</template>
<style lang='scss' scoped>
.CauthList_container {
	.menu_lists {
		padding: 30px 0;
		border-radius: 4px;
		.menu_item {
			display: flex;
			// align-items: center;
			margin-bottom: 30px;
			&:last-child {
				margin-bottom: 0;
			}
			.list_item {
				margin-right: 20px;
				margin-bottom: 10px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	.qy_menuList{
		margin-top:45px;
		.checkbox-flex{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>