<template>
	<div class="Capprovaldia_container">
	<el-dialog
	:visible.sync="isApproval"
	:close-on-click-modal="false"
	:modal-append-to-body='false'
	@close="cancelHandle"
	center
	top="5vh"
	v-dialogDrag
	width="1000px">
		<div slot="title" style="display:flex;alignItems:center;">
			<img :src="title=='领取审批'?$icons.pick:title=='解冻审批'?$icons.lock:$icons.delay" style="color:#fff;width:16px;height:16px;marginRight:5px;">
			<span style="fontSize:16px;">{{title}}</span>
		</div>
		<div class="dialog_cont">
			<div class="left_cont">
				<div class="detail_info">
					<!-- 领取审批 -->
					<template v-if="title.indexOf('领取审批')!=-1">
						<div class="info_item">
							<span>客户名称：{{approvalInfo.CompanyName}}</span>
							<span class="label-style">客户状态：{{approvalInfo.Status}}</span>
						</div>
						<div class="info_item">
							<span>原&nbsp;&nbsp;销&nbsp;售：{{approvalInfo.SellerName}}</span>
							<!-- <span class="label-style">申请时间：{{approvalInfo.ApprovalTime}}</span> -->
							<span></span>
						</div>
						<CapprovalPession :perssionList="perssionList" :approvalTime="approvalInfo.ApprovalTime"/>
						<div class="info_item">
							<span>申请理由：{{approvalInfo.ApplyReasons}}</span>
							<span></span>
						</div>
					</template>
					<!-- 解冻审批 -->
					<template v-else-if="title.indexOf('解冻审批')!=-1">
						<div class="info_item">
							<span>客户名称：{{approvalInfo.CompanyName}}</span>
							<span class="label-style">客户状态：{{approvalInfo.Status}}</span>
						</div>
						<div class="info_item">
							<span>冻结期限：{{approvalInfo.FreezeStartDate|formatTime}}-{{approvalInfo.FreezeEndDate|formatTime}}</span>
							<span class="label-style">到期天数：{{approvalInfo.FreezeExpireDays}}</span>
						</div>
						<!-- <div class="info_item">
							<span>申请时间：{{approvalInfo.ApprovalTime}}</span>
							<span></span>
						</div> -->
						<CapprovalPession :perssionList="perssionList" :approvalTime="approvalInfo.ApprovalTime"/>
						<div class="info_item">
							<span>解冻理由：{{approvalInfo.ApplyReasons}}</span>
							<span></span>
						</div>
					</template>
					<!-- 延期审批 -->
					<template v-else-if="title.indexOf('延期审批')!=-1">
						<div class="info_item">
							<span>客户名称：{{approvalInfo.CompanyName}}</span>
							<span class="label-style">社会信用码：{{approvalInfo.CreditCode}}</span>
						</div>
						<div class="info_item">
							<span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：{{approvalInfo.Address}}</span>
							<span class="label-style">客&nbsp;户&nbsp;状&nbsp;态：{{approvalInfo.Status}}</span>
						</div>
						<div class="info_item">
							<span>客户类型：{{approvalInfo.CompanyType}}</span>
							<span class="label-style">客&nbsp;户&nbsp;来&nbsp;源：{{approvalInfo.Source}}</span>
						</div>
						<div class="info_item">
							<span>行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：{{approvalInfo.IndustryName}}</span>
							<span class="label-style">所&nbsp;属&nbsp;销&nbsp;售：{{approvalInfo.SellerName}}</span>
						</div>
						<!-- <div class="info_item">
							<span>申请时间：{{approvalInfo.ApprovalTime}}</span>
							<span></span>
						</div> -->
						<CapprovalPession :perssionList="perssionList" :approvalTime="approvalInfo.ApprovalTime"/>
						<div class="info_item">
							<span>申请理由：{{approvalInfo.ApplyReasons}}</span>
							<span></span>
						</div>
					</template>
				</div>
				<div class="bot_form">
					<div style="marginBottom:20px;">
						<label style="marginRight:40px;fontSize:16px;position:relative;padding-left:18px;">
							<i style="color:#f00;fontSize:20px;position:absolute;left:0;top:20%;">*</i>
							审批状态
						</label>
						<el-radio-group v-model="status" size="medium" :disabled="isLook">
							<el-radio label="通过"></el-radio>
							<el-radio label="驳回" style="marginLeft:0;"></el-radio>
						</el-radio-group>
					</div>
					<div v-if="status=='驳回'">
						<label style="display:block;marginBottom:10px;fontSize:16px;position:relative;padding-left:18px;">
							<i style="color:#f00;fontSize:20px;position:absolute;left:0;top:20%;">*</i>
							驳回理由
						</label>
						<el-input type="textarea" v-model="reason" rows="4" style="width:100%;" placeholder="输入理由"
						:disabled="isLook"></el-input>
					</div>
				</div>
			</div>
			<!-- 时间线 -->
			<div class="line_cont">
				<el-timeline>
					<el-timeline-item
						v-for="(activity, index) in activities"
						:key="index"
						:timestamp="activity.CreateTime"
						color="#409EFF"
						placement="top">
						{{activity.SysRealName+activity.Remark}}
					</el-timeline-item>
				</el-timeline>
			</div>
		</div>
		<div style="display:flex;justify-content:center;margin:60px 0 50px;">
			<!-- 只查看 -->
			<el-button type="primary" style="width:80px;" @click="cancelHandle" v-if="isLook">关闭</el-button>
			<template v-else>
				<el-button type="primary" style="width:80px;marginRight:24px;" @click="saveHandle">确定</el-button>
				<el-button  type="primary" plain style="width:80px;" @click="cancelHandle">取消</el-button>
			</template>
		</div>
	</el-dialog>
	</div>
