<template>
  <el-form
    ref="form"
    label-width="80px"
    v-loading.fullscreen.lock="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-collapse v-model="activeNames">
      <el-collapse-item title="背景设置" name="1">
        <el-form-item v-if="comp.props.bgImg.readonly!=='1'" 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" @click="onClickUploadBtn('bgImg')">点击上传</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 v-if="comp.props.padding.readonly!=='1'" label="内边距">
            <el-input placeholder="请输入内边距" v-model="comp.props.padding.val"></el-input>
        </el-form-item>
        <el-form-item v-if="comp.props.radius.readonly!=='1'" label="圆角">
            <el-input placeholder="请输入内边距" v-model="comp.props.radius.val"></el-input>
        </el-form-item>
        <el-form-item v-if="comp.props.ruleTxet.readonly!=='1'" label="活动规则">
            <div id="editor"></div>
        </el-form-item>
      </el-collapse-item>

      
    </el-collapse>
  </el-form>
</template>

<script>
import E from "wangeditor";
export default {
  name: "Props",
  props: ["cfg", "comp"],
  data() {
    return {
      activeNames: ["1", "2"],
      loading: false,
      imgType: "", // 表示当前正在上传哪个图片  bgImg\eLogo
      url: this.sup8._appConf.apiUrl.alioss
    };
  },
  methods: {
    onClickUploadBtn(type) {
      this.imgType = type;
    },
    uploadSuccess(response, file, fileList) {
      if (!this.imgType) {
        return;
      }

      if (response.flag && response.data !== undefined) {
        this.comp.props[this.imgType].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;
    }
  },
  watch: {},
  created() {
    var that = this;
    that.mergeCompProps(that.comp);
  },
  mounted: function() {
    let that = this;
    let editor = new E('#editor');
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'image',  // 插入图片
    ]
    editor.customConfig.onchange = function (html) {
        console.log(html);
        that.comp.props.ruleTxet.val = html;
    }
    editor.create();
    editor.txt.html(that.comp.props.ruleTxet.val);
  }
};
</script>

<style scoped>
</style>
