<template>
	<div v-if="FormItemList">
		<template v-for="item in FormItemList">
			<el-form-item
				:key="item.key"
				:label="title(item.title)"
			>
				<template v-if="item.inputType === 'uploadimg'">
					<el-upload
						class="upload-demo"
						:action="url"
						:on-success="uploadSuccess"
						:on-error="uploadError"
						:before-upload="uploadBefore"
						list-type="picture"
						:with-credentials="true"
						:show-file-list="false"
						accept="image/jpeg, image/jpg, image/png"
					>
						<el-button
							size="small"
							type="primary"
							@click="onClickUploadBtn(item.key)"
						>点击上传
						</el-button>
						<div
							slot="tip"
							class="el-upload__tip"
						>只能上传jpg/png文件，且不超过500kb
						</div>
					</el-upload>
					<el-input
						placeholder="请输入图片地址"
						v-model="item.val"
					></el-input>
					<label
						class="prop-intro"
					>{{item.description}}</label>
				</template>
				<template v-if="item.inputType === 'text'">
					<el-input
						:placeholder="`请输入${item.title}`"
						v-model="item.val"
					></el-input>
				</template>
				<template v-if="item.inputType === 'color'">
					<el-color-picker v-model="item.val"></el-color-picker>
				</template>
				<template v-if="item.inputType === 'rich'">
					{{registerEditor(item.key)}}
					<textarea :id="item.key" class="tinymce-textarea"></textarea>
				</template>
				<template v-if="item.inputType === 'select' && item.key === 'fwSource'">
					<el-select v-model="item.val">
						<el-option value="getAntifakeInfo" label="超级8"></el-option>
						<el-option value="checkJtzCode" label="中商"></el-option>
						<el-option value="checkHqCode" label="黑荞"></el-option>
					</el-select>
				</template>
			</el-form-item>
		</template>
	</div>
</template>

<script>
	import tinymce from 'tinymce'
	import 'tinymce/themes/silver/'
	import 'tinymce/skins/ui/oxide/skin.css'
	import './zh_CN'
	import 'tinymce/plugins/code'
	import 'tinymce/plugins/autoresize'

	export default {
		name: 'FormItemList',
		props: ['FormItemList'],
		data () {
			return {
				imgType: '', // 表示当前正在上传哪个图片  bgImg\eLogo
				url: this.sup8._appConf.apiUrl.alioss,
			}
		},
		methods: {
			title (title) {
				if (!title) return ''
				const [titleName] = title.split(',')
				return titleName
			},
			registerEditor (key) {
				this.$nextTick(() => {
					const value = this.FormItemList[key].val
					const setting =
						{
							mode: 'none',
							selector: `#${key}`,
							language: 'zh_CN',
							height: 400,
							resize: true,
							init_instance_callback: editor => {
								if (value) {
									try {
										editor.setContent(decodeURIComponent(value))
									} catch (e) {
										editor.setContent(value)
									}
								}
								editor.on('input undo redo execCommand CloseWindow', (e) => {
									this.FormItemList[key].val = encodeURIComponent(editor.getContent())
								})
							},
							browser_spellcheck: false, // 拼写检查
							branding: false, // 去水印
							// elementpath: false,  //禁用编辑器底部的状态栏
							statusbar: false, // 隐藏编辑器底部的状态栏
							paste_data_images: true, // 允许粘贴图像
							menubar: false, // 隐藏最上方menu
							plugins: 'code,autoresize',
							toolbar: 'code fontselect fontsizeselect forecolor backcolor bold italic underline alignleft aligncenter alignright alignjustify',
						}
					tinymce.init(setting)
				})
			},
			onClickUploadBtn (type) {
				this.imgType = type
			},
			uploadSuccess (response, file, fileList) {
				if (!this.imgType) {
					return
				}

				if (response.flag && response.data !== undefined) {
					this.FormItemList[this.imgType].val = response.data.url
					this.loading = false
					this.$message.success('上传成功')
				}
			},
			uploadError (err, file, fileList) {
				this.$message.error('上传失败')
				this.loading = false
			},
			uploadBefore (file) {
				console.log(file)
				const size = 1024 * 500
				const typeArr = ['image/jpeg', 'image/jpg', 'image/png']
				if (!typeArr.includes(file.type)) {
					this.$message.warning('请上传png/jpg类型的图片')
					return false
				}
				if (file.size > size) {
					this.$message.warning('上传图片不能超过500kb')
					return false
				}

				this.loading = true
			},
		}
	}
</script>

<style scoped>

</style>
