<template>
  <el-form class="compprop-swipernavbar" :class="rootClass" ref="form" label-width="120px">
	  
       <el-form-item label="顶部背景">
          <el-upload
            class="upload-demo"
            :action="url"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="uploadBefore"
            :on-remove="uploadRemove"
            list-type="picture"
            :with-credentials="true"
            :show-file-list="true"
            :file-list="uploadImgList"
            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.bgImg.val"></el-input>
          <label class="prop-intro">{{comp.props.bgImg.description}}</label>
        </el-form-item>
       <el-form-item  label="返回主页开关">
          <el-switch
            v-model="comp.props.IsShow.val" 
            active-value="1"
            inactive-value="0"
            @change="changeSwitch()"
          ></el-switch>
        </el-form-item>
		<el-form-item label="返回按钮图标">
			<el-input v-model="comp.props.iconimg.val"></el-input>
		</el-form-item>
  </el-form>
</template>

<script>
import apiHelper from "@/assets/js/apiHelper.js";
export default {
	name: "CompSwiperNavBarProps",
	props: ["cfg", "comp"],
	data() {
		return {
			loading:false,
			 uploadImgList: [],
			rootClass: "",
			activeId: "",
			imgIndex:-1,
			url:this.sup8._appConf.apiUrl.alioss,
		};
	},
	methods: {
		uploadSuccess(response, file, fileList) {
			if (response.flag && response.data !== undefined) {
				this.uploadImgList = [response.data];
				this.comp.props.bgImg.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;
		},
		uploadRemove(file, fileList) {
			this.uploadImgList = [];
			this.comp.props.bgImg.val = "";
		}
	},

	created: function() {
		var that = this;
		that.mergeCompProps(that.comp);
		that.comp.props.items.val = that.comp.props.items.val || [];
		console.log(that.comp.props.items.val);
	},
	watch: {
		activeId(n) {
		console.log("activeId", n);
		_.forEach(this.comp.props.items.val, function(it) {
			it.active = it.id === n;
		});

		this.$forceUpdate();
		}
	},
	mounted: function() {}
};
</script>

<style scoped>
</style>



