<template>
	<div class="pickCustom_container">
		<div class="left_form_cont">
			<ul class="detail_item">
				<li>
					<label style="marginRight:60px;width:80px;textAlign:right;display:inline-block;">客户名称</label>
					<span style="width:400px;display:inline-block;">{{basicInfo.custom_name}}</span>
				</li>
				<li>
					<label style="marginRight:60px;width:80px;textAlign:right;display:inline-block;">社会信用码</label>
					<span style="width:400px;display:inline-block;">{{basicInfo.code}}</span>
				</li>
				<li>
					<label style="marginRight:60px;width:80px;textAlign:right;display:inline-block;">客户地址</label>
					<span style="width:400px;display:inline-block;">{{basicInfo.province+'/'+basicInfo.city}}</span>
				</li>
				<li>
					<label style="marginRight:60px;width:80px;textAlign:right;display:inline-block;">客户状态</label>
					<el-radio border :label="basicInfo.cuStatus" style="width:184px;marignRight:200px;" v-model="basicInfo.cuStatus">{{basicInfo.cuStatus=='试用'?'试用（2个月）':basicInfo.cuStatus}}</el-radio>
				</li>
				<li>
					<label style="marginRight:60px;width:80px;textAlign:right;display:inline-block;">客户类型</label>
					<span style="width:400px;display:inline-block;">{{basicInfo.custype}}</span>
				</li>
				<li>
					<label style="marginRight:60px;width:80px;textAlign:right;display:inline-block;">行业</label>
					<span style="width:400px;display:inline-block;">{{basicInfo.trade}}</span>
				</li>
				<li>
					<label style="marginRight:60px;width:80px;textAlign:right;display:inline-block;">客户来源</label>
					<span style="width:400px;display:inline-block;">{{basicInfo.from}}</span>
				</li>
				<li>
					<label style="marginRight:60px;width:80px;textAlign:right;display:inline-block;">所属销售</label>
					<span style="width:400px;display:inline-block;">{{basicInfo.sales}}</span>
				</li>
				<!-- <li style="width:90%;">
					<label style="marginRight:60px;width:80px;textAlign:right;display:inline-block;">备注</label>
					<span style="display:inline-block;">{{basicInfo.addreason}}</span>
				</li> -->
				<li class="textarea_item" style="width:90%;paddingLeft:15px;">
					<label style="display:block;marginBottom:20px;fontSize:16px;position:relative;">
						权限设置
					</label>
					<ul class="menu_lists">
						<li v-for="item in authList" :key="item.ClassifyName" class="menu_item">
							<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" disabled style="marginRight:30px;fontWeight:bold;">{{item.ClassifyName+':'}}</el-checkbox>
							<el-checkbox-group v-model="item.CheckList" disabled>
								<el-checkbox v-for="list in item.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item">{{list.PermissionName}}</el-checkbox>
							</el-checkbox-group>
						</li>
					</ul>
				</li>
			</ul>
			<!-- 可折叠form -->
			<el-collapse v-model="activeNames" @change="handleChange" style="width:93%;marginTop:50px;">
				<el-collapse-item :title="basicInfo.custype=='ficc'?'权益属性配置':'ficc属性配置'" name="1">
					<el-form
					@submit.native.prevent 
					inline
					:model="pickForm" 
					:rules="formRule"
					hide-required-asterisk
					ref="pickForm" 
					label-width="100px" 
					class="demo-ruleForm">
						<el-form-item label="客户来源" prop="from" style="marginRight:120px;">
								<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
								<el-select v-model="pickForm.from" placeholder="请选择客户来源" style="width:400px;" filterable>
									<el-option
										v-for="item in fromArr"
										:key="item.SourceId"
										:label="item.SourceName"
										:value="item.SourceName">
									</el-option>
								</el-select>
							</el-form-item>
						<el-form-item label="客户状态" prop="cuStatus">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<el-radio-group v-model="pickForm.cuStatus" size="medium">
								<el-radio border label="试用" style="width:184px;">试用（2个月）</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="客户类型" prop="custype" style="marginRight:120px;">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<span style="width:400px;display:inline-block;fontSize:16px;color:#666;">{{pickForm.custype}}</span>
						</el-form-item>
						<el-form-item label="行业" prop="trade">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-58px;top:10%;">*</i>
							<el-select v-model="pickForm.trade" placeholder="请选择行业" style="width:400px;">
								<el-option
									v-for="item in tradeArr"
									:key="item"
									:label="item.IndustryName"
									:value="item.IndustryId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="所属销售" prop="sales">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<el-select v-model="pickForm.sales" placeholder="请选择销售" style="width:400px;" filterable :disabled="Role=='rai_seller'||Role=='ficc_seller'">
								<el-option
									v-for="item in salesArr"
									:key="item.AdminId"
									:label="item.RealName"
									:value="item.AdminId">
								</el-option>
							</el-select>
						</el-form-item>
						<!-- <el-form-item prop="addreason" class="textarea_item" style="width:96%;paddingLeft:26px;">
							<label style="display:block;marginBottom:20px;fontSize:16px;position:relative;color:#666;">
								<i style="color:#f00;fontSize:20px;position:absolute;left:-15px;top:10%;">*</i>
								备注
							</label>
							<el-input type="textarea" v-model="pickForm.addreason" rows="3" style="width:100%;" placeholder="输入理由"></el-input>
						</el-form-item> -->
						<el-form-item class="textarea_item" style="width:96%;paddingLeft:26px;">
							<label style="display:block;marginBottom:20px;fontSize:16px;position:relative;color:#666;">
								<i style="color:#f00;fontSize:20px;position:absolute;left:-15px;top:10%;">*</i>
								权限设置
							</label>
							<ul class="menu_lists">
								<li v-for="item in authList2" :key="item.ClassifyName" class="menu_item">
									<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="item.ClassifyName === '宏观经济'" @change="handleCheckAll(item)" style="marginRight:30px;fontWeight:bold;">{{item.ClassifyName+':'}}</el-checkbox>
									<el-checkbox-group v-model="item.CheckList" @change="handleChecked(item)">
										<el-checkbox v-for="list in item.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item" :disabled="list.ChartPermissionId==1">{{list.PermissionName}}</el-checkbox>
									</el-checkbox-group>
								</li>
							</ul>
						</el-form-item>
					</el-form>
				</el-collapse-item>
			</el-collapse>
			<div style="display:flex;justify-content:center;margin:40px 0 0;">
				<el-button type="primary" style="width:80px;marginRight:24px;" @click="saveHandle">确定</el-button>
				<el-button type="primary" plain style="width:80px;" @click="cancelPick">取消</el-button>
			</div>
		</div>
		<!-- 添加联系人弹窗 -->
		<Contactdia
		:id="companyId"
		:title="'新增联系人'"
		:userForm="diaform"
		:custom_name="basicInfo.custom_name"
		:needCard="true"
		:isPickOther="true"
		:isShowclose="isShowclose"
		:regionType="regionType"
		:isAddContact="isAddContact"
		@cancel="cancelConcatdia">
		</Contactdia>
	</div>
