<template>
	<div class="Ctimeline_container" v-if="activities.length">
		<div class="timeline-tab" v-if="ficcProcess.length&&raiProcess.length">
			<span :class="{'active':timeLineType==='ficc'}" @click="changeTimeLineData('ficc')">FICC</span>
			<span :class="{'active':timeLineType==='rai'}" @click="changeTimeLineData('rai')">权益</span>
		</div>
		<div class="timeline-wrap" :style="{maxHeight:`${(ficcProcess.length&&raiProcess.length)?'430px':'490px'}`}">
			<el-timeline>
				<el-timeline-item
					v-for="(activity, index) in timeLineData"
					:key="index"
					:timestamp="activity.CreateTime"
					color="#409EFF"
					placement="top">
					{{activity.SysRealName+(specialOperationList.includes(activity.Operation)?'添加未续约说明':activity.Remark)}}
					<!-- {{activity.SysRealName+activity.Remark}} -->
					<span v-if="activity.Operation=='freeze'&&activity.ApproveContent" class="freeze-text" @click="showFreeze(activity)">冻结理由</span>
					<span v-if="(specialOperationList.includes(activity.Operation))&&activity.ApproveContent" @click="showRemark(activity)" class="freeze-text">未续约说明</span>
					<!-- <span v-if="activity.Operation=='try_out'&&!isHasTryOutRenewalReason" class="freeze-text" @click="showAddRemark(activity)">添加说明</span> -->
					<span v-if="activity.Remark=='正式转试用'" class="freeze-text" @click="showAddRemark(activity)">添加未续约说明</span>
					<span v-if="activity.Operation==='close'&&activity.ApproveContent" @click="showCloseRemark(activity)" class="freeze-text">关闭理由</span>
				</el-timeline-item>
			</el-timeline>
		</div>
		
		<!-- 冻结理由弹窗 -->
		<!-- <el-dialog
		:visible.sync="show"
		:modal-append-to-body='false'
		:show-close="true"
		center
		width="800px">
			<div slot="title" style="display:flex;alignItems:center;">
				<img src="../../../assets/img/freeze-icon.png" alt="" width="16" style="margin-right:10px">
				<span style="fontSize:16px;color:#fff;fontWeight:bold;">冻结理由</span>
			</div>
			<div style="font-size:14px;line-height:2">{{freezeReason}}</div>
			<div style="text-align:center;margin:30px 0">
				<el-button type="primary" style="marginRight:24px;" @click="show=false">确定</el-button>
				<el-button  type="primary" plain style="width:80px;" @click="show=false">取消</el-button>
			</div>
		</el-dialog> -->
		<!-- 未续约说明弹窗 -->
		<el-dialog
		v-dialogDrag
		:visible.sync="isShowDia"
		:modal-append-to-body='false'
		center
		width="670px"
		@close="closeDia">
			<div slot="title" style="display:flex;alignItems:center;">
				<span style="fontSize:16px;color:#fff;fontWeight:bold;">未续约说明</span>
			</div>
			<div style="min-height:300px">
			<div style="font-size:14px;line-height:2">
				<span>最新情况：</span>
				<span>{{activeActivity.ApproveContent}}</span>
			</div>
			<div style="font-size:14px;line-height:2">
				<span>To Do事项：</span>
				<span>{{activeActivity.ApproveContentExtra}}</span>
			</div>
			</div>
			<div style="text-align:center;margin:30px 0">
				<el-button  type="primary" plain style="width:80px;" @click="closeDia">关闭</el-button>
				<el-button type="primary" style="marginRight:24px;" @click="isShowAddDia=true">添加说明</el-button>
			</div>
		</el-dialog>
		<!-- 添加说明弹窗 -->
		<el-dialog
      		:visible.sync="isShowAddDia"
			:modal-append-to-body='false'
			width="670px"
      		@close="cancelAddRemark"
      		v-dialogDrag
    	>
			<div slot="title">
				<img width="15" :src="require('@/assets/img/icons/warn.png')" alt="" style="position:relative;top:2px">
				<span>添加说明</span>
			</div>
			<div>
				<div style="margin-bottom:5px">最新情况</div>
				<el-input type="textarea" v-model.trim="remark" :autosize="{ minRows: 8, maxRows: 12}" placeholder="请填写最新情况" resize="none"></el-input>
				<div style="margin-bottom:5px;margin-top:15px">To Do事项</div>
        		<el-input type="textarea" v-model.trim="toDoRemark" :autosize="{ minRows: 8, maxRows: 12}" placeholder="请填写To Do事项" resize="none"></el-input>
				<el-checkbox v-model="isGiveUp" style="margin:20px 10px 0;">客户无续约意向，不再跟进（转为冻结客户）</el-checkbox>
				<div style="text-align:center;margin:30px 0">
				<el-button type="primary" style="width:152px;margin-right:30px" @click="addRemark">确定</el-button>
				<el-button type="primary" style="width:152px" plain @click="cancelAddRemark">取消</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { customInterence } from '@/api/api.js'
