<script setup>
import { computed, reactive, ref } from 'vue'
import { useRoute,useRouter,onBeforeRouteLeave } from 'vue-router'
import $ from 'jquery'
import { ElMessage,ElMessageBox,ElImageViewer } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { customInterence,mychartInterface } from '@/api/api.js'
import{ customAllInterence } from '@/api/modules/crmApi.js'
import { useList,useReadia } from "./hooks/customlistHook";
import Ctimeline from './components/Ctimeline.vue'
import Contactdia from './components/Contactdialog.vue'
import Readia from './components/ReadDialog.vue'
import CpessionTableEquity from './components/CpessionTableEquity.vue'
import CpessionTable from './components/CpessionTable.vue'
import chartAuthDialog from './components/chartAuthDialog.vue'
import ExportData from './components/exportData.vue'
import ProductReadInfo from './components/ProductReadInfo.vue'
import DeductDetailDlg from './components/deductDetailDlg.vue'
import HistoryContract from './components/historyContract.vue'
// import pdf from 'vue-pdf'


onBeforeRouteLeave((to, from, next) => {
	from.matched[0].name='客户管理'
	next()
})

const $route = useRoute()
const $router = useRouter()

//下载模板
const downTemplate = computed(() => {
	return import.meta.env.VITE_APP_API_ROOT+'/custom/template?'+localStorage.getItem('auth')||''
}) 

const { 
  Role,
  RaiSellerRole,
  RoleType,
} = useList();


const showData = ref(true)
const companyId = ref($route.query.id||0)
const exportDataIsShow = ref(false)
const raiCollapseOpen = ref('0')//1展开 0 收起
const ficcCollapseOpen = ref('0')// 1展开 0 收起
const IsFullCompany = ref(Number($route.query.IsFullCompany)||0)
const isContractButtonShow = ref(true) //不是同一销售不允许操作 //true 默认可以操作
const isUserYanXuanButtonShow = ref(false)//是否显示研选的按钮以及表格
async function getDetail() {
		const res = IsFullCompany.value
				? await customAllInterence.customDetail({
					CompanyId:companyId.value
				})
				: await customInterence.customDetail({
					CompanyId:companyId.value
				})

		if(res.Ret!==200) return 
		isContractButtonShow.value=res.Data.IsContractButtonShow
		isUserYanXuanButtonShow.value = res.Data.IsUserYanXuanButtonShow
		formatCustomDetail(res)
}
getDetail()

const regionType = ref('')
const isBtnShow = ref({
	BtnEdit:'',
	BtnDelete:'',
})
const	basicform = ref(null)
const ficcform = ref(null)
const	raiform = ref(null)
const dataForm = ref(null)
const dataForm2 = ref(null)
const	authList = ref([])//权限列表1
const	authList2 = ref([])
const companyStatus = ref("")// 删除联系人时根据此状态判断是否为 试用、正式、永续
function formatCustomDetail(res){
		showData.value = true;
		isBtnShow.value = res.Data.BtnItem;
		regionType.value=res.Data.Item.RegionType

		basicform.value = {...res.Data.Item,CreateAuth:res.Data.CreateAuth};//客户基本信息
		ficcform.value = res.Data.FiccItem;//ficc添加的信息
		raiform.value = res.Data.RaiItem;//权益添加的信息

		// 处理ficc权限列表格式
		if(res.Data.FiccItem){
			let auth = [];
			res.Data.FiccItem.PermissionList.forEach(item=> {
				item.Items=item.Items||[]
				item.CheckList=item.CheckList||[]
				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)
			})
			ficcform.value={...ficcform.value,authList:auth}
		}
		// 处理权益权限列表格式
		if(res.Data.RaiItem){
			let auth = [];
			res.Data.RaiItem.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)
			})
			raiform.value={...raiform.value,authList:auth}
		}

		companyStatus.value=res.Data.CreateAuth == 1?ficcform.value.Status:raiform.value.Status
	
		
		/* 基础表单 */
		dataForm.value = {
			area:basicform.value.RegionType,
			custom_name:basicform.value.CompanyName,
			code:basicform.value.CreditCode,
			province:basicform.value.Province,
			city:basicform.value.City,
			cuStatus:res.Data.CreateAuth == 1?ficcform.value.Status:raiform.value.Status,
			custype:res.Data.CreateAuth == 1?'ficc':'权益',
			trade:res.Data.CreateAuth == 1?ficcform.value.IndustryName:raiform.value.IndustryName,
			from:res.Data.CreateAuth == 1?ficcform.value.Source:raiform.value.Source,
			sales:res.Data.CreateAuth == 1?ficcform.value.SellerName:raiform.value.SellerName,
			addreason:res.Data.CreateAuth == 1?ficcform.value.Reasons:raiform.value.Reasons
		}
		if(res.Data.CreateAuth == 1) { //ficc创建客户
			/* 处理权限列表格式 */
			let auth = [];
			ficcform.value.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)
			})
			authList.value = auth;
			// 
			if(raiform.value) {
				dataForm2.value = {
					cuStatus:raiform.value.Status,
					custype:'权益',
					trade:raiform.value.IndustryName,
					from:raiform.value.Source,
					sales:raiform.value.SellerName,
					addreason:raiform.value.Reasons,
				}
				/* 处理权限列表格式 */
				let auth2 = [];
				raiform.value.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,
					}
					auth2.push(obj)
				})	
				authList2.value = auth2;
			}
		}else if (res.Data.CreateAuth == 2){ //权益创建客户
			// /* 基础表单 */

			/* 处理权限列表格式 */
			let auth = [];
			raiform.value.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)
			})
			authList.value = auth;
			//
			if(ficcform.value) {
				dataForm2.value = {
					cuStatus:ficcform.value.Status,
					custype:'ficc',
					trade:ficcform.value.IndustryName,
					from:ficcform.value.Source,
					sales:ficcform.value.SellerName,
					addreason:ficcform.value.Reasons
				};
				/* 处理权限列表格式 */
				let auth2 = [];
				ficcform.value.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,
					}
					auth2.push(obj)
				})
				authList2.value = auth2;
			}
		}
}


const platformOption = ref([])
const platform_type = ref(1)
const subProductName = ref('')//分产品名称 
/* 获取分产品的几种类型 */
function getSubProductList() {
	customInterence.getSubProduct({StatisticFlag:true}).then(res => {
		if(res.Ret !== 200) return
		
		res.Data.forEach(item => {
			item.key = `${item.ProductType}-${item.ProductId}`
		})
		platformOption.value = res.Data;
		platform_type.value = `${res.Data[0].ProductType}-${res.Data[0].ProductId}`;
		subProductName.value = res.Data[0].ProductName;
		
		getuserTable();
	})
}
getSubProductList()



