<template>
	<el-dialog
	v-dialogDrag 
	:visible.sync="isShowDia"
	:close-on-click-modal="false"
	:modal-append-to-body='false'
	:show-close="false"
	@close="cancelHandle"
	custom-class="interview_dialog"
	center
	:width="title=='detail'?'600px':'450px'">
		<div slot="title" style="position:relative">
			<span style="fontSize:16px;">{{title==='update'?'状态更新':title==='cancel'?'取消申请':title==='detail'?'访谈详情':'标记处理'}}</span>
			<i class="el-icon-close" style="fontSize:24px;cursor:pointer;position:absolute;right:20px;top:50%;transform:translateY(-50%);" @click="cancelHandle"></i>
		</div>
		<!-- 访谈申请弹窗 -->
		<div class="dialog_cont">
			<!-- 状态更新 -->
			<div v-if="title==='update'">
				<span>{{status=='待邀请'?'状态将跟更新为：待访谈':status=='待访谈' ? '是否将状态更新为已完成？':''}}</span>
				<date-picker 
				v-model="datetime" 
				type="datetime" 
				value-type="format"
				placeholder="请选择访谈时间"
				style="marginTop:20px;"
				v-if="status=='待邀请'"></date-picker>
			</div>
			<!-- 取消申请 -->
			<span v-else-if="title==='cancel' || title==='deal'">{{title==='cancel'?'确定要取消此次访谈申请吗？':'是否确认已处理该用户申请？'}}</span>
			<!-- 访谈详情 -->
			<el-table max-height="260px" :data="itemObj" border v-else>
				<el-table-column align="center" label="相关纪要" width="200px">
					<template slot-scope="scope">
					<span style="color:#409EFF;cursor:pointer;" @click="lookDetail(scope.row.ArticleIdMd5)">{{scope.row.ArticleTitle}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="所属行业" prop="CategoryName">
					<template slot-scope="scope">{{scope.row.CategoryName}}</template>
				</el-table-column>
				<el-table-column align="center" label="访谈时间">
					<template slot-scope="scope">{{scope.row.InterviewTime}}</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="display:flex;justify-content:center;margin:40px 0;">
			<el-button type="primary" style="width:120px;" @click="cancelHandle" v-if="title==='detail'">知道了</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>
</template>

<script>
import { raiInterface } from '@/api/api.js'
export default {
	name:'',
	props: {
		isShowDia: {
			type:Boolean,
			default:false
		},
		title: {
			type:String
		},
		status: {
			type:String
		},
		itemObj: {
			type:Array
		},
		applyId: {
			type:Number
		}
	},
	data () {
		return {
			datetime:''
		};
	},
	methods: {
		/* 保存 */
		saveHandle() {
			if(this.title === 'update' || this.title==='cancel') {
				if(this.status=='待邀请' ) {
					this.datetime && this.updateApply()
					!this.datetime && this.$message.warning('访谈时间不能为空')
				}else {
					this.updateApply()
				}
			}
			this.title==='deal' && this.$emit('saveOver')
		},
		/* 取消 */
		cancelHandle() {
			this.datetime = '';
			this.$emit('cancel');
		},
		/* 更新/取消 */
		updateApply() {
			raiInterface.cancelInterview({
				HandleType: this.title=='update' ? 1 : 2,
				InterviewApplyId: Number(this.applyId),
				InterviewTime: (this.title=='update' && this.status=='待邀请') ? this.datetime :''
			}).then(res => {
				if(res.Ret === 200) {
					this.$message.success(res.Msg)
					this.$emit('over')
				}
			})
		},
		lookDetail(id) {
			let url = process.env.NODE_ENV === "production" ? 'https://details.hzinsights.com/cygx/report' : process.env.NODE_ENV === "test" ? 'http://xcxh5test.hzinsights.com/xcx_h5/cygx/report' : 'http://xcxh5test.hzinsights.com/xcx_h5/cygx/report'
			let href = `${url}?id=${id}`;
			window.open(href,'_blank');
		}
	},
	mounted() {
	},
}
</script>
<style lang='scss' scoped>
.dialog_cont {
	padding: 0 10px;
	.node_name {
		font-size: 15px;
		margin-bottom: 20px;
	}
	.node_ipt{
		display:block;
		width: 100%;
		margin: 20px 0;
	}
}
</style>