<template>
  <el-form ref="form" label-width="120px">
	<el-form-item label="页面类型">
      	<el-radio-group v-model="comp.props.pageType.val">
			<el-radio label="1">经销商</el-radio>
			<el-radio label="2">店长</el-radio>
			<el-radio label="3">导购</el-radio>
		</el-radio-group>
    </el-form-item>

    <el-form-item label="主题图片">
		<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">点击上传</el-button>
			<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
		</el-upload>
		<el-input placeholder="请输入图片地址" v-model="comp.props.zhutiImg.val"></el-input>
	</el-form-item>
    <el-form-item label="主题图片宽度">
      <el-input  :placeholder="'请输入'+comp.props.zhutiWidth.title" v-model="comp.props.zhutiWidth.val" ></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import apiHelper from "@/assets/js/apiHelper.js";
export default {
	name: "keypersonActivityProps",
	props: ["cfg", "comp"],
	data() {
		return {
			defaultBgImg:"https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/1004/btnbg.png",
			url:this.sup8._appConf.apiUrl.alioss,
		};
	},
	methods: {
		uploadSuccess(response, file, fileList) {
			// if (!this.imgType) {
			// 	return;
			// }

			if (response.flag && response.data !== undefined) {
				this.comp.props.zhutiImg.val = response.data.url;
				// this.loading = false;
				this.$message.success("上传成功");
			}
		},
		uploadError(err, file, fileList) {
			this.$message.error("上传失败");
			// this.loading = false;
		},
		uploadBefore(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;
		}
	},

	created() {
		this.mergeCompProps(this.comp);
		console.log(this.comp);
	},
	watch: {
	},
	mounted: function() {}
};
</script>

<style scoped>
</style>



