<template>
	<div class="repair-wrap">
		<Tabs :animated="false" name="repairTab" v-model="curTab">
			<TabPane :label="$t('evaluation.newExercise.innerRepair')" tab="repairTab" name="site">
				<Button type="info" @click="onAddLink('site')">{{$t('evaluation.newExercise.chooseContent')}}</Button>
				<div class="repair-link-wrap-item" v-for="(item,index) in datas.filter(i => i.type === 'file')" :key="index">
						<div class="repair-link-wrap-item-box">
							<p>{{ $t('evaluation.repairResourse.description')}}：{{ item.name }}</p>
							<div style="display: flex;">
								<span>{{ $t('evaluation.repairResourse.link')}}：</span>
								<div>
									<p v-for="(url,urlIndex) in item.blobUrl" :key="urlIndex">
										<span>{{ url.url }}</span>
									</p>
								</div>
							</div>
							<div class="repair-link-tools">
								<span @click="onEditRepair(item,index)">{{ $t('evaluation.repairResourse.edit')}}</span>
								<span @click="onDeleteRepair(item)">{{ $t('evaluation.repairResourse.deleteResource')}}</span>
							</div>
						</div>
				</div>
			</TabPane>
			<TabPane :label="$t('evaluation.newExercise.outRepair')" tab="repairTab" name="outer">
				<Button type="info" @click="onAddLink('normal')">{{$t('evaluation.newExercise.addLink')}}</Button>
				<div class="repair-link-wrap">
					<div class="repair-link-wrap-item" v-for="(item,index) in datas.filter(i => i.type !== 'file')" :key="index">
							<div class="repair-link-wrap-item-box">
								<p>{{ $t('evaluation.repairResourse.description')}}：{{ item.name }}</p>
								<div style="display: flex;">
									<span>{{ $t('evaluation.repairResourse.link')}}：</span>
									<div>
										<p v-for="(url,urlIndex) in item.blobUrl" :key="urlIndex">
											<span>{{ url.url }}</span>
										</p>
									</div>
								</div>
								<div class="repair-link-tools">
									<span @click="onEditRepair(item,index)">{{ $t('evaluation.repairResourse.edit')}}</span>
									<span @click="onDeleteRepair(item)">{{ $t('evaluation.repairResourse.deleteResource')}}</span>
								</div>
							</div>
					</div>
				</div>
			</TabPane>
		</Tabs>
		
		<!-- 关联内容弹窗 -->
		<Modal v-model="isRelatedContent" width="880" footer-hide class="relate-modal related-modal">
		    <div class="modal-header" slot="header">{{$t('evaluation.newExercise.contentRelate')}}</div>
		    <NewChooseContent :showSyllabus="isFalse"
		                   :showOther="isFalse"
		                   :showQuestion="isFalse"
						   :defaultFiles="curRepair.blobUrl"
						   ref="chooseContentRef"
		                   @on-file-change="onSelectFile"></NewChooseContent>
		
		    <Button class="modal-btn" :loading="isLoading" @click="onConfirmRelate">{{$t('evaluation.confirm')}}</Button>
		</Modal>
		
		<!-- 添加补救资源弹窗 -->
		<Modal v-model="isAddRepair" width="600" footer-hide>
		    <div class="modal-header" slot="header">{{ $t('evaluation.repairResourse.addRepair')}}</div>
			<p style="margin: 15px 2px;">{{ $t('evaluation.repairResourse.type')}}</p>
			<Select v-model="curRepair.type" :disabled="isSiteLink">
				<Option value="normal">{{$t('evaluation.newExercise.normalResource')}}</Option>
				<Option value="file">{{$t('evaluation.newExercise.mediaResource')}}</Option>
			</Select>
			<p style="margin: 15px 2px;">{{ $t('evaluation.repairResourse.description')}}</p>
		    <Input v-model="curRepair.name" :placeholder="$t('evaluation.repairResourse.place1')"/>
			<p style="margin: 15px 2px;">{{ $t('evaluation.repairResourse.link')}}{{ isSiteLink ?  '' : $t('evaluation.repairResourse.tip1')}}</p>
			
			<!-- 选择内容 -->
			<Button type="info" @click="isRelatedContent = true" v-if="isSiteLink">{{$t('evaluation.newExercise.chooseContent')}}</Button>
			<!-- 手动输入 -->
			<Input v-model="curOutLink" v-if="!isSiteLink" :placeholder="$t('evaluation.repairResourse.place2')" @on-enter="onAddOutLink"/>
			<!-- 链接link列表 -->
			<div>
				<p v-for="(item,index) in curRepair.blobUrl" class="repair-link-item">
					<span>{{ item.url }}</span>
					<Icon type="md-close" size="18" @click="onDeleteRelateLink(item)"/>
				</p>
			</div>
			<!-- 确认 -->
			<Button type="success" @click="onAddRepair" style="margin-top: 20px;width: 100%;height: 38px;">{{$t('evaluation.repairResourse.confirm')}}</Button>
			
		</Modal>
	</div>