</template>

<script>
import { customInterence } from '@/api/api.js'
import Contactdia from '../compontents/Contactdialog'
export default {
	name:'',
	components: {Contactdia},
	watch: {
		'pickForm.custype': {
			handler() {
				this.getIndustry();
			}
		}
	},
	computed:{
		Role() {
			let role = localStorage.getItem('Role') || '';
			return role;
		},
	},	
	data () {
		return {
			companyId:this.$route.query.id,
			activeNames:['1'],//默认展开
			pickForm:{
				cuStatus:'试用',
				custype:'',
				trade:'',
				from:'',
				sales:'',
				addreason:''
			},
			basicInfo:{},//领取的客户基本信息
			tradeArr:[],
			formRule:{
				/* 客户名称 */
				custom_name:[
					{ required: true, message: '客户名称不能为空', trigger: 'blur' },
				],
				/* 社会信用码 */
				code:[
					{ required: true, message: '社会信用码不能为空', trigger: 'blur' },
				],
				/* 客户状态 */
				cuStatus:[
					{ required: true, message: '客户状态不能为空', trigger: 'blur' },
				],
				/* 客户类型 */
				custype:[
					{ required: true, message: '客户类型不能为空', trigger: 'blur' },
				],
				/* 行业 */
				trade:[
					{ required: true, message: '行业不能为空', trigger: 'blur' },
				],
				/* 客户来源 */
				from:[
					{ required: true, message: '客户来源不能为空', trigger: 'blur' },
				],
				/* 销售 */
				sales:[
					{ required: true, message: '所属销售不能为空', trigger: 'blur' },
				],
				/* 备注 */
				// addreason:[
				// 	{ required: true, message: '备注不能为空', trigger: 'blur' },
				// ],
			},
			fromArr:[],//客户来源
			salesArr:[],//销售列表
			authList:[],//权限列表1
			authList2:[],
			diaform:{
				name:'',
				sex:1,
				telCode:'86',
				tel1:'',
				tel2:'',
				mail:'',
				post:'',
				desiger:'',
				depart:'',
				carte:'',
				Source:'pick_custom',
			},
			isAddContact:false,//是否添加联系人
			isShowclose:false,//是否显示取消
			regionType:'',

			citiesEquity:[],
			citiesListEquity:[],
		};
	},
	methods: {
		/* 获取客户来源数据 */
		getCustomerSourceList(){
			customInterence.customerSourceList({}).then(res=>{
				if(res.Ret===200){
					this.fromArr=res.Data.List
				}
			})
		},
		/* 获取客户详情信息 */
		getDetail() {
			customInterence.customDetail({
				CompanyId:this.companyId
			}).then(res => {
			
				if(res.Ret === 200) {
					this.regionType=res.Data.Item.RegionType
					
					let ficcform = res.Data.FiccItem;//ficc添加的信息
					let basicform = res.Data.Item;//客户基本信息
					let raiform = res.Data.RaiItem;//权益添加的信息
					/* 基础表单 */
					this.basicInfo = {
						custom_name:basicform.CompanyName,
						code:basicform.CreditCode,
						province:basicform.Province,
						city:basicform.City,
						CompanyProductId:res.Data.CreateAuth == 1?ficcform.CompanyProductId:raiform.CompanyProductId,
						cuStatus:res.Data.CreateAuth == 1?ficcform.Status:raiform.Status,
						custype:res.Data.CreateAuth == 1?'ficc':'权益',
						trade:res.Data.CreateAuth == 1?ficcform.IndustryName:raiform.IndustryName,
						from:res.Data.CreateAuth == 1?ficcform.Source:raiform.Source,
						sales:res.Data.CreateAuth == 1?ficcform.SellerName:raiform.SellerName,
						addreason:res.Data.CreateAuth == 1?ficcform.Reasons:raiform.Reasons
					}
					this.pickForm.custype = this.basicInfo.custype=='ficc'?'权益':'ficc';
					if(res.Data.CreateAuth == 1) { //ficc创建客户
						/* 处理权限列表格式 */
						let auth = [];
						ficcform.PermissionList.forEach(item=> {
							let obj = {
								checkAll:item.CheckList&&item.CheckList.length===item.Items.length?true:false,
								isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Items.length,
								...item,
							}
							auth.push(obj)
						})
						this.authList = auth;
					}else if (res.Data.CreateAuth == 2){ //权益创建客户
						/* 处理权限列表格式 */
						let auth = [];
						raiform.PermissionList.forEach(item=> {
							let obj = {
								checkAll:item.CheckList&&item.CheckList.length===item.Items.length?true:false,
								isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Items.length,
								...item,
							}
							auth.push(obj)
						})
						this.authList = auth;
					}

					this.getAuthBasic();
				}
			})
		},
		/* 获取基本权限信息 */
		getAuthBasic() {
			customInterence.authList({
				NoUpgrade:true
			}).then(res => {
				if(res.Ret === 200) {
					let newArr = [];
					res.Data.List.length&&res.Data.List.forEach(item => {
						let obj = {
							checkAll:false,
							isIndeterminate:item.ClassifyName === '宏观经济'?true:false,
							...item,
						}
						newArr.push(obj)
					})
					this.authList2 = newArr;
				}
			})
		},
		/* 获取销售 */
		getSale() {
			customInterence.saleslist().then(res => {
				if(res.Ret === 200) {
					this.salesArr = res.Data.List;
				}
			})
		},
		/* 根据类型获取行业 */
		getIndustry() {
			customInterence.getindustry({
				Classify:this.pickForm.custype
			}).then(res => {
				if(res.Ret === 200) {
					this.tradeArr = res.Data.List || [];
				}
			})
		},
		/* 确定 */
		saveHandle() {
			this.$refs.pickForm.validate((valid) => {
				if (valid) {
					// let flag=this.authList2.some(item=>{
					// 	return item.isIndeterminate
					// })
					
					//判断是否选择了权限，默认勾选的也算上
					let checkArr = [];
					this.authList2.forEach(item => {

						// if(item.ClassifyName!=='宏观经济'&&item.CheckList.length) {
						// 	checkArr.push(item.CheckList)
						// }
						// if(item.ClassifyName==='宏观经济'&&item.checkAll){
						// 	checkArr.push(item.CheckList)
						// }
						checkArr.push(...item.CheckList)
					})
					console.log(checkArr);
					
					if(!checkArr.length) {
						this.$message.warning('请选择权限')
						return
					}
					this.isAddContact = true;
					// let checkArr = [];
					// this.authList2.forEach(item => {
					// 	if(item.CheckList.length) {
					// 		checkArr.push(item.CheckList)
					// 	}
					// })
					// if(checkArr.length) {
					// 	let PermissionIds = checkArr.flat(2).join(',');
					// 	let params = {
					// 		CompanyId: Number(this.companyId),
					// 		IndustryId: this.pickForm.trade,
					// 		Reasons: this.pickForm.addreason,
					// 		SellsId: this.pickForm.sales,
					// 		Source: this.pickForm.from,
					// 		Status: this.pickForm.cuStatus,
					// 		CompanyType:this.pickForm.custype,
					// 		PermissionIds
					// 	}
					// 	customInterence.Pick(params).then(res => {
					// 		if(res.Ret === 200) {
					// 			this.$message.success(res.Msg);
					// 			this.$router.go(-1);
					// 		}
					// 	})
					// }else {
					// 	this.$message.warning('权限设置不能为空')
					// }
				}
			})
		},
		/* 添加联系人之后再领取客户 */
		cancelConcatdia(type) {
			
			this.isAddContact = false;
			if(type === 1) {
				let checkArr = [];
				this.authList2.forEach(item => {
					if(item.CheckList.length) {
						checkArr.push(item.CheckList)
					}
				})
				if(checkArr.length) {
					let PermissionIds = checkArr.flat(2).join(',');
					let params = {
						CompanyId: Number(this.companyId),
						IndustryId: this.pickForm.trade,
						Reasons: this.pickForm.addreason,
						SellsId: this.pickForm.sales,
						Source: this.pickForm.from,
						Status: this.pickForm.cuStatus,
						CompanyType:this.pickForm.custype,
						PermissionIds
					}
					customInterence.Pick(params).then(res => {
						if(res.Ret === 200) {
							this.$message.success(res.Msg);
							this.$router.go(-2);
						}
					})
				}else {
					this.$message.warning('权限设置不能为空')
				}
			}else {
				this.$message.warning('领取失败')
			}
		},
		/* 选择行业先校验是否选择了客户类型提示  */
		slideTrade(e) {
			if(!this.pickForm.custype) {
				this.$message.warning('请先选择客户类型！')
			}
		},
		/* 取消 */
		cancelPick() {
			this.$router.go(-1);
		},
	/* 选择全选或取消全选 */
		handleCheckAll(item) {
			// 取到所有的子菜单id
			let ids = item.Items.map(item =>{
				return item.ChartPermissionId
			})
			item.CheckList = item.checkAll ? ids : [];
        	item.isIndeterminate = false;
		},
		/* 复选框組选中时 */
		handleChecked(item) {
			let len = item.CheckList.length;
			item.checkAll = len === item.Items.length;
			item.isIndeterminate = len > 0 && len < item.Items.length;
		},
	},
	created() {},
	mounted() {
		this.getDetail();
		// this.getAuthBasic();
		this.getSale();
		this.getCustomerSourceList()
		/* 默认销售 */
		this.pickForm.sales = Number(localStorage.getItem('AdminId')) || '';
	},
}
</script>
<style lang='scss'>
.pickCustom_container {
	padding:30px 40px 60px 60px;
	background: #fff;
	position: relative;
	border: 1px solid #ECECEC;
	border-radius: 4px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	font-size: 16px;
	color: #666;
	/* reset */
	.el-collapse {
		border: none;
	}
	.el-collapse-item__header {
		display: block;
		border: none;
		font-size: 16px;
		color: #333;
	}
	.el-collapse-item__wrap {
		border: none;
	}
	.textarea_item .el-form-item__content {
		width: 100%;
	}
	.el-form-item .el-checkbox-group {
		height: 40px;
		line-height: 40px;
	}
	.el-collapse-item__header {
		margin-bottom: 20px;
	}
	/*  */
	.detail_item {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		li {
			font-size: 16px;
			color: #666;
			margin-bottom: 30px;
			min-width: 545px;
			margin-right: 30px;
			&:last-child {
				margin-bottom: 0;
			}
			// display: flex;
			// align-items: center;
		}
	}
	.menu_lists {
		padding: 40px 18px;
		border: 1px dashed #AAB4CC;
		border-radius: 4px;
		.menu_item {
			display: flex;
			// align-items: center;
			margin-bottom: 40px;
			&:last-child {
				margin-bottom: 0;
			}
			.list_item {
				margin-right: 30px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}
</style>