hz_crm_web/src/views/custom_manage/customList/customDetail.vue

<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 >
							<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:50%">
								<label class="label">备注</label>
								<span class="con">{{raiform.Reasons}}</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 slot="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>
								<!-- <CpessionTable fromType="detail" :authList="raiform.authList"/> -->
								<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 style="width:50%">
								<label class="label">备注</label>
								<span class="con">{{ficcform.Reasons}}</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 slot="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="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" size="small" 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.native="importHandle">批量导入</el-button>
						<!-- <span style="fontSize:16px;color:#AAB4CC;">（请至少添加一位联系人）</span> -->
						<!-- <el-button v-if="RoleType=='admin' || RoleType=='权益'" style="margin-left:20px" type="primary" @click="exportDataIsShow=true">导出数据</el-button> -->
						<a :href="downTemplate" download style="fontSize:14px;color:#409eff;margin-left:30px">下载导入模板</a>
					</div>
				</div>
				<div style="display: flex">
					<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>
					<el-input
						placeholder="姓名/手机号码/邮箱"
						v-model="search_txt"
						style="maxWidth:400px"
						@input="searchUser"
						clearable>
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
			</div>
			<div class="bot_cont">
				<el-table
				ref="userTable"
				:data="userTable"
				v-loading="isShowloadding"
				:row-class-name="setRowClass"
				element-loading-text="数据加载中..."
				border>
					<el-table-column
					prop="RealName"
					label="姓名"
					align="center"
					min-width="80px"
					>
						<template slot-scope="scope"
							: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>
						</template>
					</el-table-column>
					<el-table-column
					prop="Mobile"
					label="手机号"
					align="center"
					min-width="100">
						<template slot-scope="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 slot-scope="scope"> <span>{{scope.row.Email}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="IsMaker"
					label="是否KP"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.IsMaker==1?'是':'否'}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="IsRegister"
					label="是否注册"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.IsRegister?'已注册':'未注册'}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="CreatedTime"
					label="注册时间"
					min-width="150"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.RegisterTime|formatTime}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="IsSubscribeHzyj"
					label="是否关注公众号"
					min-width="90"
					align="center">
						<template slot-scope="scope">
							<div style="text-align:left">
								<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
					prop="ViewTotal"
					label="累计阅读次数"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.ViewTotal||'暂无'}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="LastViewTimeStr"
					label="最近一次阅读时间"
					min-width="150"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.ViewTotal?scope.row.LastViewTimeStr:''|formatTime}}</span> </template>
					</el-table-column>
					<el-table-column
					label="研报统计"
					align="center">
						<template slot-scope="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"
						prop="YbProductViewTotal"
						label="其他统计"
						min-width="110"
						align="center">
						<template slot-scope="scope"> <span :class="scope.row.YbProductViewTotal?'editsty':''" @click="lookReadInfo(scope.row)">{{scope.row.YbProductViewTotal||'0'}}</span> </template>
					</el-table-column>
					<el-table-column label="操作" align="center" min-width="150">
						<template slot-scope="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>
								<!-- <block v-if="RoleType!='权益'&&ficcform&&['正式','试用','永续'].includes(ficcform.Status)">
								<span 
									class="chart" 
									@click.stop="handleShowChartAuth(scope.row)"
									v-if="scope.row.IsChartPermissionSetting==0"
									style="color:#4099ef"
								>图表权限</span>
								<span 
									class="chart" 
									@click.stop="handleShowChartAuth(scope.row)"
									v-if="scope.row.IsChartPermissionSetting==1"
									style="color:#13ce66"
								>图表权限</span>
								<span 
									class="chart" 
									v-if="scope.row.IsChartPermissionSetting==2"
									style="color:#bbb"
								>图表权限</span>
								</block> -->
							</div>
						</template>
					</el-table-column>
					<div slot="empty" 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>
				</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" 
		:on-close="closeViewer" 
		:url-list="[imgView]" />
		<!-- 历史签约弹窗 旧版-->
		<!-- <el-dialog
		:visible.sync="isPreview"
		:modal-append-to-body='false'
		:show-close="false"
		custom-class="customDetail_contract_dialog"
		center
		top="7vh"
		v-dialogDrag
		width="60%">
			<div slot="title" style="display:flex;alignItems:center;">
				<span style="fontSize:16px;color:#333;fontWeight:bold;">历史签约</span>
			</div>
			<template v-if="dealList.length">
				<div v-for="(item,index) in dealList" :key="index" class="history_item">
					<el-tag style="margin-bottom:30px;margin-right:10px" size="small">合同编号：{{item.ContractCode}}</el-tag>
					<div style="display:inline-block">
						<span style="margin-right:5px;border:1px solid #409eff;padding:4px 8px;font-size:12px;color:#409eff;background:#ecf5ff;border-radius:4px">
							{{item.ContractType}}
						</span>
						<el-tooltip
							class="item" 
							effect="dark"
							v-if="item.ContractType!='补充协议'"
							placement="top-start">
								<div slot="content" v-if="item.ContractType=='新签合同'">没有正式转试用记录的客户，在申请转正时提交的合同</div>
								<div slot="content" v-if="item.ContractType=='续约合同'">
									1、有正式转试用记录的客户，在申请转正时提交的合同<br>
									2、所有客户在续约申请时提交的合同
								</div>
								<i class="el-icon-info"></i>
						</el-tooltip>
					</div>
					
					<ul class="detail_item">
						<li>
							<span style="min-width:300px;marginRight:200px;display:inline-block;">合同期限：{{item.StartDate+'~'+item.EndDate}}</span>
							<span>合同金额：{{item.Money}}元</span>
						</li>
						<li>
							<span style="min-width:300px;marginRight:200px;display:inline-block;">付款方式：{{item.PayMethod}}</span>
							<span>付款渠道：{{item.PayChannel}}</span>
						</li>
						<li>
							<span style="min-width:300px;marginRight:200px;display:inline-block;">审批时间：{{item.ModifyTimeStr|formatTime}}</span>
						</li>
						<li class="textarea_item" style="width:97%;">
							<label style="display:block;marginBottom:20px;fontSize:16px;position:relative;">
								权限设置
							</label>	
							<ul class="menu_lists">
								<li v-for="auth in item.PermissionList" :key="auth.ClassifyName" class="menu_item">
									<el-checkbox :indeterminate="auth.CheckList.length>0&&auth.CheckList.length<auth.Items.length" v-model="auth.CheckAll" disabled @change="handleCheckAll(item)" style="marginRight:30px;fontWeight:bold;">{{auth.ClassifyName+':'}}</el-checkbox>
									<el-checkbox-group v-model="auth.CheckList" @change="handleChecked(item)" disabled>
										<el-checkbox v-for="list in auth.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item">{{list.PermissionName}}</el-checkbox>
									</el-checkbox-group>
								</li>
							</ul>	
						</li>
						<li class="textarea_item" style="width:97%;display:flex" v-if="item.ImgUrl!=''">
							<label style="marginRight:17px;fontSize:16px;position:relative;width:112px;">
								查看合同附件
							</label>
							<ul class="img_cont">
								<li v-for="img in item.constractFiles" :key="img" class="img_item" style="display:inline-block;margin-right:10px">
									<el-image :src="require('@/assets/img/constract/word-icon.png')" style="width:240px;height:180px;" v-if="img.type=='word'" @click.native="preViewConstractFile(img)"></el-image>
									<pdf ref="pdf" :src="img.url" style="width:240px;height:180px;overflow:hidden" v-else-if="img.type=='pdf'" @click.native="preViewConstractFile(img)"></pdf>
									<el-image :src="img.url" :preview-src-list="constractFileImgList" alt="" style="background:#aaa;width:240px;height:180px;" v-else @click.native="preViewConstractFile(item.constractFiles)"/>
									<i class="el-icon-zoom-in" style="position:absolute;right:12px;top:12px;color:#fff;" @click="preViewConstractFile(img)"></i>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</template>
			<span v-else>暂无历史合同</span>
		</el-dialog> -->
		<!-- 导入的联系人表格 -->
		<el-dialog
		title="批量导入"
		:visible.sync="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 slot-scope="scope">{{scope.row.RealName}}</template>
					</el-table-column>
					<el-table-column align="center" label="性别">
						<template slot-scope="scope">{{scope.row.Sex==1?'男':scope.row.Sex==2?'女':''}}</template>
					</el-table-column>
					<el-table-column align="center" label="手机号">
						<template slot-scope="scope">{{scope.row.CountryCode+'-'+scope.row.Mobile||''}}</template>
					</el-table-column>
					<!-- <el-table-column align="center" label="手机号2">
						<template slot-scope="scope">{{scope.row.MobileTwo||''}}</template>
					</el-table-column> -->
					<el-table-column align="center" label="邮箱">
						<template slot-scope="scope">{{scope.row.Email||''}}</template>
					</el-table-column>
					<el-table-column align="center" label="是否KP">
						<template slot-scope="scope">{{scope.row.IsMaker==1?'是':'否'}}</template>
					</el-table-column>
					<el-table-column align="center" label="职位">
						<template slot-scope="scope">{{scope.row.Position||''}}</template>
					</el-table-column>
					<el-table-column align="center" label="部门">
						<template slot-scope="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 slot-scope="scope">{{scope.row.RealName}}</template>
					</el-table-column>
					<el-table-column  align="center" label="手机号/邮箱" width="300">
						<template slot-scope="scope">
							{{scope.row.Mobile}} 
							{{(scope.row.Mobile&&scope.row.Email)?'/':''}}
							{{scope.row.Email}}
						</template>
					</el-table-column>
					<el-table-column align="center" label="销售">
						<template slot-scope="scope">{{scope.row.SellerRealName}}</template>
					</el-table-column>
					<el-table-column align="center" label="关联客户" min-width="150">
						<template slot-scope="scope">{{scope.row.CompanyName}}</template>
					</el-table-column>
					<el-table-column align="center" label="操作">
						<template slot-scope="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="提示"
			:visible.sync="isMove"
			:close-on-click-modal="false"
			:modal-append-to-body="false"
			@close="cancelMove"
			center
			top="25vh"
			width="500px">
			<div slot="title" 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>
			<el-form
				@submit.native.prevent
				:model="moveForm"
				ref="moveFormvalidate"
				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.sync="exportDataIsShow" :companyId="companyId"/>
    	<!-- 分产品阅读统计弹窗 -->
		<product-read-info
		:productReadInfoShow="productReadInfoShow"
		:productReadId="productReadId"
		:subProductId="platform_type"
		:subProductName="subProductName"
		:clickToal="clickToal"
		:productReadTitle="productReadTitle"
		@close="productReadInfoShow=false"
		></product-read-info>
		<!-- 研选服务点数明细 弹框 -->

		<DeductDetailDlg :isShowResearchNumber.sync="isShowResearchNumber" :isShowDlgType.sync="isShowDlgType" :dataForm="raiform"/>
		<!-- 历史签约弹窗 新版 -->
		<HistoryContract 
			:isPreview="isPreview"
			:dealList="dealList"
			@close="isPreview=false"
		/>
	</div>	