</template>
<script>
    import NewChooseContent from '@/components/selflearn/NewChooseContent'
	export default {
		name:'BaseRepair',
		components: { NewChooseContent },
		props: {
			rapairs: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				datas:[],
				curTab:'site',
				curEditIndex:null,
				curOutLink:'',
				isAddRepair:false,
				isLoading:false,
				isSiteLink:true,
				isRelatedContent:false,
				isFalse:false,
				relateFileList:[],
				defaultFiles:[],
				curRepair:{
					type:'file',
					name:'',
					blobUrl:[]
				}
			}
		},
		created() {
			
		},
		methods: {
			/* 点击添加外部或者内部资源 */
			onAddLink(type){
				this.isSiteLink = type === 'site'
				this.curEditIndex = null
				this.curRepair.name = ''
				this.curRepair.type = type === 'site' ? 'file' : 'normal'
				this.curRepair.blobUrl = []
				this.isAddRepair = true
				this.defaultFiles = []
			},
			
			/* 回车添加外部资源链接 */
			onAddOutLink(){
				if(this.isURL(this.curOutLink)){
					if(this.curRepair.blobUrl.map(i => i.url).indexOf(this.curOutLink) > -1){
						this.$Message.warning(this.$t('evaluation.repairResourse.isExistTip'))
					}else{
						this.curRepair.blobUrl.push({
							url:this.curOutLink
						})
						this.curOutLink = ''
					}
				}else{
					this.$Message.warning(this.$t('evaluation.repairResourse.formatErrorTip'))
				}
				
			},
			
			/* 点击添加资源 */
			onAddRepair(){
				if(this.curRepair.name.trim() === '' || this.curRepair.blobUrl.length === 0){
					this.$Message.warning(this.$t('evaluation.repairResourse.noCompleteTip'))
				}else{
					if(this.curEditIndex || this.curEditIndex === 0){
						this.datas[this.curEditIndex] = JSON.parse(JSON.stringify(this.curRepair))
					}else{
						this.datas.push(JSON.parse(JSON.stringify(this.curRepair)))
					}
					this.isAddRepair = false
				}
			},
			
			/* 编辑当前补救资源 */
			onEditRepair(item,index){
				this.isSiteLink = this.curTab === 'site'
				this.curRepair = JSON.parse(JSON.stringify(item))
				this.isAddRepair = true
				this.curEditIndex = this.datas.indexOf(item)
				this.defaultFiles = this.curTab === 'site' ? this.curRepair.blobUrl : []
			},
			
			/* 删除当前补救资源 */
			onDeleteRepair(item){
				this.datas.splice(this.datas.indexOf(item),1)
			},
			
			/* 删除某个链接地址LINK */
			onDeleteRelateLink(item){
				this.curRepair.blobUrl.splice(this.curRepair.blobUrl.indexOf(item),1)
				this.defaultFiles = this.curRepair.blobUrl
			},
			
			/* 选择内容联动 */
			onSelectFile(val) {
			    this.relateFileList = val.files
				this.curRepair.blobUrl = val.files
			},
			
			onConfirmRelate() {
			    this.isRelatedContent = false
			},
			
			isURL(url) {
			　　const strRegex = '^((https|http|ftp)://)?'//(https或http或ftp):// 可有可无
			　　+ '(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@ 可有可无
			　　+ '(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
			　　+ '|' // 允许IP和DOMAIN（域名）
			　　+ '(localhost)|'    //匹配localhost
			　　+ '([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
			　　+ '\\w+\\.' // 一级域名 -英文或数字 加上.
			　　+ '[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文
			　　+ '(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
			　　+ '((/?)|' // url无参数结尾 - 斜杆或这没有
			　　+ '(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$';//请求参数结尾- 英文或数字和[]内的各种字符
			　　const re = new RegExp(strRegex, 'i'); // 大小写不敏感
			　　if (re.test(encodeURI(url))) {
			　　　　return true;
			　　}
			　　return false;
			}


		},

		mounted() {
			if(this.$refs.chooseContentRef){
				this.$refs.chooseContentRef.clickTab('content')
			}

		},
		watch:{
			rapairs:{
				handler(val){
					/* 转换补救资源格式 根据描述 汇总分组 */
					let namesArr = [...new Set(val.map(i => i.name))]
					let result = []
					namesArr.forEach(name => {
						let urls = []
						let type = ''
						val.forEach(i => {
							if(i.name === name){
								urls.push({ url:i.blobUrl })
								type = i.type
							}
						})
						result.push({
							name:name,
							blobUrl:urls,
							type:type
						})
					})
					this.datas = result
				}
			}
		}
	}
</script>

<style>
	.repair-wrap .ivu-input-wrapper{
		width: 95%;
	}
	
	.repair-wrap .ivu-input{
		height: 40px;
		line-height: 40px;
		display: inline-block;
	}
</style>

<style lang="less" scoped>
	
	.repair-link-item{
		margin: 10px 0;
		padding: 4px 5px;
		background: #a7a7a7;
		color: #fff;
		border-radius: 4px;
		word-break: break-all;
		
		.ivu-icon{
			margin: 5px 10px;
			vertical-align: sub;
			color: red;
			font-weight: bold;
		}
	}
	
	.repair-wrap {
		min-height: 300px;
		
		.repair-link-wrap{
			padding: 10px 0 80px 0;
			
			&-item{
				margin: 20px 0;
				
				&-box{
					position: relative;
					border: 2px dashed #aaaaaa;
					background-color: #ebf9ff;
					border-radius: 5px;
					padding: 10px;
					font-size: 16px;
					
					.repair-link-tools{
						position: absolute;
						right: 20px;
						top: 40%;
						
						span{
							margin-right: 20px;
							cursor: pointer;
						}
					}
				}
				
				.ivu-icon{
					font-size: 24px;
					margin-right: 10px;
					cursor: pointer;
				}
				
				.error-tip{
					color:red;
					margin: 5px;
				}
			}
			
			.flex-row-center{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
		}
	}
</style>