const page_no = ref(1)
const search_txt = ref('')
const IsSubscribe = ref([])//是否关注公众号
const userTable = ref([])//联系人表格
const	total = ref(1)
const	isAddContact = ref(false)//联系人弹窗
const userId = ref(0)//联系人id
const	diaform = ref({
	companyName:'',
	name:'',
	sex:1,
	telCode:'86',
	tel1:'',
	tel2:'',
	mail:'',
	post:'',
	desiger:'',
	depart:'',
	carte:'',
	mailQY:'',
	telQY:'',
	Source:'add_user',
})//联系人表单
const defaultName = ref('')//默认公司名称
const diatit = ref('新增联系人')
const productName = ref('')
/* 获取联系人列表 */
function getuserTable() {
	const subProductArr = platform_type.value.split('-');
	customInterence.concactList({
		PageSize:10,
		CurrentIndex:page_no.value,
		CompanyId:companyId.value,
		KeyWord:search_txt.value,
		ProductType: Number(subProductArr[0]),
		ProductId: Number(subProductArr[1]),
		IsSubscribeHzyj:IsSubscribe.value.includes('1')?1:IsSubscribe.value.includes('2')?0:'',
		IsSubscribeCygx:IsSubscribe.value.includes('3')?1:IsSubscribe.value.includes('4')?0:'',
	}).then(res => {
		if(res.Ret === 200) {
			userTable.value = res.Data.List || [];
			total.value = res.Data.Paging.Totals
		}else {
			userTable.value = []
		}
	})
}
/* 搜索联系人 */
function searchUser() {
	page_no.value = 1;
	getuserTable();
}

function changeSubscribe(){
	search_txt.value = '';
	getuserTable();
}

/* 页码改变 */
function handleCurrentChange(page) {
	page_no.value  = page;
	getuserTable();
}

function changeSubProductHandle(val) {
	search_txt.value = '';
	let obj = platformOption.value.find(_ =>_.key === val);
	subProductName.value = obj.ProductName;
	getuserTable();
}

/* 新增联系人 */
function addConcat() {
	
	diaform.value.companyName = dataForm.value.custom_name;
	defaultName.value = dataForm.value.custom_name;
	isAddContact.value = true;
	diatit.value = '新增联系人'
	// 客户ID
	
	customInterence.customDetail({
		CompanyId: window.location.search.split("=")[1]
	}).then((res) =>{
		// 得知用户是FICC或是权益
	
		productName.value =res.Data.ProductName;
	}).catch((err)=>{
	})
}
/* 编辑联系人 */
function editContact(item) {
	defaultName.value = item.CompanyName;
	diaform.value = {
		companyName:item.CompanyName,
		name:item.RealName,
		sex:item.Sex,
		telCode:item.CountryCode,
		tel1:item.Mobile,
		tel2:item.MobileTwo||'',
		mail:item.Email||'',
		post:item.Position||'',
		desiger:item.IsMaker,
		depart:item.DepartmentName,
		carte:item.BusinessCardUrl,
		mailQY:item.Email,
		telQY:item.Mobile
	}

	userId.value = item.UserId;
	isAddContact.value = true;
	diatit.value = '编辑联系人';
}

// 关注与取消关注
function followContact(row){

	let isFollow = row.IsFollow==1
	let confirmText = isFollow?'是否取消':'是否设为'
	ElMessageBox.confirm(`${confirmText}特别关注？`, "提示", {
		type: "warning",
	}).then(() => {
		let params={
			UserId:row.UserId,
			CompanyId:row.CompanyId,
			Type:isFollow?0:1
		}
		customInterence.concactFollow(params).then(res=>{
			if(res.Ret == 200){
				ElMessage.success(isFollow?"取消成功":"关注成功")
				getuserTable()
			}
		})

	})
	.catch(() => {});
}

// 删除联系人判断 试用、正式、永续、冻结状态下的客户 如只剩一个联系人不允许删除
/**
 * 1.如果是非管理员用户则直接根据数量判断
 * 2.如果是管理员 根据该联系人数据中的ProductIds 判断
 * 		
 */
async function beforeDelConcat(e){
	let tag=true

	if(['试用','正式','永续','冻结'].includes(companyStatus.value)){
		const roleType=localStorage.getItem('RoleType')
		if(roleType!='admin'){
			let res=await customInterence.companyUserTotal({CompanyId:companyId.value})
			if(res.Ret==200&&res.Data.Total<=1){
				tag=false
			}
		}else{
			let arr=e.ProductIds.split(',')
			console.log(arr);
			if(arr.length==1){
				let res=await customInterence.companyUserTotal({CompanyId:companyId.value,ProductId:arr[0]})
				if(res.Ret==200&&res.Data.Total<=1){
					tag=false
				}
			}
			
			if(arr.length>1){
				let res1=await customInterence.companyUserTotal({CompanyId:companyId.value,ProductId:arr[0]})
				let res2=await customInterence.companyUserTotal({CompanyId:companyId.value,ProductId:arr[1]})
				if((res1.Ret==200&&res1.Data.Total<=1)||(res2.Ret==200&&res2.Data.Total<=1)){
					tag=false
				}
			}
		}
	}

	return new Promise((resolve,reject)=>{
		resolve(tag)
	})
}

/* 删除联系人 */
async function delConcat(item) {
	let flag=await beforeDelConcat(item)
	if(!flag){
		ElMessageBox.confirm('当前只有一个联系人，无法删除','提示',{
			confirmButtonText: '知道了',
			showCancelButton:false,
			type: 'warning',
		})
		return
	}
	

	ElMessageBox.confirm('是否确认删除该联系人吗?','提示',{
		type:'warning'
	}).then(() => {
		customInterence.concactDel({
			UserId:item.UserId
		}).then(res => {
			if(res.Ret === 200) {
				ElMessage.success(res.Msg)
				page_no.value = 1
				getuserTable()
			}
		})
	}).catch(() => {});
}

/* 取消弹窗 */
function canceldialog(type) {
	isAddContact.value = false;
	userId.value = '';
	defaultName = dataForm.value.custom_name;
	diaform.value = {
		companyName:dataForm.value.custom_name,
		name:'',
		telCode:'86',
		sex:1,
		tel1:'',
		tel2:'',
		mail:'',
		post:'',
		desiger:'',
		depart:'',
		carte:''
	}
	if(type==1) {
		getuserTable();
	}
}

const { readId, isRead, cancelRead, lookReport, readTit } = useReadia();

