<template>
  <el-form
    ref="form"
    label-width="80px"
    v-loading.fullscreen.lock="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-form-item  label="自动注册">
          <el-switch
            v-model="comp.props.AutoReg.val" 
            active-value="1"
            inactive-value="0"
            @change="changeSwitch()"
          ></el-switch>
        </el-form-item>

         <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>
</template>

<script>
export default {
  name: "CompScanCodeProps",
  props: ["cfg", "comp"],
  data() {
    return {
      uploadImgList: [],
      url: this.sup8._appConf.apiUrl.alioss,
      loading: false,
    };
  },
  methods: {
    changeSwitch() {
      this.$forceUpdate();
    },
    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 = "";
    }
  },
  watch: {},
  created() {
    var that = this;

    that.mergeCompProps(that.comp);
  },
  mounted: function() {
    var that = this;
  }
};
</script>

<style scoped>
.el-collapse-item__content {
  padding-bottom: 0 !important;
}
</style>
