<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(comp.props.bgImg.key)"
            >点击上传</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="颜色" v-if="comp.props.bgColor.readonly!=='1'">
          <el-color-picker v-model="comp.props.bgColor.val"></el-color-picker>
        </el-form-item>
      </el-collapse-item>

      <!-- <el-collapse-item title="企业Logo" name="2">
        <el-form-item v-if="comp.props.eLogo.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(comp.props.eLogo.key)"
            >点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-input placeholder="请输入图片地址" v-model="comp.props.eLogo.val"></el-input>
          <label class="prop-intro">{{comp.props.eLogo.description}}</label>
        </el-form-item>
      </el-collapse-item> -->

      <el-collapse-item title="礼品图标" name="3">
        <el-form-item v-if="comp.props.giftImg.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(comp.props.giftImg.key)"
            >点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-input placeholder="请输入图片地址" v-model="comp.props.giftImg.val"></el-input>
          <label class="prop-intro">{{comp.props.giftImg.description}}</label>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
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() {
    var that = this;
    console.log(that.comp);
  }
};
</script>

<style scoped>
</style>