</template>

<script>
import { customInterence } from '@/api/api.js'
import CapprovalPession from './CapprovalPession.vue'
export default {
	name:'',
	components: { CapprovalPession },
	props:{
		/* 标题 */
		title:{
			type:String
		},
		isApproval:{
			type:Boolean
		},
		approvalInfo:{
			type:Object
		},
		isLook: {
			type:Boolean,
			default:false
		}
	},
	data () {
		return {
			activities:[],
			status:'通过',
			reason:'',
			perssionList:[],//申请的权限列表
		};
	},
	watch:{
		'isApproval': {
			handler() {
				this.isApproval === true && this.getCustomProcess();
				this.isApproval === true && this.getPermissionList()
			}
		},
		approvalInfo: {
			handler(newval) {
				this.approvalInfo = newval;
				this.status = this.isLook?(this.approvalInfo.ApproveStatus=='已审批'?'通过':this.approvalInfo.ApproveStatus) :  '通过';
				this.reason = this.isLook?this.approvalInfo.ApproveRemark : ''
			}
		},
	},
	methods: {
		/* 获取客户进度流程*/
		getCustomProcess() {
			customInterence.processList({
				CompanyId:this.approvalInfo.CompanyId
			}).then(res => {
				if(res.Ret === 200) {
					this.activities = res.Data.List&&res.Data.List.map(item=>{
						return {...item,CreateTime:item.CreateTime.replace(/-/g,'.')}
					})||[];
				}
			})
		},
		/* 获取申请的权限列表 */
		getPermissionList() {
			customInterence.approvalPermission({
				ApprovalId: Number(this.approvalInfo.CompanyApprovalId)
			}).then(res => {
				if(res.Ret === 200) {
					/* 判断类型展示不同的申请列表 */
					// let role = localStorage.getItem('Role');
					// this.perssionList = role === 'ficc_admin' ? res.Data.FiccPermissionList : role === 'rai_admin' ? res.Data.PermissionList : []
					this.perssionList=this.approvalInfo.ProductId===1?res.Data.FiccPermissionList:res.Data.PermissionList
					let bol_have = this.perssionList.some(item => {
						return item.CheckList.length
					})
					this.perssionList = bol_have ? this.perssionList : [];
				}
			})
		},
		/* 确定 */
		saveHandle() {
			if(this.status == '驳回' && !this.reason) {
				this.$message.warning('请填写驳回理由！');
			}else {
				customInterence.Approval({
					CompanyId:this.approvalInfo.CompanyId,
					Remark:this.reason,
					Status:this.status=='通过'?1:2,
					ProductId:this.approvalInfo.ProductId
				}).then(res => {
					if(res.Ret === 200) {
						this.$message.success(res.Msg);
						this.status = '通过';
						this.reason = '';
						this.$emit('approvalOver');
					}
				})
			}
		},
		/* 取消 */
		cancelHandle() {
			// this.status = '通过';
			// this.reason = '';
			this.perssionList = []
			this.$emit('cancelHandle');
		}
	},
	created() {},
	mounted() {
	},
}
</script>
<style lang='scss'>
.Capprovaldia_container {
	* {box-sizing: border-box;}
	.dialog_cont {
		display: flex;
		justify-content: space-between;
		.left_cont {
			width: 70%;
			.detail_info {
				border: 1px solid #AAB4CC;
				border-radius: 4px;
				padding: 30px 20px;
				.info_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 16px;
					color: #666;
					margin-bottom: 15px;
					.label-style {
						width:260px;
					}
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
			.bot_form {
				margin-top: 30px;
			}
		}
		.line_cont {
			box-sizing: border-box;
			min-width: 25%;
			height: 362px;
			overflow-y: auto;
			padding: 28px 14px;
			border: 1px solid #AAB4CC;
			border-radius: 4px;
			.el-timeline-item__tail {
				border-color: #409EFF;
			}
			.el-timeline-item__timestamp.is-top {
				color: #999;
				margin-bottom: 4px;
			}
			.el-timeline-item__content {
				color: #999;
			}
		}
	}
}
</style>