<template>
    <div class="cp-import-container">
            <div v-if="!isImportFinish" style="padding:40px 0;height:100%">
                <Upload multiple
                        :action="uploadUrl"
                        :headers="headers"
                        :format="['docx']"
                        :on-format-error="handleFormatError"
                        :show-upload-list="isShowList"
                        :before-upload="beforeUpload"
                        :on-success="uploadSuccess">
                        <Icon type="md-cloud-upload" size="150" color="#ffffff" style="margin: 30px 0;"/>
                    <div v-show="isBtnLoading" class="import-loading-wrap">
                        <img src="@/assets/loading/loading.svg" width="100px" />
                    </div>
                </Upload>
				<div class="import-tips">
					<div style="display: flex;margin-bottom: 20px;">
						<Dropdown @on-click="onTemplateSelect">
						        <Button type="primary">
									<Icon type="md-cloud-download"  style="margin-right: 5px;"/>
						            {{$t('evaluation.importFile.templateDownload')}}
						            <Icon type="ios-arrow-down"></Icon>
						        </Button>
						        <DropdownMenu slot="list">
						            <DropdownItem :name="0">中文简体(zh-CN)</DropdownItem>
						            <DropdownItem :name="1">中文繁体(zh-TW)</DropdownItem>
						            <DropdownItem :name="2">英文(en-US)</DropdownItem>
						        </DropdownMenu>
						    </Dropdown>
						<Button type="primary" icon="md-cloud-download" style="margin-left: 20px;" @click="onDownloadDetails">{{$t('evaluation.importFile.downloadDetails')}}</Button>	
					</div>
					
					<p style="font-size:18px;font-weight:bold;color: #fff;">{{$t('evaluation.importFile.importTips')}}</p>
					<p>1.{{$t('evaluation.importFile.tips1')}}</p>
					<p>2.{{$t('evaluation.importFile.tips2')}}</p>
					<p>3.{{$t('evaluation.importFile.tips3')}}</p>
					<p>4.{{$t('evaluation.importFile.tips4')}}</p>
					<p>5.{{$t('evaluation.importFile.tips5')}}</a></p>
					
				</div>
            </div>
    </div>