const showViewer = ref(false)//名片预览
const	imgView = ref('')
/* 预览名片 */
function reviewCard(card) {
	showViewer.value = true;
	imgView.value = card;
}
/* 关闭预览 */
function closeViewer() {
	imgView.value = '';
	showViewer.value = false;
}


const isShowImportDia = ref(false)//导入联系人弹窗
const	importData = ref([])//要导入的信息
const	isImportRepeat = ref(false)//导入数据出现重复
const	repeatData = ref([])//重复的联系人
const	importParams = ref(null)
/* 导入联系人打开弹窗 */
async function importHandle() {
	let totalRes=await customInterence.companyUserTotal({CompanyId:companyId.value})
	if(totalRes.Ret===200){
		if(totalRes.Data.Total>=1) {
			
			setTimeout(() => {
				$('#fileImport').click();
			})

		}else {
			ElMessage.error('请先至少添加一位名片联系人')
		}
	}else{
		ElMessage.error(totalRes.ErrMsg)
	}
}
// 获取文件上传的数据
function fileSelected(type){
		if( document.getElementById('fileImport').files[0] ){
				let hostfile = document.getElementById('fileImport').files[0];
				let size = Math.floor(hostfile.size / 1024 / 1024);
				if( size>200 ){
						ElMessage.error('上传文件大小不能大于200M！');
						hostfile = {};
						return false
				}
				if( hostfile.name.toLowerCase().includes('.xlsx')){
					let form = new FormData();
					form.append('File',hostfile);  //hostfile.name
					form.append('CompanyId',companyId.value);
				
					customInterence.getimportList(form).then((res) => {
					
						if( res.Ret === 200 ){
							if(res.Data.RepeatUser.length>0){
								ElMessageBox.confirm('excel表中存在重复手机号，请去重后，重新导入','提示',{
									confirmButtonText: '知道了',
									showCancelButton:false,
									type: 'warning'
								})
							}else{
								isShowImportDia.value = true;
								importParams.value = form;
								importData.value = res.Data.ValidUser || [];
							}
							
							
						}
						$("#fileImport").val('');
						hostfile = {};
					});
				}else{
					ElMessage.error('请上传.xlsx的文件格式！');
				}
		} 
}
/* 确认导入联系人 */
function ensureImport() {
	
	customInterence.importUser(importParams.value).then(res => {
		if(res.Ret === 200) {
			ElMessage.success('导入成功');
			cancelImport(1);
		}else if(res.Ret === 600) {
			cancelImport();

			isShowImportDia.value = true;
			isImportRepeat.value = true;
			repeatData.value = res.Data;
		}
	})
}
/* 关闭导入弹窗 */
function cancelImport(type) {
	isShowImportDia.value = false;
	isImportRepeat.value = false;
	importData.value = [];
	repeatData.value = [];
	importParams.value = null;
	if(type == 1) {
		getuserTable();
	}
}


const isMove = ref(false)//移动联系人弹窗
const isMoveShowTips = ref(false)//移动联系人弹窗中是否提示移动联系人将重置图表权限
const moveFormvalidateRef = ref(null)
const hideBelongUser = ref(false)
const belongList = ref([])//所属销售列表
const typeArr = ref([]) //公司列表
const moveForm = ref({
	companyId:'',
	belongUser:''
})
const moveRule = ref({
	companyId:[{ required: true, message: "公司不能为空", trigger: "change" }],
	belongUser:[{ required: true, message: "所属销售不能为空", trigger: "change" }]
})
//显示移动联系人弹窗
function handleShowMove(e){
	userId.value = e.UserId;
	isMoveShowTips.value=e.IsChartPermissionSetting==0?false:true
	isMove.value=true
}
//关闭移动联系人弹窗
function cancelMove(){
	isMove.value=false
	isMoveShowTips.value=false
	hideBelongUser.value=false
	moveForm.value.companyId=''
	moveForm.value.belongUser=''
	moveRule.value.belongUser[0].required=true
	moveFormvalidateRef.value.resetFields();
}
//提交移动联系人
function submitMove(){
	moveFormvalidateRef.value.validate((valid,key)=>{
		if(!valid) return

		customInterence
		.moveCustom({
			CompanyId:Number(moveForm.value.companyId),
			SellerId:Number(moveForm.value.belongUser)||0,
			UserId:Number(userId.value)
		}).then(res=>{
			if(res.Ret===200){
				ElMessage.success('移动成功');
				$router.go(0)
			}
		})
	})
}
//获取公司对应的销售列表
function getCompanySeller(){
	moveForm.value.belongUser=null
	customInterence.companySellerList({CompanyId:Number(moveForm.value.companyId)}).then(res=>{
		if(res.Ret===200){
			if(!res.Data.List){
				hideBelongUser.value=true
				moveRule.value.belongUser[0].required=false
				return
			}
			if(res.Data.List.length===1){
				moveForm.value.belongUser=res.Data.List[0].AdminId
			}
			belongList.value=res.Data.List||[]
			moveRule.value.belongUser[0].required=true
			hideBelongUser.value=false
		}
	})
}
function focusGetCompany() {
	customInterence
	.companySearch({
		KeyWord: "##",
	})
	.then((res) => {
		if (res.Ret === 200) {
			typeArr.value = res.Data.List || [];
		}
	});
}

/* 过滤公司 */
function getCompany(query) {
	if (query) {
		customInterence.companySearch({
			KeyWord: query,
		})
		.then((res) => {
			if (res.Ret === 200) {
			typeArr.value = res.Data.List || [];
			}
		});
	} else {
		typeArr.value = [];
	}
}


const productReadInfoShow = ref(false)//分产品阅读统计弹窗
const	productReadId = ref(0)//联系人ID
const	productReadTitle = ref('')//分产品阅读统计弹窗的标题
const clickToal = ref(0)
function lookReadInfo(item){
	if(!item.YbProductViewTotal) return 
	productReadId.value = item.UserId
	productReadTitle.value = item.RealName + '其他统计'
	clickToal = item.YbProductViewTotal
	productReadInfoShow.value = true
}

