<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 v-if="comp.props.bgImg.available" :label="comp.props.bgImg.title">
      <el-upload class="upload-demo" 
      :action="url" 
      :on-success="uploadBgImg" 
      :on-error="uploadError" 
      :before-upload="uploadBefore" 
      :on-remove="bgImgRemove" 
      list-type="picture" 
      :with-credentials="true" 
      :show-file-list="true" 
      :file-list="bgImgList"
      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 v-if="comp.props.imgDes.available" :label="comp.props.imgDes.title">
      <el-upload class="upload-demo" 
      :action="url" 
      :on-success="uploadImgDes" 
      :on-error="uploadError" 
      :before-upload="uploadBefore" 
      :on-remove="imgDesRemove" 
      list-type="picture" 
      :with-credentials="true" 
      :show-file-list="true" 
      :file-list="imgDesList"
      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.imgDes.val"></el-input>
      <label class="prop-intro">{{comp.props.imgDes.description}}</label>
    </el-form-item>

  </el-form>

</template>

<script>
export default {
  name: "CompActivityProps",
  props: ["cfg", "comp"],
  data() {
    return {
      url:this.sup8._appConf.apiUrl.alioss,
      bgImgList:[],
      imgDesList:[],
      loading:false,
    };
  },
  methods: {
    uploadBgImg(response, file, fileList) {
      if(response.flag && response.data!==undefined){
        this.bgImgList=[response.data];
        this.comp.props.bgImg.val = response.data.url;
        this.loading = false;
        this.$message.success('上传成功');
      }
    },
    uploadImgDes(response, file, fileList) {
      if(response.flag && response.data!==undefined){
        this.imgDesList=[response.data];
        this.comp.props.imgDes.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;
    },
    bgImgRemove(file, fileList) {
      this.bgImgList=[];
      this.comp.props.bgImg.val = "";
    },
    imgDesRemove(file, fileList) {
      this.imgDesList=[];
      this.comp.props.imgDes.val = "";
    }
  },
  watch: {
  },
  created(){
    var that = this;
    that.mergeCompProps(that.comp);
  },
  mounted: function() {
    var that = this;
    console.log(that.comp);
    console.log("活动");
  }
};
</script>

<style scoped>
</style>
