<script setup>
import { ref, watch } from 'vue'
import { customInterence } from '@/api/api.js'
import { ElMessage, ElMessageBox } from 'element-plus';

const props = defineProps({
  id: {
    type:Number,
    default:0
  }
})

watch(
  () => props.id,
  () => {
    getCustomProcess();
  }
)


const activities=ref([])
const show=ref(false)
// 显示未续约说明按钮类型
const specialOperationList=ref(['edit_renewal_reason','add_renewal_reason','add_try_out_reason'])
const isShowBtn=ref(false)	// 是否显示添加未续约说明按钮
const ficcProcess=ref([])
const raiProcess=ref([])
/* 获取客户进度流程*/
function getCustomProcess() {
  customInterence.processList({
    CompanyId:props.id
  }).then(res => {
    if(res.Ret === 200) {
      isShowBtn.value=res.Data.ShowButton
      activities.value = res.Data.List&&res.Data.List.map(item=>{
        return {
          ...item,
          CreateTime:item.CreateTime.replace(/-/g,'.')
        }
      }) || [];
      //将进度流程拆分为FICC和权益
      ficcProcess.value = activities.value.filter(item=>item.ProductName==='ficc')
      raiProcess.value = activities.value.filter(item=>item.ProductName!=='ficc')
      changeTimeLineData('ficc')
      if(!ficcProcess.value.length&&raiProcess.value.length){
        changeTimeLineData('rai')
      }
    }
  })
}
getCustomProcess()

const timeLineType=ref('')
const timeLineData=ref([])
//改变时间线展示的内容
function changeTimeLineData(type){
  if(type===timeLineType.value) return 
  timeLineType.value = type
  type==='ficc'&&(timeLineData.value = ficcProcess.value)
  type==='rai'&&(timeLineData.value = raiProcess.value)
  document.querySelector('.timeline-wrap')&&(document.querySelector('.timeline-wrap').scrollTop = 0)
}



//显示冻结理由
function showFreeze(e){
  ElMessageBox.confirm(e.ApproveContent, '冻结理由', {
    confirmButtonText: '知道了',
    showCancelButton:false,
    type: 'info '
  })
}
//展示关闭理由
function showCloseRemark(data){
  ElMessageBox.confirm(`${data.ApproveContent}`,'关闭理由',{
    confirmButtonText: '知道了',
    showCancelButton:false
  }).then(()=>{}).catch(()=>{})
}


const isShowDia=ref(false)	// 是否显示弹窗
const activeActivity=ref({})	// 当前流程内容
//显示续约说明
function showRemark(e){
  activeActivity.value=e
  isShowDia.value=true
}
//关闭续约说明
function closeDia(){
  activeActivity.value={}
  isShowDia.value=false
}


const isShowAddDia=ref(false)	// 是否显示添加说明弹窗
const remark=ref('')	// 填写的备注
const toDoRemark=ref('')//to do 事项
const isGiveUp=ref(false)	// 是否不再跟进
// 显示添加说明弹窗
function showAddRemark(e){
  console.log(e);
  activeActivity.value=e
  isShowAddDia.value=true
}
//添加未续约说明
async function addRemark(){
  if(!remark.value&&!isGiveUp.value) return ElMessage.warning('请输入最新情况')
  if(!toDoRemark.value&&!isGiveUp.value) return ElMessage.warning('请填写To Do事项')
  // 如果选中不再跟进,需要在备注中添加额外内容
  const addRemark = isGiveUp.value?remark.value?'。客户无续约意向，不再跟进（转为冻结客户）':'客户无续约意向，不再跟进（转为冻结客户）':''
  // 参数
  const params = {
    CompanyId:activeActivity.value.CompanyId,
    ProductId:activeActivity.value.ProductId,
    Remark:remark.value+addRemark,
    RenewalTodo:toDoRemark.value,
    Renew:isGiveUp.value?1:0
  }
  let res = null
  if(activeActivity.value.Operation==='try_out'){
    params.OperationId=activeActivity.value.Id
    // 是正式转试用添加说明
    res = await customInterence.addTryOutRenewalReason(params)
  }else{
    // 添加说明
    res = await customInterence.sellerAddListRemark(params)
    
  }
  if(res.Ret===200){
    // 关闭添加弹窗和未续约说明弹窗
    getCustomProcess()
    cancelAddRemark()
    closeDia()
    ElMessage.success('添加成功')
  }
}
//取消添加未续约说明
function cancelAddRemark(){
  remark.value=''
  toDoRemark.value=''
  isGiveUp.value=false
  isShowAddDia.value=false
}



</script>
<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)}}
					<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.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
      draggable
      v-model="isShowDia"
      :modal-append-to-body='false'
      center
      width="670px"
      @close="closeDia"
    >
      <template #header>
        <div style="display:flex;alignItems:center;">
          <span style="fontSize:16px;color:#fff;fontWeight:bold;">未续约说明</span>
        </div>
      </template>
			<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
      v-model="isShowAddDia"
			:modal-append-to-body='false'
			width="670px"
      @close="cancelAddRemark"
      draggable
    >
      <template #header>
        <div>
          <img width="15" :src="require('@/assets/img/icons/warn.png')" alt="" style="position:relative;top:2px">
          <span>添加说明</span>
        </div>
      </template>
			<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>
<style scoped 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;
	}
	:deep(.el-timeline-item__tail) {
		border-color: #409EFF;
	}
	:deep(.el-timeline-item__timestamp.is-top) {
		color: #999;
		margin-bottom: 4px;
	}
	:deep(.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>