<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="背景图片">
      <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: "CompAntiFake02Props",
  props: ["cfg", "comp"],
  data() {
    return {
      url:this.sup8._appConf.apiUrl.alioss,
      uploadImgList:[],
      loading:false,
      linkVal: {
        innerPage: "",
        outerPage: "",
        otherTemplate: ""
      }
    };
  },
  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 = "";
    },
    changeSwitch(){
      this.$forceUpdate();
    }
  },
  watch: {
    // "comp.props.linkType.val": function(n, o) {
    //   var that = this;

      // switch (o) {
      //   case that.sup8._def.linkType.innerPage.value:
      //     that.linkVal.innerPage = that.comp.props.linkVal.val;
      //     break;
      //   case that.sup8._def.linkType.outerPage.value:
      //     that.linkVal.outerPage = that.comp.props.linkVal.val;
      //     break;
      //   case that.sup8._def.linkType.otherTemplate.value:
      //     that.linkVal.otherTemplate = that.comp.props.linkVal.val;
      //     break;
      // }

      // switch (n) {
      //   case that.sup8._def.linkType.innerPage.value:
      //     that.comp.props.linkVal.val = that.linkVal.innerPage;
      //     break;
      //   case that.sup8._def.linkType.outerPage.value:
      //     that.comp.props.linkVal.val = that.linkVal.outerPage;
      //     break;
      //   case that.sup8._def.linkType.otherTemplate.value:
      //     that.comp.props.linkVal.val = that.linkVal.otherTemplate;
      //     break;
      // }
    // }
  },
  created(){
    var that = this;
    that.mergeCompProps(that.comp);
  },
  mounted: function() {
    var that = this;
    console.log(that.comp);
  }
};
</script>

<style scoped>
</style>