</template>
<script>
	import FileSaver from "file-saver";
    export default {
        props: ['period', 'subject'],
        data() {
            return {
				curLang:'',
                isBtnLoading: false,
                isSelectFinish: false,
                importLoading: false,
                isImportFinish: false,
                isShowList: true,
                exerciseList: [],
                importPreviewModal: false,
                uploadUrl: '',
				downloadUrls:[{
					url:'/download/%E9%A2%98%E7%9B%AE%E6%A8%A1%E6%9D%BF%E7%AE%80%E4%BD%93.docx',
					fileName:'题目模板（简体）.docx'
				},{
					url:'/download/%E9%A2%98%E7%9B%AE%E6%A8%A1%E6%9D%BF%E7%B9%81%E4%BD%93.docx',
					fileName:'題目範本（繁体）.docx'
				},{
					url:'/download/%E9%A2%98%E7%9B%AE%E6%A8%A1%E6%9D%BF%E8%8B%B1%E8%AF%AD.docx',
					fileName:'TitleTemplate.docx'
				}],
				hostName:''
            }
        },
        created() {
            this.uploadUrl = window.location.origin  + '/import/parse-word '
			this.curLang = localStorage.getItem('local')
			this.hostName = this.$store.state.privateSas ? this.$store.state.privateSas.url : 'https://teammodelstorage.blob.core.chinacloudapi.cn'
        },
        methods: {

            /** 点击导入习题 */
            handleUpload() {
                this.importPreviewModal = true
                this.exerciseList = []
                this.isImportFinish = false
            },
			
			/* 下载模板 */
			async onTemplateSelect(val){
				let curFile = this.downloadUrls[val]
				const downloadRes = async () => {
				      let response = await fetch(this.hostName + curFile.url); // 内容转变成blob地址
				      let blob = await response.blob();  // 创建隐藏的可下载链接
				      let objectUrl = window.URL.createObjectURL(blob);
				      let a = document.createElement('a');
				      a.href = objectUrl;
				      a.download = curFile.fileName;
				      a.click()
				      a.remove(); 
				   }
				  downloadRes();
			},
			
			/* 下载模板制作详情说明文件 */
			onDownloadDetails(){
				const downloadRes = async () => {
				      let response = await fetch(this.hostName + '/download/IES5%E8%AF%95%E5%8D%B7%E6%A8%A1%E6%9D%BF%E5%88%B6%E4%BD%9C%E8%AF%B4%E6%98%8E%EF%BC%88%E7%BB%88%EF%BC%89.pdf'); // 内容转变成blob地址
				      let blob = await response.blob();  // 创建隐藏的可下载链接
				      let objectUrl = window.URL.createObjectURL(blob);
				      let a = document.createElement('a');
				      a.href = objectUrl;
				      a.download = 'IES5试卷导入模板制作说明.pdf';
				      a.click()
				      a.remove(); 
				   }
				  downloadRes();
			},

            importModalChange(val) {
                if (!val) {
                    this.isImportFinish = false
                    this.isSelectFinish = false
                    this.isBtnLoading = false
                    this.importLoading = false
                    this.exerciseList = []
                }
            },

            /** 重新导入文件 */
            onReImport() {
                this.isImportFinish = false
                this.isSelectFinish = false
                this.exerciseList = []
            },

            /** 选择文件上传之前 */
            beforeUpload() {
                this.isBtnLoading = true
                this.isSelectFinish = true
            },

            /**
             * 当上传文件格式错误
             * @param
             */
            handleFormatError() {
                this.$Message.error(this.$t('evaluation.importFile.warningTips1'))
                this.isBtnLoading = false
				this.isSelectFinish = false
            },

            /**
             * 当上传文件超过限制大小
             * @param file
             */
            handleMaxSize() {
                this.$Message.error(this.$t('evaluation.importFile.warningTips2'))
                this.isBtnLoading = false
				this.isSelectFinish = false
            },

            /**
             * 上传文件成功回调
             * @param response
             */
            uploadSuccess(response) {
				if(Array.isArray(response) && response.length){
					this.$Message.success(this.$t('evaluation.importFile.warningTips3'))
					this.$emit('importFinish',response)
					this.isImportFinish = false
					this.isBtnLoading = false
					this.exerciseList = []
				}else{
					this.$Message.error(this.$t('evaluation.importFile.warningTips4'))
					this.isBtnLoading = false
				}
				this.isSelectFinish = false
            },
        },

        mounted() {

        },
        computed: {
            headers() {
                let hd = {}
                hd['Authorization'] = 'Bearer ' + localStorage.getItem('token')
                return hd
            }

        }
    }
</script>

<style scoped lang="less">
	@import "../index/CommonExercise.less";
</style>

<style lang="less">
	.cp-import-container{
		background: #404040;
		height: 100%;
	}
	
    .cp-import-container,
    .cp-import-container .ivu-upload {
		display: flex;
		justify-content: center;
		align-items: center;
		
		.ivu-upload-list{
			display: none;
		}
		
		.ivu-icon{
			cursor: pointer;
		}
		
		.ivu-btn-primary{
			background-color: #00756f;
			border: none;
		}
    }

        .cp-import-container .ivu-upload-drag {
            padding-top:8%;
            background:#2e2e2e;
            border: 1px dashed #626365;
            color: #b8b8b8;
            font-size: 16px;
        }

    .cp-import-container .ivu-modal-body,
    .edit-exercise-modal .ivu-modal-body {
        max-height: 700px;
        overflow: auto;
        padding: 0;
    }


    .cp-import-container .item-explain-details {
        width: 94%;
    }

    .cp-import-container .ivu-modal {
        max-height: 600px;
        position: relative;
    }

    .import-tips {
        padding: 20px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #b8b8b8;
    }

        .import-tips p {
            margin: 5px;
        }

    .cp-import-container .exercise-item:not(:first-child) {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #DEDEDE;
    }

    .cp-import-container .exercise-item .btn-edit-exercise {
        display: none;
    }

    .cp-import-container .exercise-item:hover .btn-edit-exercise {
        display: unset;
    }


    .cp-import-container .import-loading-wrap {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

</style>