export default {
	name:'Ctimeline',
	components: {},
	props:{
		id:{
			type:Number,
			default:0
		}
	},
	watch: {
		id(newval) {
			this.getCustomProcess();
		}
	},
	data () {
		return {
			activities:[],
			show:false,
			// freezeReason:''
			isShowDia:false,	// 是否显示弹窗
			activeActivity:{},	// 当前流程内容
			isShowAddDia:false,	// 是否显示添加说明弹窗
			remark:'',	// 填写的备注
			toDoRemark:'',//to do 事项
			isGiveUp:false,	// 是否不再跟进
			// 显示未续约说明按钮类型
			specialOperationList:['edit_renewal_reason','add_renewal_reason','add_try_out_reason'],
			isShowBtn: false,	// 是否显示添加未续约说明按钮
			ficcProcess:[],
			raiProcess:[],
			timeLineType:'',
			timeLineData:[]
		};
	},
	methods: {
		/* 获取客户进度流程*/
		getCustomProcess() {
			customInterence.processList({
				CompanyId:this.id
			}).then(res => {
				if(res.Ret === 200) {
					this.isShowBtn=res.Data.ShowButton
					this.activities = res.Data.List&&res.Data.List.map(item=>{
						return {
							...item,
							CreateTime:item.CreateTime.replace(/-/g,'.')
						}
					}) || [];
					//将进度流程拆分为FICC和权益
					this.ficcProcess = this.activities.filter(item=>item.ProductName==='ficc')
					this.raiProcess = this.activities.filter(item=>item.ProductName!=='ficc')
					this.changeTimeLineData('ficc')
					if(!this.ficcProcess.length&&this.raiProcess.length){
						this.changeTimeLineData('rai')
					}
				}
			})
		},

		//显示冻结理由
		showFreeze(e){
			// this.freezeReason=e.ApproveContent
			// this.show=true	
			this.$confirm(e.ApproveContent, '冻结理由', {
				confirmButtonText: '知道了',
				showCancelButton:false,
				type: 'info '
			})
		},

		//显示续约说明
		showRemark(e){
			// this.$confirm(e.ApproveContent, '未续约说明', {
			// 	confirmButtonText: '知道了',
			// 	showCancelButton:false,
			// 	type: 'info '
			// })
			this.activeActivity=e
			this.isShowDia=true
		},
		// 显示添加说明弹窗
		showAddRemark(e){
			console.log(e);
			this.activeActivity=e
			this.isShowAddDia=true
		},
		//关闭续约说明
		closeDia(){
			this.activeActivity={}
			this.isShowDia=false
		},
		//添加未续约说明
		async addRemark(){
			if(!this.remark&&!this.isGiveUp) return this.$message.warning('请输入最新情况')
			if(!this.toDoRemark&&!this.isGiveUp) return this.$message.warning('请填写To Do事项')
			// 如果选中不再跟进,需要在备注中添加额外内容
			const addRemark = this.isGiveUp?this.remark?'。客户无续约意向，不再跟进（转为冻结客户）':'客户无续约意向，不再跟进（转为冻结客户）':''
			// 参数
			const params = {
				CompanyId:this.activeActivity.CompanyId,
          		ProductId:this.activeActivity.ProductId,
				Remark:this.remark+addRemark,
				RenewalTodo:this.toDoRemark,
          		Renew:this.isGiveUp?1:0
			}
			let res = null
			if(this.activeActivity.Operation==='try_out'){
				params.OperationId=this.activeActivity.Id
				// 是正式转试用添加说明
				res = await customInterence.addTryOutRenewalReason(params)
			}else{
				// 添加说明
				res = await customInterence.sellerAddListRemark(params)
				
			}
			if(res.Ret===200){
				// 关闭添加弹窗和未续约说明弹窗
				this.getCustomProcess()
				this.cancelAddRemark()
				this.closeDia()
				this.$message.success('添加成功')
			}
		},
		//取消添加未续约说明
		cancelAddRemark(){
			this.remark=''
			this.toDoRemark=''
			this.isGiveUp=false
			this.isShowAddDia=false
		},
		//展示关闭理由
		showCloseRemark(data){
			this.$confirm(`${data.ApproveContent}`,'关闭理由',{
				confirmButtonText: '知道了',
				showCancelButton:false
			}).then(()=>{}).catch(()=>{})
		},
		//改变时间线展示的内容
		changeTimeLineData(type){
			if(type===this.timeLineType) return 
			this.timeLineType = type
			type==='ficc'&&(this.timeLineData = this.ficcProcess)
			type==='rai'&&(this.timeLineData = this.raiProcess)
			document.querySelector('.timeline-wrap')&&(document.querySelector('.timeline-wrap').scrollTop = 0)
		}
	},
	computed: {
		// 第一个正式转试用索引
		firstTryOutIdx(){
			return this.activities.findIndex(item=>item.Operation==='try_out')
		}
	},
	created() {},
	mounted() {
		this.getCustomProcess();
	},
}
</script>

<style lang='scss' >
.Ctimeline_container {
	box-sizing: border-box;
	min-width: 428px;
	max-height: 550px;
	padding: 30px;
	border: 1px solid #AAB4CC;
	background: #fff;
	border-radius: 4px;
	*{
		box-sizing: border-box;
	}
	.el-timeline-item__tail {
		border-color: #409EFF;
	}
	.el-timeline-item__timestamp.is-top {
		color: #999;
		margin-bottom: 4px;
	}
	.el-timeline-item__content {
		color: #999;
	}
	.freeze-text{
		color: #409EFF;
		font-size: 12px;
		display: inline-block;
		cursor: pointer;
		margin:0 5px;
	}
	.el-timeline{
		margin:5px;
	}
	.timeline-tab{
		display: flex;
		margin-bottom: 30px;
		span{
			flex: 1;
			text-align: center;
			display: inline-block;
			height: 30px;
			line-height: 30px;
			cursor: pointer;
			&.active{
				background-color: #EDF4FF;
				color:#3385FF;
			}
		}
	}
	.timeline-wrap{
		//max-height: calc(550px - 120px);
		overflow-y: auto;
	}
}
</style>