const dealList = ref([])
const isPreview = ref(false)//合同弹窗
/* 获取历史签约信息 */
function getDealList() {
	customInterence.historydeal({
		CompanyId:companyId.value,
		CompanyType:RoleType.value
	}).then(res => {
		if(res.Ret === 200) {

			res.Data.List&&res.Data.List.forEach(item=> {
				item.StartDate = item.StartDate.replace(/-/g,'.')
				item.EndDate = item.EndDate.replace(/-/g,'.')
				item.PermissionList.forEach(auth => {
					auth.CheckAll = auth.CheckList&&auth.CheckList.length===auth.Items.length?true:false
				})
				// 处理合同附件
				let arr=item.ImgUrl.split('#').map(e=>{
					const reg = /\.(pdf)$/;
					const reg2=	/\.doc|\.docx$/
					if(reg.test(e)){
						return {
							type:'pdf',
							url:e
						}
					}else if(reg2.test(e)){
						return {
							type:'word',
							url:e
						}
					}else{
						return {
							type:'img',
							url:e
						}
					}
				})
				item.constractFiles=arr
			})
			dealList.value = res.Data.List || []
		}
	})
}
getDealList()
/* 查看历史签约 */
function previewHistory() {
	isPreview.value = true
}


/* 编辑客户 */
function editHandle() {
	$router.push({
		path:'/editCustom',
		query: {
			id:companyId.value
		}
	})
}
/* 删除客户 */
function delHandle() {
	ElMessageBox.confirm('是否确认删除该客户吗?','提示',{
		type:'warning'
	}).then(() => {
		customInterence.customDel({
			CompanyId:Number(companyId.value)
		}).then(res => {
			if(res.Ret === 200) {
				ElMessage.success(res.Msg)

				$router.push({path:'/customList'})
			}
		})
	}).catch(() => {});
}



const isShowResearchNumber = ref(false)// 研选服务点数明细 弹框
const	isShowDlgType = ref('')
// 研选服务、专项调研明细
function clickDlgNumberHandler(type){
	isShowDlgType.value = type
	isShowResearchNumber.value =true
}


// 点击了互助详情数量
function MfyxInteractionNumHandler(item){
	const { href } = $router.resolve({
			path:  "/mutualList" ,
			query: {
				id: item.UserId,
				CompanyId: item.CompanyId,
			},
		});
		window.open(href, "_blank");
}


