 <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 slot-scope="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>

<script>
// 权益的ID：
/**
 * 科技-主观(20)-客观(37)
 * 消费-主观(21)-客观(38)
 * 医药-主观(22)-客观(39)
 * 智造-主观(19)-客观(36)
 * 策略(23)
 * 专家(29)
 * 固收(53)
 * 调研(54)
 * 路演服务(30)
 * 研选订阅(31)
 * 研选扣点包(52)
 */
import { customInterence } from '@/api/api.js'
export default {
	name:'',
	props:{
		id: {
			type:Number,
		},
		autharr:{
			type:Array,
			default:[]
		}
	},
	watch: {
		autharr(value){
			// console.log(value,'valuevaluevaluevalue');
			if(value[0] && value[0].customType=='权益') this.qyCheckList = value[0].CheckList
		},
		qyCheckList(value){
			let checkedIds=value||[]
			// 根据复选框选择的情况 改变医药、消费、科技、智造、主客观复选框的状态
			this.autharr[0].dataList.map(it =>{
				if(it.PermissionTypeName&&it.PermissionTypeName.value){
					let idArr = [...checkedIds,...it.PermissionTypeName.ids]
					let idArrLen = idArr.length
					// 去重后的
					let idRemovalArrLen = [...new Set(idArr)].length
					it.PermissionTypeName.isCheckAll = idArrLen-idRemovalArrLen == it.PermissionTypeName.ids.length
					it.PermissionTypeName.isIndeterminate = idArrLen-idRemovalArrLen < it.PermissionTypeName.ids.length && 
																									idArrLen-idRemovalArrLen > 0					
				}else{
					Object.values(it).forEach(permission =>{
						if(permission.bothIds && permission.bothIds.length>1){
							// 有主客观的
							let idArr = [...checkedIds,...permission.bothIds]
							let idArrLen = idArr.length
							// 去重后的
							let idRemovalArrLen = [...new Set(idArr)].length
							permission.isCheckAll = idArrLen-idRemovalArrLen == permission.bothIds.length
							permission.isIndeterminate = idArrLen-idRemovalArrLen < permission.bothIds.length && 
																											idArrLen-idRemovalArrLen > 0
						}
					})
				}
			})
		}
	},
	data () {
		return {
			qyCheckList:[]
		};
	},
	methods: {
		/* 确认新增 */
		addHandle() {
			let checkArr = [];
			// ficc和权益合并
			if(this.autharr[0] && this.autharr[0].RaiMerge != 2){
				this.autharr.forEach(item => {
					if(item.CheckList.length) {
						checkArr.push(item.CheckList)
					}
				})
			}else{
				// 权益拆分
				checkArr = this.qyCheckList
			}
			customInterence.addTryout({
				CompanyId:this.id,
				ChartPermissionId:checkArr.join()
			}).then(res => {
				if(res.Ret===200) {
					this.$message.success(res.Msg)
					this.$emit('addOver')
				}
			})
		},
		/* 选择全选或取消全选 */
		handleCheckAll(item) {
			// 取到所有的子菜单id
			let ids = item.Items.map(item =>{
				return item.ChartPermissionId
			})
			item.CheckList = item.checkAll ? ids : [];
        	item.isIndeterminate = false;
		},
		/* 复选框組选中时 */
		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;
		},
		// 权益选择套餐方法
		// 合并单元格
		spanMethod({ row, rowIndex, column,columnIndex  }){
			if(Object.values(row)[columnIndex].merge){
				if(rowIndex == 1){
					return [2,1]
				}else if(rowIndex == 2){
					return [0,0]
				}
			}
		},
		handleCheckQY(item){
			// 全选
			if(item.isCheckAll){
				if(["客观","主观"].includes(item.value)){
					this.qyCheckList = [...new Set([...this.qyCheckList,...item.ids])]
				}else{
					this.qyCheckList = [...new Set([...this.qyCheckList,...item.bothIds])]
				}
			}else{ //全部不选
				if(["客观","主观"].includes(item.value)){
					item.ids.map(pId =>{
						// 需要删除的索引
						let deleteIndex = this.qyCheckList.findIndex(id=> id==pId && !(this.autharr[0].defaultAuth.includes(id)));
						if(deleteIndex!=-1) this.qyCheckList.splice(deleteIndex,1)
					})
				}else{
					item.bothIds.map(pId =>{
						// 需要删除的索引
						let deleteIndex = this.qyCheckList.findIndex(id=> id==pId && !(this.autharr[0].defaultAuth.includes(id)));
						if(deleteIndex!=-1) this.qyCheckList.splice(deleteIndex,1)
					})
				}
			}
		}
	},
	created() {},
	mounted() {},
}
</script>
<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>