<template>
  <div>
    <PicPicker class="ele"
               @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple"></PicPicker>
    <template v-if="ismultiple">
      <div class="ele" :style="{ backgroundImage: 'url(' + (element.morePic[0]?element.morePic[0].filePath:'') + ')' }"
           @click="selectedImg(element)"
           v-for="element in picList1"></div>
    </template>
    <template v-else>
      <div class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }"
           @click="selectedImg(element)"
           v-for="element in picList2"></div>
    </template>
  </div>
</template>

<script>
import appConst from '../util/appConst'
import PicPicker from './PicturePicker'
export default {
  props: {
    selectedImg: {
      type: Function
    },
    themeId: {
      type: String
    },
    ismultiple: Boolean
  },
  data () {
    return {
      http: appConst.BACKEND_DOMAIN
    }
  },
  computed: {
    picList () {
      return this.$store.state.editor.picList
    },
    picList1(){
      var arr=[];
      this.picList.forEach(function (item) {
        if(item.morePic){
          arr.push(item)
        }
      })
      return arr
    },
    picList2(){
      var arr=[];
      this.picList.forEach(function (item) {
        if(!item.morePic){
          arr.push(item)
        }
      })
      return arr
    }
  },
  methods: {
    uploadImage (data) {
      this.$store.dispatch('savePic', {
        'filePath': data['filePath'],
        'themeId': this.themeId,
        'width': data['width'],
        'height': data['height'],
        'morePic':data.morePic
      })
    }
  },
  components: {
    PicPicker
  }
}
</script>

<style lang="less" scoped>
.ele {
  float: left;
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 5px 5px;
  &:hover {
    border: 2px solid #18ccc0;
    cursor: pointer;
  }
}
</style>
