<template>
  <el-form
    ref="form"
    v-loading.fullscreen.lock="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-form-item  label="显示两列">
          <el-switch
            v-model="comp.props.IsShow.val" 
            active-value="1"
            inactive-value="0"
            @change="changeSwitch()"
          ></el-switch>
        </el-form-item>

          <el-table :data="comp.props.items.val" style="width: 100%">
      <el-table-column label="图片">
        <template slot-scope="scope">
          <el-input style="width:calc(100% - 65px)"
            v-model="scope.row.imgUrl"
            placeholder="请输入图片url"
            :maxlength="200"
            @keyup="onChange()"
          ></el-input>
          <el-upload style="display:inline-block;width:60px"
            :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="medium" type="primary" icon="el-icon-upload" @click="uploadImg(scope.$index)"></el-button>
            </el-upload>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <div class="option-bar">
            <i class="option el-icon-delete" title="删除" @click="remove(scope.row.id)"></i>
            
            <i
              v-if="scope.$index!==0"
              class="option el-icon-sort-up"
              title="向上"
              @click="up(scope.row.id,scope)"
            ></i>
            <i
              v-if="scope.$index!==(comp.props.items.val.length-1)"
              class="option el-icon-sort-down"
              title="向下"
              @click="down(scope.row.id)"
              style="margin-left:5px"
            ></i>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-button
      type='default'
      icon="el-icon-plus"
      @click="add()"
      style="margin-top:10px;width:100%;padding:12px !important"
    >添加</el-button>
  </el-form>
</template>

<script>
export default {
  name: "CompScanCodeProps",
  props: ["cfg", "comp"],
  data() {
    return {
      uploadImgList: [],
      url: this.sup8._appConf.apiUrl.alioss,
      loading: false,
      rootClass: "",
		  activeId: "",
      defaultBgImg:"https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/1004/btnbg.png",
		  imgIndex:-1,
		  url:this.sup8._appConf.apiUrl.alioss
    };
  },
  methods: {
    changeSwitch() {
      this.$forceUpdate();
    },
    add: function() {
      var emptyRow = {
        id: this.sup8.$utils.newGuid(),
        actionType: this.sup8._def.linkType.innerPage.value,
        imgUrl: this.defaultBgImg,
        active: false //初始化时是否显示在当前页面
      };
      if(this.comp.props.items.val.length>= 4)
      {
        this.$message.warning('最多上传4张轮播图!');return false;
      }
      if (this.comp.props.items.val.length <= 0) {
        this.activeId = emptyRow.id;
      }
      this.comp.props.items.val.push(emptyRow);
		},

		remove: function(id) {
      this.comp.props.items.val = this.comp.props.items.val.filter(
        t => t.id != id
      );
		},

		up: function(id, scope) {
      var index = _.findIndex(this.comp.props.items.val, {
        id: id
      });
      this.comp.props.items.val.up(index);
		},
		down: function(id) {
      var index = _.findIndex(this.comp.props.items.val, {
        id: id
      });
      this.comp.props.items.val.down(index);
		},
		uploadImg(index){
      this.imgIndex = index;
      console.log(this.comp.props.items);
      },
      uploadSuccess(response, file, fileList) {
      if(response.flag && response.data!==undefined){
        this.comp.props.items.val[this.imgIndex].imgUrl = response.data.url;
        this.$message.success('上传成功');
      }
		},
		uploadError(err, file, fileList) {
		  this.$message.error('上传失败');
		},
		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;
      }
		}
  },
  watch: {
    activeId(n) {
      _.forEach(this.comp.props.items.val, function(it) {
        it.active = it.id === n;
      });

      this.$forceUpdate();
		}
  },
  created() {
    var that = this;
		that.mergeCompProps(that.comp);
		that.comp.props.items.val = that.comp.props.items.val || [];
  },
  mounted: function() {
  }
};
</script>

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