import Modal from '@core/component/modal'
import SourceManage from '@core/component/sourceManage'
import Setting from '../Setting'
import './index.scss'
export default class TopMenu {
	id: string
	element: HTMLElement
	previewDialog: object
	constructor(elment) {
		this.element = elment
		this.render()
		this.bindEvent()
	}
	render(): void {
		const innerHTML = `
            <div class="editor-top-menu">
				<div class="editor-rainbow">
					<div class="editor-colors"></div>
				</div>
				<div class="editor-top-content">
					<div class="editor-top-content-left">
						<span class="editor-name">店铺ISV集成开发环境</span>
					</div>
					<div class="editor-top-content-main">
					</div>	
					<div class="editor-top-content-right">
						<a class="editor-sub-button J_picManager">图片管理</a>
						<a class="editor-sub-button J_app_preview">预览</a>
						<a class="editor-sub-button J_gotoPack" href="//sjs-zx.jd.com/template/modularTemplate.html" target="_blank">我的模块模板</a>
						<a class="icon-setting J_setting"></a>
					</div>	
				</div>
            </div>
        `
		this.element.innerHTML = innerHTML
	}
	bindEvent(): void {
		this.element.querySelector('.J_app_preview').addEventListener('click', () => {
				this.previewDialog = new Modal({
					className: 'cd-preview-qrcode',
					content: `<div class="cd-preview-qrcode-content" style="padding: 30px 0 20px; text-align: center;">
                            <img class="J_qrcode" style="width: 200px; height: 200px" src="https://img12.360buyimg.com/imagetools/jfs/t1/55787/16/21541/2483/62f4c7f4E33674a8c/9887389033809d82.png" alt="">
                            <div class="cd-tip">手机浏览器扫码预览<a class="cd-tip" target="_blank" href="https://opendoc.jd.com/shop/newisv/docs/documents/phoneDebug">调试详情</a></div>
							<a class="cd-tip" target="_blank" href="/iframe#/pages/preview/index">本地预览</a>
                        </div>`,
					showTitleBar: false,
					width: 260,
				})
		})
		this.element.querySelector('.J_picManager').addEventListener('click', () => {
			const args = {
				chooseSizeLimit:2*1024,
				typeLimit: 'jpg,png,gif',
				fileSelectType: 'radio',
				uploadOnly: true
			}
			SourceManage.open(args)
		})
		this.element.querySelector('.J_setting').addEventListener('click', () => {
			const setting = new Setting()
			setting.show()
		})
	}
}