</template>

<script>
import Ctimeline from '../compontents/Ctimeline.vue'
import Contactdia from '../compontents/Contactdialog.vue'
import Readia from '../compontents/ReadDialog.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import CpessionTable from '../compontents/CpessionTable.vue'
import { customInterence,mychartInterface } from '@/api/api.js'
import{ customAllInterence } from '@/api/modules/crmApi.js'
import pdf from 'vue-pdf'
import chartAuthDialog from '../compontents/chartAuthDialog.vue'
import CpessionTableEquity from '../compontents/CpessionTableEquity.vue'
import ExportData from '../compontents/exportData.vue'
import ProductReadInfo from '../compontents/ProductReadInfo.vue'
import DeductDetailDlg from './components/deductDetailDlg.vue'
import HistoryContract from '../compontents/historyContract.vue'
export default {
	name:'',
	components: { Ctimeline, Contactdia, Readia, ElImageViewer, CpessionTable, pdf, chartAuthDialog, ExportData, CpessionTableEquity, ProductReadInfo, DeductDetailDlg, HistoryContract },
	computed:{
		Role() {
			let role = localStorage.getItem('Role') || '';
			return role;
		},
		RoleType() {
			let type = localStorage.getItem('RoleType') || '';
			return type;
		},
		RaiSellerRole(){
			return ['rai_seller','rai_admin','admin'].includes(this.Role)
		},
	},	
	beforeRouteLeave(to, from, next)  {
		from.matched[0].name='客户管理'
		next()
	},
	data () {
		return {
			exportDataIsShow:false,
			raiCollapseOpen:'0',//1展开 0 收起
			ficcCollapseOpen:'0',// 1展开 0 收起

			basicform:'',
			ficcform:"",
			raiform:"",

			constractFileImgList:[],//预览合同图片列表

			hideBelongUser:false,
			isMove:false,//移动联系人弹窗
			isMoveShowTips:false,//移动联系人弹窗中是否提示移动联系人将重置图表权限
			moveForm:{
				companyId:'',
				belongUser:''
			},
			moveRule:{
				companyId:[{ required: true, message: "公司不能为空", trigger: "change" }],
				belongUser:[{ required: true, message: "所属销售不能为空", trigger: "change" }]
			},
			belongList:[],//所属销售列表
			typeArr: [], //公司列表


			showData:false,//
			downTemplate:process.env.API_ROOT+'/custom/template?'+localStorage.getItem('auth')||'',//下载模板
			activeNames:'1',//默认展开
			companyId:this.$route.query.id,
            IsFullCompany:Number(this.$route.query.IsFullCompany)||0,
			isBtnShow:{
				BtnEdit:'',
				BtnDelete:'',
			},
			dataForm2:null,
			dataForm:null,
			fromArr:[
				'无',
				'七禾',
				'万德',
				'潮汛课堂',
				'进门',
				'全时',
				'鑫乐',
				'沃理',
			],//客户来源
			authList:[],//权限列表1
			authList2:[],
			search_txt:'',
			userTable:[],//联系人表格
			total:1,
			page_no:1,
			isAddContact:false,//联系人弹窗
			userId:'',//联系人id
			diaform:{
				companyName:'',
				name:'',
				sex:1,
				telCode:'86',
				tel1:'',
				tel2:'',
				mail:'',
				post:'',
				desiger:'',
				depart:'',
				carte:'',
				mailQY:'',
				telQY:'',
				Source:'add_user',
			},//联系人表单
			defaultName:'',//默认公司名称
			diatit:'新增联系人',
			isRead:false,//阅读弹窗
			readTit:'研报统计',
			readId:'',
			showViewer:false,//名片预览
			imgView:'',
			dealList:[],//合同列表
			isPreview:false,//合同弹窗
			isShowImportDia:false,//导入联系人弹窗
			importData:[],//要导入的信息
			isImportRepeat:false,//导入数据出现重复
			repeatData:[],//重复的联系人
			importParams:null,
			productName:'',
			regionType:'',
			isContractButtonShow:true, //不是同一销售不允许操作 //true 默认可以操作

			companyStatus:"",// 删除联系人时根据此状态判断是否为 试用、正式、永续

			showChartAuthPop:false,//图表权限弹窗
			chartAuthClassifyList:[],
			chartAuthUserInfo:{},

			productReadInfoShow:false,//分产品阅读统计弹窗
			productReadId:0,//联系人ID
			productReadTitle:'',//分产品阅读统计弹窗的标题

			platform_type: 1,
			subProductName: '',//分产品名称
			clickToal:'',//点击量
			platformOption: [],

			IsSubscribe:[],//是否关注公众号

			isShowResearchNumber:false,// 研选服务点数明细 弹框
			isShowDlgType:'',
		};
	},
	methods: {
		
		// 显示配置联系人图库权限弹窗
		async handleShowChartAuth(item){	

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

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

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


		// 导入联系人弹窗中的移动至当前客户
		handleMoveToCurrentCustom(e,index){
			let SellerId=localStorage.getItem('AdminId')
			let params={
				CompanyId: Number(this.companyId),
				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){
					this.$message.success("移动成功！");
					this.repeatData[index].HasMove=false
				}
			})
		},


		//点击预览历史签约中的合同附件
		preViewConstractFile(e) {
			console.log(e);
			this.constractFileImgList=[]
			if(e instanceof Array){
				e.forEach(item=>{
					if(item.type==='img'){
						this.constractFileImgList.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');
				}
				
			}
		},

		//获取公司对应的销售列表
		getCompanySeller(){
			this.moveForm.belongUser=null
			customInterence.companySellerList({CompanyId:Number(this.moveForm.companyId)}).then(res=>{
				if(res.Ret===200){
				if(!res.Data.List){
					this.hideBelongUser=true
					this.moveRule.belongUser[0].required=false
					return
				}
				if(res.Data.List.length===1){
					this.moveForm.belongUser=res.Data.List[0].AdminId
				}
				this.belongList=res.Data.List
				this.moveRule.belongUser[0].required=true
				this.hideBelongUser=false
				}
			})
		},

		//显示移动联系人弹窗
		handleShowMove(e){
			this.userId = e.UserId;
			this.isMoveShowTips=e.IsChartPermissionSetting==0?false:true
			this.isMove=true
		},

		//关闭移动联系人弹窗
		cancelMove(){
			this.isMove=false
			this.isMoveShowTips=false
			this.hideBelongUser=false
			this.moveForm.companyId=''
			this.moveForm.belongUser=''
			this.moveRule.belongUser[0].required=true
			this.$refs.moveFormvalidate.resetFields();
		},

		//提交移动联系人
		submitMove(){
			this.$refs.moveFormvalidate.validate((valid,key)=>{
				if(!valid) return
				console.log(this.moveForm.companyId,this.moveForm.belongUser,this.userId);
				customInterence
				.moveCustom({
					CompanyId:Number(this.moveForm.companyId),
					SellerId:Number(this.moveForm.belongUser)||0,
					UserId:Number(this.userId)
				}).then(res=>{
					if(res.Ret===200){
						this.$message.success('移动成功');
						this.$router.go(0)
					}
				})
			})
		},

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


		/* 获取客户详情 */
		async getDetail() {
			const res = this.IsFullCompany
				? await customAllInterence.customDetail({
					CompanyId:this.companyId
				})
				: await customInterence.customDetail({
					CompanyId:this.companyId
				})
			if(res.Ret!==200) return 
			this.isContractButtonShow=res.Data.IsContractButtonShow
			this.formatCustomDetail(res)
		},
		formatCustomDetail(res){
					this.showData = true;
					this.isBtnShow = res.Data.BtnItem;
					this.regionType=res.Data.Item.RegionType
					let ficcform = res.Data.FiccItem;//ficc添加的信息
					let basicform = res.Data.Item;//客户基本信息
					let raiform = res.Data.RaiItem;//权益添加的信息

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

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

					this.companyStatus=res.Data.CreateAuth == 1?this.ficcform.Status:this.raiform.Status
				
					
					/* 基础表单 */
					this.dataForm = {
						area:basicform.RegionType,
						custom_name:basicform.CompanyName,
						code:basicform.CreditCode,
						province:basicform.Province,
						city:basicform.City,
						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
					}
					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;
						// 
						if(raiform) {
							this.dataForm2 = {
								cuStatus:raiform.Status,
								custype:'权益',
								trade:raiform.IndustryName,
								from:raiform.Source,
								sales:raiform.SellerName,
								addreason:raiform.Reasons,
							}
							/* 处理权限列表格式 */
							let auth2 = [];
							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,
								}
								auth2.push(obj)
							})	
							this.authList2 = auth2;
						}
					}else if (res.Data.CreateAuth == 2){ //权益创建客户
						// /* 基础表单 */
						// this.dataForm = {
						// 	custom_name:basicform.CompanyName,
						// 	code:basicform.CreditCode,
						// 	province:basicform.Province,
						// 	city:basicform.City,
						// 	cuStatus:raiform.Status,
						// 	custype:'权益',
						// 	trade:raiform.IndustryName,
						// 	from:raiform.Source,
						// 	sales:raiform.SellerName,
						// 	addreason:raiform.Reasons
						// }
						/* 处理权限列表格式 */
						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;
						//
						if(ficcform) {
							this.dataForm2 = {
								cuStatus:ficcform.Status,
								custype:'ficc',
								trade:ficcform.IndustryName,
								from:ficcform.Source,
								sales:ficcform.SellerName,
								addreason:ficcform.Reasons
							};
							/* 处理权限列表格式 */
							let auth2 = [];
							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,
								}
								auth2.push(obj)
							})
							this.authList2 = auth2;
						}
					}
		},
		/* 获取联系人列表 */
		getuserTable() {
			const subProductArr = this.platform_type.split('-');
			customInterence.concactList({
				PageSize:10,
				CurrentIndex:this.page_no,
				CompanyId:this.companyId,
				KeyWord:this.search_txt,
				ProductType: Number(subProductArr[0]),
				ProductId: Number(subProductArr[1]),
				IsSubscribeHzyj:this.IsSubscribe.includes('1')?1:this.IsSubscribe.includes('2')?0:'',
				IsSubscribeCygx:this.IsSubscribe.includes('3')?1:this.IsSubscribe.includes('4')?0:'',
			}).then(res => {
				if(res.Ret === 200) {
					this.userTable = res.Data.List || [];
					this.total = res.Data.Paging.Totals
				}else {
					this.userTable = []
				}
			})
		},
		/* 获取历史签约 */
		getDealList() {
			customInterence.historydeal({
				CompanyId:this.companyId,
				CompanyType:this.RoleType
			}).then(res => {
				if(res.Ret === 200) {
					let auth = [];
					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
					})
					this.dealList = res.Data.List || []
				}
			})
		},
		/* 查看历史签约 */
		previewHistory() {
			this.isPreview = true
		},
		/* 编辑客户 */
		editHandle() {
			this.$router.push({
				path:'/editCustom',
				query: {
					id:this.companyId
				}
			})
		},
		/* 删除客户 */
		delHandle() {
			this.$confirm('是否确认删除该客户吗?','提示',{
				type:'warning'
			}).then(() => {
				customInterence.customDel({
					CompanyId:Number(this.companyId)
				}).then(res => {
					if(res.Ret === 200) {
						this.$message.success(res.Msg)
						//this.$router.go(-1);
						this.$router.push({path:'/customList'})
					}
				})
			}).catch(() => {});
		},
		/* 搜索联系人 */
		searchUser() {
			this.page_no = 1;
			this.getuserTable();
		},
		/* 新增联系人 */
		addConcat() {
			
			this.diaform.companyName = this.dataForm.custom_name;
			this.defaultName = this.dataForm.custom_name;
			this.isAddContact = true;
			this.diatit = '新增联系人'
			// 客户ID
			
			customInterence.customDetail({
				CompanyId: window.location.search.split("=")[1]
			}).then((res) =>{
				// 得知用户是FICC或是权益
			
				this.ProductName =res.Data.ProductName;
			}).catch((err)=>{
				console.log(err)
			})
		},
		/* 编辑联系人 */
		editContact(item) {
			this.defaultName = item.CompanyName;
			this.diaform = {
				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
			}
		
			this.userId = item.UserId;
			this.isAddContact = true;
			this.diatit = '编辑联系人';
		},
		// 关注与取消关注
		followContact(row){
			// console.log(row);
			let isFollow = row.IsFollow==1
			let confirmText = isFollow?'是否取消':'是否设为'
			this.$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){
						this.$message.success(isFollow?"取消成功":"关注成功")
						this.getuserTable()
					}
				})

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

			if(this.companyStatus=='试用'||this.companyStatus=='正式'||this.companyStatus=='永续'||this.companyStatus=='冻结'){
				const roleType=localStorage.getItem('RoleType')
				if(roleType!='admin'){
					let res=await customInterence.companyUserTotal({CompanyId:this.companyId})
					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:this.companyId,ProductId:arr[0]})
						if(res.Ret==200&&res.Data.Total<=1){
							tag=false
						}
					}
					
					if(arr.length>1){
						let res1=await customInterence.companyUserTotal({CompanyId:this.companyId,ProductId:arr[0]})
						let res2=await customInterence.companyUserTotal({CompanyId:this.companyId,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 delConcat(item) {
			let flag=await this.beforeDelConcat(item)
			if(!flag){
				this.$confirm('当前只有一个联系人，无法删除','提示',{
					confirmButtonText: '知道了',
					showCancelButton:false,
					type: 'warning',
				})
				return
			}
			
			// let totalRes=await customInterence.companyUserTotal({CompanyId:this.companyId})
			// if(totalRes.Ret===200){
			// 	console.log(this.companyStatus);
			// 	if(totalRes.Data.Total<=1&&(this.companyStatus=='试用'||this.companyStatus=='正式'||this.companyStatus=='永续'||this.companyStatus=='冻结')){
			// 		this.$confirm('当前只有一个联系人，无法删除','提示',{
			// 			confirmButtonText: '知道了',
			// 			showCancelButton:false,
			// 			type: 'warning',
			// 		})
			// 		return
			// 	}
			// }else{
			// 	return
			// }

			this.$confirm('是否确认删除该联系人吗?','提示',{
				type:'warning'
			}).then(() => {
				customInterence.concactDel({
					UserId:item.UserId
				}).then(res => {
					if(res.Ret === 200) {
						this.$message.success(res.Msg)
						this.page_no = 1
						this.getuserTable()
						// let index = this.userTable.indexOf(item);
						// this.userTable.splice(index,1);
						// this.total = this.total-1;
					}
				})
			}).catch(() => {});
		},


		/* 取消弹窗 */
		canceldialog(type) {
			this.isAddContact = false;
			this.userId = '';
			this.defaultName = this.dataForm.custom_name;
			this.diaform = {
				companyName:this.dataForm.custom_name,
				name:'',
				telCode:'86',
				sex:1,
				tel1:'',
				tel2:'',
				mail:'',
				post:'',
				desiger:'',
				depart:'',
				carte:''
			}
			if(type==1) {
				this.getuserTable();
			}
		},
		/* 页码改变 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getuserTable();
		},
		/* 查看阅读报告列表 */
		lookReport(item) {
			this.readId = item.UserId;
			this.readTit = item.RealName+'研报统计';
			this.isRead = true;
		},
		/* 关闭阅读报告弹窗 */
		cancelRead() {
			this.readTit = '研报统计';
			this.isRead = false;
		},
		/* 预览名片 */
		reviewCard(card) {
			this.showViewer = true;
			this.imgView = card;
		},
		/* 关闭预览 */
		closeViewer() {
			this.imgView = '';
			this.showViewer = false;
		},
		/* 导入联系人打开弹窗 */
		async importHandle() {
			let totalRes=await customInterence.companyUserTotal({CompanyId:this.companyId})
			if(totalRes.Ret===200){
				if(totalRes.Data.Total>=1) {
					
					setTimeout(() => {
						$('#fileImport').click();
					})

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

    lookReadInfo(item){
      if(!item.YbProductViewTotal) return 
      this.productReadId = item.UserId
      this.productReadTitle = item.RealName + '其他统计'
			this.clickToal = item.YbProductViewTotal
      this.productReadInfoShow = true
    },

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

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

		changeSubscribe(){
			this.search_txt = '';
			this.getuserTable();
		},
	// 研选服务、专项调研明细
	clickDlgNumberHandler(type){
		this.isShowDlgType = type
		this.isShowResearchNumber =true
	},
	// 设置表格行的样式
	setRowClass({row}){
		if(row.NotRead && row.IsFollow==1){
			return "not-read-seven-days"
		}
	}
	},
	mounted() {
		this.getDetail();
		this.getSubProductList();
		this.getDealList();
	},
}
</script>
<style lang='scss'>
.contact-opt-box{
	.chart{
		display: inline-block;
		cursor: pointer;
		margin-left: 5px;
	}
}
.el-icon-arrow-right:before{
	color: #1989FA;
}
.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;
	}
	.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;
	}
	.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>