<style>
  .diy-component-edit .goods-add {
    width: 50px;
    height: 50px;
    position: relative;
    margin-right: 15px;
    margin-bottom: 15px;
  }

  .diy-component-edit .goods-add .el-button {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0;
  }

</style>
<template>
  <div :class="{'active':searchData.isCked}">
    <div class="diy-component-options" v-if="searchData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-component-preview">
      <div class="diy-search" style="min-height:91px;">
        <el-form label-width="90px">
          <el-form-item :label="searchData.CompData.Name" style="margin-bottom:0">
            <div>
              <template v-for="(item,index) in searchData.CompData.FileList">
                <template v-if="item">
                  <img :key="index" :src="item" style="width:80px;margin-right:20px;" alt="">
                </template>
                <template v-else>
                  <img :key="index" src="../../../assets/img/default.png" style="width:80px;margin-right:20px;" alt="">
                </template>
              </template>
              <div class="tradeRemark" style="margin-top:0;">{{searchData.CompData.Remark}}</div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="diy-component-edit" v-if="searchData.isCked">
      <el-form label-width="100px">
        <el-form-item label="名称" required>
          <el-input v-model="searchData.CompData.Name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="上传文件数量">
          <el-input v-model="searchData.CompData.FileCount"
            @keyup.native="checkInteger(searchData.CompData,'FileCount')" size="small"></el-input>
        </el-form-item>
        <el-form-item label="选择文件" v-if="searchData.CompData.FileCount>0">
          <div style="display:flex;flex-wrap:wrap;">
            <div class="goods-add" style="width:50px;height:50px;" v-for="(item,index) in searchData.CompData.FileList"
              :key="index" :style="{ backgroundImage: 'url(' + item + ')' }">
              <el-button size="small" icon="el-icon-plus" @click="ckedIndex=index,choicImg=true"></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="文件类型">
          <el-select v-model="searchData.CompData.FileType" size="small" placeholder="请选择">
            <el-option v-for="item in FileTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件大小">
          <el-input v-model="searchData.CompData.FileSizeLimit"
            @keyup.native="checkInteger(searchData.CompData,'FileSizeLimit')" size="small"></el-input>
        </el-form-item>
        <el-form-item label="提示文字">
          <el-input type="textarea" v-model="searchData.CompData.Remark" size="small"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    props: ["searchData", "index", "dataLeng"],
    components: {
      ChooseImg
    },
    data() {
      return {
        choicImg: false,
        ckedIndex: -1,
        FileTypeList: [
        {
          label: 'Excel',
          value: '.xls,.xlsx'
        },{
          label: 'ppt',
          value: '.ppt,pptx'
        },{
          label: 'word',
          value: '.doc,.docx'
        },
        {
          label:'pdf',
          value: '.pdf'
        }]
      };
    },
    created() {},
    watch: {
      'searchData.CompData.FileCount'(val, oldVal) {
        var newSize = 0;
        if (val != "") {
          newSize = parseInt(val);
        }
        var oldSize = 0;
        if (oldVal != "") {
          oldSize = parseInt(oldVal);
        }
        if (newSize > 0 && oldSize == 0) {
          for (var i = 0; i < newSize; i++) {
            this.searchData.CompData.FileList.push("");
          }
        }
        //清空
        else if (oldSize > 0 && newSize == 0) {

          this.searchData.CompData.FileList = [];
        } else if (oldSize > 0 && newSize > 0 && newSize > oldSize) {
          for (var i = oldSize; i < newSize; i++) {
            this.searchData.CompData.FileList.push("");
          }
        } else if (oldSize > 0 && newSize > 0 && newSize < oldSize) {
          var tempArray = JSON.parse(JSON.stringify(this.searchData.CompData.FileList));
          this.searchData.CompData.FileList = [];
          for (var i = 0; i < newSize; i++) {
            this.searchData.CompData.FileList.push(tempArray[i]);
          }
        }
      }
    },
    methods: {
      //选择图片
      SelectId(msg) {
        this.searchData.CompData.FileList[this.ckedIndex] = msg.url;
        this.choicImg = false;
      },
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      }
    },
    mounted() {}
  };

</script>