// 开通严选
function isOpenMfyxStatusHandler(item) {
	if(item.BusinessCardUrl){
			let str = `${item.MfyxStatus == "试用" ? "关闭" : "开通"}`;
			ElMessageBox.confirm(`确定要${str}个人的研选订阅试用权限吗？`, `${str}试用`, {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(async () => {
					const res = await customInterence.yananxuanPermissionOpen({
						UserId: item.UserId,
						Type: item.MfyxStatus == "试用" ? 0 : 1,
					});
					if (res.Ret === 200) {
						ElMessage.success("操作成功");
						getuserTable();
					}
				})
	} else {
		ElMessageBox.alert('该联系人尚未添加名片，请点击编辑，上传名片后再开通试用', '开通试用', {
					confirmButtonText: '知道了',
				});
	}
}


// 设置表格行的样式
function setRowClass({row}){
	if(row.NotRead && row.IsFollow==1){
		return "not-read-seven-days"
	}
}



const	showChartAuthPop = ref(false)//图表权限弹窗
const	chartAuthClassifyList = ref([])
const	chartAuthUserInfo = ref({})
// 显示配置联系人图库权限弹窗
async function handleShowChartAuth(item){	

	const res=await mychartInterface.commonClassify()
				if(res.Ret==200){
						chartAuthClassifyList.value=res.Data&&res.Data.List||[]
				}
	const res2=await customInterence.chartPermissionInfo({UserId:item.UserId})
				if(res2.Ret==200){
						chartAuthUserInfo.value={...res2.Data,auth:res2.Data.Enabled==0?false:true}
				}

	if(res.Ret==200&&res2.Ret==200){
		showChartAuthPop.value=true
	}
}

// 联系人图库权限配置
async function chartAuthSave(){
	let res;
	let params={
		UserId: chartAuthUserInfo.value.UserId,
		StartTime: chartAuthUserInfo.value.StartTime,
		EndTime: chartAuthUserInfo.value.EndTime,
		Enabled: chartAuthUserInfo.value.auth?1:0
	}
	if(chartAuthUserInfo.value.ChartPermissionId==0){
		res=await customInterence.chartPermissionSet(params)
	}else{
		res=await customInterence.chartPermissionEdit(params)
	}
	if(res.Ret==200){
		ElMessage.success('保存成功')
		showChartAuthPop.value=false
		getuserTable()
	}
}


// 导入联系人弹窗中的移动至当前客户
function handleMoveToCurrentCustom(e,index){
	let SellerId=localStorage.getItem('AdminId')
	let params={
		CompanyId: Number(companyId.value),
		BusinessCardUrl:e.BusinessCardUrl,
		DepartmentName:e.DepartmentName,
		Email:e.Email,
		IsMaker:Number(e.IsMaker),
		Mobile:e.Mobile,
		Position:e.Position,
		RegionType:"",
		RealName:e.RealName,
		Remark:"",
		SellerId:Number(SellerId),
		Sex:Number(e.Sex),
		UserId:Number(e.UserId),
	}
	console.log(params);
	customInterence.moveUser(params).then(res=>{
		if(res.Ret==200){
			ElMessage.success("移动成功！");
			repeatData.value[index].HasMove=false
		}
	})
}


const constractFileImgList = ref([])//预览合同图片列表
//点击预览历史签约中的合同附件
function preViewConstractFile(e) {
	constractFileImgList.value=[]
	if(e instanceof Array){
		e.forEach(item=>{
			if(item.type==='img'){
				constractFileImgList.value.push(item.url)
			}
		})
	}else{
		if(e.type==='pdf'){
			window.open(e.url);
		}else if(e.type==='word'){
			window.open('https://view.officeapps.live.com/op/view.aspx?src='+e.url,'_blank');
		}
		
	}
}


</script>
<template>
  <div class="customDetail_box" v-if="showData">
		<div class="customDetail_container" style="display:flex">
			
				<div class="left_form_cont" style="flex:1;margin-right:100px">
					<p class="page-title">基础信息</p>
					<ul class="detail_item" v-if="basicform">
						<li style="width:40%">
							<label class="label">客户名称</label>
							<span class="con">
								<span style="margin-right: 10px;">{{basicform.CompanyName}} </span>
								<el-tooltip content="此客户存在长期且反复申请试用，但从未签约的情况，请谨慎领取" placement="top" :open-delay="500" 
								v-if="RaiSellerRole && basicform.IsScrounge==1" >
									<img width="16" style="cursor: pointer;vertical-align: text-top;" src="@/assets/img/icons/warning_triangle_yellow.png" />
								</el-tooltip>
							</span>
						</li>

						<li style="width:26%">
							<label class="label">所属区域</label>
							<span class="con">{{basicform.RegionType}}</span>
						</li>
						<li v-if="basicform.RegionType==='海外'">
							<label class="label">所属国家</label>
							<span class="con">{{basicform.Nation}}</span>
						</li>
						<li v-else>
							<label class="label">客户地址</label>
							<span class="con">{{basicform.Province}}<span v-if="basicform.Province">/</span>{{basicform.City}}</span>
						</li>
						<li style="width:40%">
							<label class="label">社会信用码</label>
							<span class="con">{{basicform.CreditCode}}</span>
						</li>
						<li style="width:26%">
							<label class="label">客户类型</label>
							<span class="con">{{raiform&&ficcform?'FICC/权益':basicform.CreateAuth==1?'FICC':"权益"}}</span>
						</li>
					</ul>
					<!-- 权益类型信息 -->
					<template v-if="raiform">
						<p class="page-title">权益类型信息</p>
						<ul class="detail_item" style="margin-bottom:0">
							<li style="width:40%">
								<label class="label">客户状态</label>
								<span class="con">{{raiform.Status}}</span>
							</li>
							<li style="width:26%">
								<label class="label">所属销售</label>
								<span class="con">{{raiform.SellerName}}</span>
							</li>
							<li>
								<label class="label">所属行业</label>
								<span class="con">{{raiform.IndustryName}}</span>
							</li>
							<li style="width:40%">
								<label class="label">客户来源</label>
								<span class="con">{{raiform.Source}}</span>
							</li>
							<li style="width:23%">
								<label class="label">管理规模</label>
								<span class="con">{{raiform.Scale ==1?'50亿以下':raiform.Scale ==2?'50~100亿':raiform.Scale ==3?'100亿以上':''}}</span>
							</li>
							<li v-if="raiform.SpecialSurplus">
								<label class="label-num" >专项调研剩余次数</label>
								<span class="con">{{raiform.SpecialSurplus}} <span class="editsty" @click="clickDlgNumberHandler('专项调研')">明细>></span></span>
							</li>
							<li v-if="RoleType==='admin'" style="width:100%">
								<label class="label"
								>客户编码</label>
								<span class="con" style="word-break: break-word;">{{raiform.OpenCode}}</span>
							</li>
							<li  style="width:100%" v-if="raiform.Points">
								<label class="label-num">研选服务点数</label>
								<span class="con" style="word-break: break-word;">{{raiform.Points}}</span>
								<span v-if="raiform.Points" @click="clickDlgNumberHandler('研选服务')" class="con" style="word-break: break-word;color:#409EFF;padding-left:10px;cursor: pointer;">明细>></span>
							</li>
						</ul>
						<el-collapse v-model="raiCollapseOpen" accordion>
							<el-collapse-item name="1">
								<template #title>
									<p style="display:inline-block;font-size:15px;padding-left:23px">
										<span style="font-weight:bold">权限设置</span> 
										<span style="color:#1989FA;display:inline-block;margin-left:10px">{{raiCollapseOpen=='1'?'收起':'展开'}}</span>
									</p>
								</template>
								<CpessionTableEquity fromType="detail" :authList="raiform.authList"/>
							</el-collapse-item>
						</el-collapse>
					</template>

					<!-- FICC类型信息 -->
					<template v-if="ficcform">
						<p class="page-title">FICC类型信息</p>
						<ul class="detail_item" style="margin-bottom:0">
							<li style="width:40%">
								<label class="label">客户状态</label>
								<span class="con">{{ficcform.Status}}</span>
							</li>
							<li style="width:26%">
								<label class="label">所属销售</label>
								<span class="con">{{ficcform.SellerName}}</span>
							</li>
							<li>
								<label class="label">所属行业</label>
								<span class="con">{{ficcform.IndustryName}}</span>
							</li>
							<li style="width:40%">
								<label class="label">客户来源</label>
								<span class="con">{{ficcform.Source}}</span>
							</li>

							<li v-if="RoleType==='admin'">
								<label class="label">客户编码</label>
								<span class="con" style="word-break: break-word;">{{ficcform.OpenCode}}</span>
							</li>
						</ul>
						<el-collapse v-model="ficcCollapseOpen" accordion>
							<el-collapse-item name="1">
								<template #title>
									<p style="display:inline-block;font-size:15px;padding-left:23px">
										<span style="font-weight:bold">权限设置</span> 
										<span style="color:#1989FA;display:inline-block;margin-left:10px">{{ficcCollapseOpen=='1'?'收起':'展开'}}</span>
									</p>
								</template>
								<CpessionTable fromType="detail" :authList="ficcform.authList"/>
							</el-collapse-item>
						</el-collapse>
					</template>

				</div>
				<div style="flex-shrink: 0;">
					<div style="display:flex;justify-content:flex-end;align-items: center;gap:0 20px;margin:0 0 30px;">
						<span style="color:#409EFF;cursor:pointer;font-size: 14px;margin-right: 20px;" v-if="isBtnShow.BtnHistoryList&&dealList.length" @click="previewHistory">历史签约</span>
						<el-button type="primary" style="width:100px;" @click="editHandle" v-if="isBtnShow.BtnEdit">编辑</el-button>
						<el-button type="danger" plain style="width:100px;" @click="delHandle" v-if="isBtnShow.BtnDelete">删除</el-button>
					</div>
					<Ctimeline :id="Number(companyId)"></Ctimeline>
				</div>
		</div>

		<!-- 联系人 -->
		<div class="customDetail_container" style="marginTop:20px;padding:30px 40px 80px 60px;">
			<div class="customList_bot_top">
				<div >
					<div v-if="isContractButtonShow">
						<input type="file" name="file" @change="fileSelected()" id="fileImport" class="true-file" style="display:none;">
						<el-button type="primary" @click="addConcat">添加联系人</el-button>
						<el-button type="primary" @click="importHandle">批量导入</el-button>

						<a :href="downTemplate" download style="fontSize:14px;color:#409eff;margin-left:30px">下载导入模板</a>
					</div>
				</div>
				<div style="display: flex">
				  <template v-if="!isUserYanXuanButtonShow">
					<el-select 
						v-model="IsSubscribe"
						placeholder="是否关注公众号" 
						multiple
						clearable
						style="margin-right: 10px;width: 300px;" 
						@change="changeSubscribe"
					>
						<el-option 
							label="已关注弘则研究"
							value="1"
							:disabled="IsSubscribe.includes('2')"
						/>
						<el-option 
							label="已关注查研观向小助手"
							value="3"
							:disabled="IsSubscribe.includes('4')"
						/>
						<el-option 
							label="未关注弘则研究"
							value="2"
							:disabled="IsSubscribe.includes('1')"
						/>
						<el-option 
							label="未关注查研观向小助手"
							value="4"
							:disabled="IsSubscribe.includes('3')"
						/>
					</el-select>

					<el-select v-model="platform_type" style="margin-right: 10px;width: 250px;" @change="changeSubProductHandle">
						<el-option
							v-for="item in platformOption"
							:key="item.key"
							:label="item.ProductName"
							:value="item.key"
						>
							{{ item.ProductName }}
						</el-option>
					</el-select>
				  </template>
					<el-input
						placeholder="姓名/手机号码/邮箱"
						v-model="search_txt"
						style="maxWidth:400px"
						@input="searchUser"
						clearable>
							<template #prefix>
								<el-icon> <Search/></el-icon>
							</template>
					</el-input>
				</div>
			</div>
			<div class="bot_cont">
				<el-table
				ref="userTableRef"
				:data="userTable"
				:row-class-name="setRowClass"
				border>
					<el-table-column
					prop="RealName"
					label="姓名"
					align="center"
					min-width="80px"
					>
						<template #default="scope">
							<div :class="{'isShared':scope.row.IsShared}">
								<img :src="$icons.card" alt="" style="width:17px;cursor:pointer;marginRight:5px;"
								v-if="scope.row.BusinessCardUrl"
								@click="reviewCard(scope.row.BusinessCardUrl)">
								<img src="~@/assets/img/icons/like-heart.png" class="name-follow-heart" v-if="scope.row.IsFollow==1">
								<span :class="{'isShared':scope.row.IsShared}">{{scope.row.RealName}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="Position" label="职位" align="center" min-width="80px"></el-table-column>
					<el-table-column
					prop="Mobile"
					label="手机号"
					align="center"
					min-width="100">
						<template #default="scope"><span v-if="scope.row.Mobile&&scope.row.CountryCode">{{scope.row.CountryCode}}-</span><span>{{scope.row.Mobile+(scope.row.MobileTwo?'/'+scope.row.MobileTwo:'')}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="Email"
					label="邮箱"
					min-width="120"
					align="center">
						<template #default="scope"> <span>{{scope.row.Email}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="IsMaker"
					label="是否KP"
					align="center">
						<template #default="scope"> <span>{{scope.row.IsMaker==1?'是':'否'}}</span> </template>
					</el-table-column>
					<!-- crm 14.7 -->
					<template v-if="isUserYanXuanButtonShow">
						<el-table-column
						prop="IsRegister"
						label="是否绑定"
						width="90"
						align="center">
							<template #default="scope">
								<div style="text-align:left; display: flex;align-items: center;">
									<img v-if="scope.row.MfyxIsBinding" style="width:16px;height:16px;margin-right: 5px;" src="~@/assets/img/icons/icon_1.png" alt="">
									<img v-else style="width:16px;height:16px;margin-right: 5px;" src="~@/assets/img/icons/icon_2.png" alt="">
									<span>{{scope.row.MfyxIsBinding?'已绑定':'未绑定'}}</span> 
								</div>
							</template>
						</el-table-column>
						<el-table-column
						prop="CreatedTime"
						label="绑定时间"
						min-width="150"
						align="center">
							<template #default="scope"> <span>{{scope.row.MfyxBindingTime}}</span> </template>
						</el-table-column>
					</template>
					<template v-else>
						<el-table-column
						prop="IsRegister"
						label="是否注册"
						align="center">
							<template #default="scope"> <span>{{scope.row.IsRegister?'已注册':'未注册'}}</span> </template>
						</el-table-column>
						<el-table-column
						prop="CreatedTime"
						label="注册时间"
						min-width="150"
						align="center">
							<template #default="scope"> <span>{{scope.row.RegisterTime}}</span> </template>
						</el-table-column>
					</template>
					<el-table-column
					prop="IsSubscribeHzyj"
					label="是否关注公众号"
					min-width="90"
					align="center">
						<template #default="scope">
							<div style="text-align:left" v-if="RoleType !=='权益'">
								<img v-if="scope.row.IsSubscribeHzyj==1" style="width:16px;height:16px" src="~@/assets/img/icons/icon_1.png" alt="">
								<img v-else style="width:16px;height:16px" src="~@/assets/img/icons/icon_2.png" alt="">
								<span>弘则研究</span>
							</div>
							<div style="text-align:left">
								<img v-if="scope.row.IsSubscribeCygx==1" style="width:16px;height:16px" src="~@/assets/img/icons/icon_1.png" alt="">
								<img v-else style="width:16px;height:16px" src="~@/assets/img/icons/icon_2.png" alt="">
								<span>查研观向小助手</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column
					v-if="isUserYanXuanButtonShow"
					prop="IsRegister"
					label="互动次数"
					align="center">
						<template #default="scope"> <span class="editsty" @click="MfyxInteractionNumHandler(scope.row)">{{scope.row.MfyxInteractionNum}}</span> </template>
					</el-table-column>
					<el-table-column
					v-if="!isUserYanXuanButtonShow"
					prop="ViewTotal"
					label="累计阅读次数"
					align="center">
						<template #default="scope"> <span>{{scope.row.ViewTotal||'暂无'}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="LastViewTimeStr"
					label="最近一次阅读时间"
					min-width="150"
					align="center">
						<template #default="scope"> <span>{{scope.row.ViewTotal?scope.row.LastViewTimeStr:''}}</span> </template>
					</el-table-column>
					<el-table-column
					v-if="!isUserYanXuanButtonShow"
					label="研报统计"
					align="center">
						<template #default="scope"> <span v-if="scope.row.ViewTotal!=0" class="editsty" @click="lookReport(scope.row)" :disabled="!isContractButtonShow" >点击查看</span></template>
					</el-table-column>
					<el-table-column
						v-if="ficcform && !isUserYanXuanButtonShow"
						prop="YbProductViewTotal"
						label="其他统计"
						min-width="110"
						align="center">
						<template #default="scope"> <span :class="scope.row.YbProductViewTotal?'editsty':''" @click="lookReadInfo(scope.row)">{{scope.row.YbProductViewTotal||'0'}}</span> </template>
					</el-table-column>
					<template v-if="isUserYanXuanButtonShow">
						<el-table-column
						prop="IsRegister"
						label="个人研选订阅权限"
						width="140"
						align="center">
							<template #default="scope"> 
								<div style="text-align:left; display: flex;align-items: center;">
									<img v-if="scope.row.MfyxStatus=='试用'" style="width:16px;height:16px;margin-right: 5px;" src="~@/assets/img/icons/icon_1.png" alt="">
									<img v-else style="width:16px;height:16px;margin-right: 5px;" src="~@/assets/img/icons/icon_2.png" alt="">
									<span>{{scope.row.MfyxStatus}}</span> 
								</div>
							</template>
						</el-table-column>
						<el-table-column
						prop="CreatedTime"
						label="研选服务期限"
						min-width="150"
						align="center">
							<template #default="scope"> <span>{{scope.row.MfyxStartDate}} -- {{scope.row.MfyxEndDate}}</span> </template>
						</el-table-column>
					</template>
					<el-table-column label="操作" align="center" min-width="150">
						<template #default="scope"  v-if="isContractButtonShow">
							<div class="contact-opt-box" style="color:#4099ef; font-size:14px;">
								<span  class="editsty" @click="editContact(scope.row)">编辑</span>
								<span class="editsty move" style="margin:0 5px;" @click="handleShowMove(scope.row)">移动</span>
								<span style="margin-right:5px;" :class="scope.row.IsFollow==1?'deletesty':'editsty'"
								@click="followContact(scope.row)"
								>{{ scope.row.IsFollow==1?'取消关注':'关注' }}</span>
								<span class="deletesty" @click.stop="delConcat(scope.row)">删除</span>
							
								<p v-if="isUserYanXuanButtonShow" class="editsty" @click="isOpenMfyxStatusHandler(scope.row)">{{scope.row.MfyxStatus =='试用'?'关闭研选订阅试用':'开通研选订阅试用'}} </p>
							</div>
						</template>
					</el-table-column>
					<template #empty>
						<div style="lineHeight:40px;margin:30px 0;color:#999;">
							<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:160px;height:128px;margin: auto;">
							<span>暂无联系人</span>
						</div>
					</template>
				</el-table>
				<el-col :span="24" class="toolbar">
					<el-pagination 
					layout="total,prev,pager,next,jumper" 
					background 
					:current-page="page_no"
					@current-change="handleCurrentChange"
					:page-size="10"
					:total="total"
					style="float:right;">
					</el-pagination>
				</el-col>
			</div>
		</div>
		<!-- 添加联系人弹窗 -->
		<Contactdia
		:userId="userId"
		:name="defaultName"
		:id="companyId"
		:title="diatit"
		:userForm="diaform"
		:custom_name="diaform.companyName"
		:isAddContact="isAddContact"
		:regionType="regionType"
		:isEditUser="true"
		@cancel="canceldialog"
		>
		</Contactdia>
		<!-- 阅读报告弹窗 -->
		<Readia
		:readId="readId"
		:lookRead="isRead"
		:title="readTit"
		@cancelRead="cancelRead">
		</Readia>
		<!-- 图片预览 -->
		<el-image-viewer 
		v-if="showViewer" 
		@close="closeViewer" 
		:url-list="[imgView]" />
		
		<!-- 导入的联系人表格 -->
		<el-dialog
		title="批量导入"
		v-model="isShowImportDia"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="cancelImport"
		center
		width="1000px">
		
			<template  v-if="!isImportRepeat">
				<div style="fontSize:15px;color:#606266;marginBottom:20px;">请确认导入信息（已过滤信息不全的联系人）：</div>
				<el-table :data="importData" border max-height="350">
					<el-table-column align="center" label="姓名">
						<template #default="scope">{{scope.row.RealName}}</template>
					</el-table-column>
					<el-table-column align="center" label="性别">
						<template #default="scope">{{scope.row.Sex==1?'男':scope.row.Sex==2?'女':''}}</template>
					</el-table-column>
					<el-table-column align="center" label="手机号">
						<template #default="scope">{{scope.row.CountryCode+'-'+scope.row.Mobile||''}}</template>
					</el-table-column>
					<el-table-column align="center" label="邮箱">
						<template #default="scope">{{scope.row.Email||''}}</template>
					</el-table-column>
					<el-table-column align="center" label="是否KP">
						<template #default="scope">{{scope.row.IsMaker==1?'是':'否'}}</template>
					</el-table-column>
					<el-table-column align="center" label="职位">
						<template #default="scope">{{scope.row.Position||''}}</template>
					</el-table-column>
					<el-table-column align="center" label="部门">
						<template #default="scope">{{scope.row.DepartmentName||''}}</template>
					</el-table-column>
				</el-table>
			</template>
			<!-- 重复联系人 -->
			<template v-else>
				<div style="font-size:16px;color:#606266;margin-bottom:10px">导入完成。</div>
				<div style="fontSize:16px;color:#606266;marginBottom:20px;">请单独处理以下系统中已存在的联系人：</div>
				<el-table :data="repeatData" border max-height="300">
					<el-table-column align="center" label="联系人">
						<template #default="scope">{{scope.row.RealName}}</template>
					</el-table-column>
					<el-table-column  align="center" label="手机号/邮箱" width="300">
						<template #default="scope">
							{{scope.row.Mobile}} 
							{{(scope.row.Mobile&&scope.row.Email)?'/':''}}
							{{scope.row.Email}}
						</template>
					</el-table-column>
					<el-table-column align="center" label="销售">
						<template #default="scope">{{scope.row.SellerRealName}}</template>
					</el-table-column>
					<el-table-column align="center" label="关联客户" min-width="150">
						<template #default="scope">{{scope.row.CompanyName}}</template>
					</el-table-column>
					<el-table-column align="center" label="操作">
						<template #default="scope">
							<el-button type="text" size="small" @click="handleMoveToCurrentCustom(scope.row,scope.$index)" v-if="scope.row.HasMove">移至当前客户</el-button>
						</template>
					</el-table-column>
				</el-table>
				<p style="padding:20px 0;font-size:16px;">无法移至当前客户的联系人，请联系对应销售处理。</p>
			</template>
			
			<div style="display:flex;justify-content:center;margin:30px 0">
				<template  v-if="!isImportRepeat">
					<el-button type="primary" style="marginRight:24px;" @click="ensureImport">确定</el-button>
					<el-button  type="primary" plain style="width:80px;" @click="cancelImport">取消</el-button>
				</template>
				<el-button type="primary" style="width:100px;" v-else @click="cancelImport(1)">知道了</el-button>
			</div>
		</el-dialog>

		<!-- 移动联系人弹窗 -->
		<el-dialog
			title="提示"
			v-model="isMove"
			:close-on-click-modal="false"
			:modal-append-to-body="false"
			@close="cancelMove"
			center
			top="25vh"
			width="500px"
		>
			<template #header>
				<div style="display: flex; align-items: center; position: relative">
					<img
						src="@/assets/img/icons/move.png"
						style="color: #fff; width: 16px; height: 16px; margin-right: 5px"/>
					<span style="font-size: 16px">移动联系人</span>
					<i
						class="el-icon-close"
						style="
							font-size: 24px;
							cursor: pointer;
							position: absolute;
							right: 20px;
							top: 50%;
							transform: translateY(-50%);
						"
						@click="cancelMove"
					></i>
				</div>
			</template>
			<el-form
				@submit.prevent
				:model="moveForm"
				ref="moveFormvalidateRef"
				inline
				:rules="moveRule"
				label-width="80px"
				class="demo-ruleForm"
				style="margin-top: 15px">
				<el-form-item
					label="移动到"
					prop="companyId"
					style="width: 100%">
					<el-select
						v-model="moveForm.companyId"
						filterable
						remote
						:remote-method="getCompany"
						@focus="focusGetCompany"
						@change="getCompanySeller"
						placeholder="请选择公司"
						style="width: 280px">
						<el-option
							v-for="item in typeArr"
							:key="item.CompanyId"
							:label="item.CompanyName"
							:value="item.CompanyId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="所属销售"
					prop="belongUser"
					style="width: 100%"
					v-if="!hideBelongUser">
					<el-select
						v-model="moveForm.belongUser"
						placeholder="请选择对应销售"
						style="width: 280px">
						<el-option
							v-for="item in belongList"
							:key="item.AdminId"
							:label="item.RealName"
							:value="item.AdminId">
						</el-option>
					</el-select>
				</el-form-item>
				<div v-if="isMoveShowTips&&ficcform&&['正式','试用','永续'].includes(ficcform.Status)" style="text-align:center;color:#999">提示：移动联系人会关闭该联系人的图表权限</div>
				<div style="display: flex; justify-content: center; margin: 30px 0 55px">
					<el-button type="primary" @click="submitMove">保存</el-button>
					<el-button @click="cancelMove">取消</el-button>
				</div>
			</el-form>
		</el-dialog>

		<!-- 设置图库权限弹窗 -->
		<chartAuthDialog
			:chartAuthClassifyList="chartAuthClassifyList"
			:chartAuthUserInfo="chartAuthUserInfo"
			:showChartAuthPop="showChartAuthPop"
			@chartAuthClose="showChartAuthPop=false"
			@chartAuthSave="chartAuthSave"
		></chartAuthDialog>

		<export-data :exportDataIsShow="exportDataIsShow" :companyId="Number(companyId)" @close="exportDataIsShow=false"/>

    	<!-- 分产品阅读统计弹窗 -->
		<product-read-info
			:productReadInfoShow="productReadInfoShow"
			:productReadId="productReadId"
			:subProductId="platform_type"
			:subProductName="subProductName"
			:clickToal="clickToal"
			:productReadTitle="productReadTitle"
			@close="productReadInfoShow=false"
		></product-read-info>
		<!-- 研选服务点数明细 弹框 -->

		<DeductDetailDlg 
			:isShowResearchNumber="isShowResearchNumber" 
			:isShowDlgType="isShowDlgType" 
			:dataForm="raiform"
			@close="isShowResearchNumber=false;isShowDlgType=''"
		/>
		<!-- 历史签约弹窗 新版 -->
		<HistoryContract 
			:isPreview="isPreview"
			:dealList="dealList"
			@close="isPreview=false"
		/>
	</div>
</template>
<style lang='scss' scoped>
.contact-opt-box{
	.chart{
		display: inline-block;
		cursor: pointer;
		margin-left: 5px;
	}
}
:deep(.el-icon-arrow-right:before){
	color: #1989FA;
}
:deep(.el-message-box__header .el-message-box__title){
	color: #333 !important;
}
.page-title{
	font-size: 16px;
	font-weight: bold;
	color: #333;
	height: 40px;
	line-height: 40px;
	padding-left: 10px;
	background: #F0F2F5;
	margin-bottom: 40px;
}

.customDetail_container {
	.isShared::after{
		content: '共享';
		font-size: 12px;
		// padding: 0px 0px 0px 2px;
		width: 30px;
		color: #3994fb;
		background-color: #dcecfc;
		position: absolute;
		left: 0;
		bottom: 0;
		border-top-right-radius: 5px;
	}
	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-form-item {
		margin-bottom: 30px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	.el-collapse {
		border: none;
	}
	:deep(.el-collapse-item__header) {
		display: block;
		border: none;
		font-size: 16px;
		color: #333;
		text-align: left;
	}
	:deep(.el-collapse-item__wrap) {
		border: none;
	}
	:deep(.textarea_item .el-form-item__content) {
		width: 100%;
	}
	:deep(.el-form-item .el-checkbox-group) {
		height: 40px;
		line-height: 40px;
	}
	:deep(.distpicker-address-wrapper select) {
		width: 198px;
	}
	/*  */
	.detail_item {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 40px;
		li {
			width: 33%;
			color: #666;
			margin-bottom: 30px;
			font-size: 15px;
			display: flex;
			.label{
				display: inline-block;
				width: 80px;
				text-align: right;
				margin-right: 30px;
				flex-shrink: 0;
			}
			.label-num {
				flex-shrink: 0;
				margin-right: 30px;
			}
			.con{
				display: inline-block;
				color: #333;
				// font-weight: bold;
			}
		}
	}
	.menu_lists {
		padding: 40px 18px;
		border: 1px dashed #AAB4CC;
		border-radius: 4px;
		.menu_item {
			display: flex;
			// align-items: center;
			margin-bottom: 30px;
			&:last-child {
				margin-bottom: 0;
			}
			.list_item {
				margin-right: 30px;
				margin-bottom: 10px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	.customList_bot_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 28px;
	}
	.name-follow-heart{
		width:25px;
		height: 15px;
		position: absolute;
		left: 0;
    top: 0;
	}
	.not-read-seven-days{
		background-color: #FFF8F8;
	}
}
.customDetail_contract_dialog {
	max-height: 810px;
	min-height: 200px;
	overflow-y: auto;
	.el-dialog__header {
		background: #fff;
	}
	.el-dialog__body {
		padding: 30px 50px !important;
	}
	.history_item {
		margin-bottom: 60px;
		.detail_item {
			font-size: 16px;
			color: #666;
			li {
				margin-bottom: 30px;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
	.menu_lists {
		padding: 20px 18px;
		border: 1px dashed #AAB4CC;
		border-radius: 4px;
		.menu_item {
			display: flex;
			// align-items: center;
			margin-bottom: 20px;
			&:last-child {
				margin-bottom: 0;
			}
			.list_item {
				margin-right: 30px;
				margin-bottom: 5px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}
</style>