/*
  props:{
    img:{ checkedImg, uncheckedImg, addImg, checkAllImg, cancelImg, deleteImg, deleteBanImg, confirmImg },自带默认图片，只需传入需要替换的图片
    extraBook: Boolean, 是否显示额外的书本（添加书籍）
    paddingBottom: number, 编辑模式开启时非否添加padding,1.2rem
    books: [{cover,bid,name}], 必要数据,需要参数cover,bid,name
    bar: Boolean  是否显示编辑栏和选择状态
    edit: Boolean  编辑状态,sync可以同步
  }
  slot: 
    extraBook 可插入自定义的extraBook 
    book 
      自定义书本样式 
      {
        book: 传入的书籍信息
        className: { 类名
          'is-edit': 开启编辑模式
          'is-checked': 编辑模式后被选中
        }
      }
  event: {  额外的事件
    add-book,  //非编辑模下点击添加书籍 
    read-book, //非编辑模式下点击书籍 params: { book, index }
    edit-book, //编辑模式下点击书籍  params: { book, index }
    delete-book,  //编辑模式下点击删除按纽 
  }
*/

<template>
  <div class="" data-template="shelf-core">
    <v-touch class="shelf-core-box" :style="{'padding-bottom':(editModeStatus ? paddingBottom : 0 )+ 'rem'}" @press="changeEditMode"
      @touchend.native.prevent>
      <transition-group name="list-complete" tag="div">
      <v-touch @tap="checkBook(index)" v-for="(value,index) in list" :key="value.id" :data-id="index" class="shelf-core-book l">
        <slot name="book" 
              :book="value" 
              :className="{
                'is-edit': editModeStatus,
                'is-checked': list[index].checked
              }">
          <img class="img cover" src="value.cover"></img>
          <img class="checkImg" v-if="checkImgStatus" :src="list[index].checked ? icon.checkedImg : icon.uncheckedImg">
          <div class="name single-line">{{value.name}}</div>
        </slot>
      </v-touch>
      <slot name="extraBook">
        <v-touch v-if="extraBook" class="shelf-core-add shelf-core-book l " @tap="addBook" key="extra">
           <slot name="book" 
                 :book="{
                   cover: icon.addImg,
                   name: '添加书籍'
                 }">
            <div class="cover">
              <img :src="icon.addImg">
            </div>
            <div class="name single-line">添加书籍</div>
          </slot>
        </v-touch>
      </slot>
      </transition-group>
    </v-touch>
    <div class="editor-bar" v-if="bar" v-show="editModeStatus" @touchend.prevent>
      <v-touch @tap="del" class="delete">
        <img :src="icon.deleteImg">
        <span>删除</span>
      </v-touch>
      <v-touch @tap="checkAll(true)" v-if="checkedBook.length !== list.length || !list.length" class="checkAll">
        <img :src="icon.checkAllImg">
        <span>全选</span>
      </v-touch>
      <v-touch @tap="checkAll(false)" v-else class="cancel">
        <img :src="icon.cancelImg">
        <span>取消</span>
      </v-touch>
      <v-touch @tap="changeEditMode" class="confirm">
        <img :src="icon.confirmImg">
        <span>确认</span>
      </v-touch>
    </div>
  </div>
</template>
<script>
const img = {
  checkedImg: 'data:image/png;base64,[encoded data, 4852 characters]',
  uncheckedImg: 'data:image/png;base64,[encoded data, 4448 characters]',
  addImg: 'data:image/png;base64,[encoded data, 25004 characters]',
  checkAllImg: 'data:image/png;base64,[encoded data, 5868 characters]',
  cancelImg: 'data:image/png;base64,[encoded data, 5836 characters]',
  deleteImg: 'data:image/png;base64,[encoded data, 5468 characters]',
  deleteBanImg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAYAAACGVs+MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS9JREFUeNpinDlzJgORgA2Iu4E4BoiFcKh5D8SLgbgUiH8RYygLA/GgC4jzCKgRhKr5DsQVxBjKRIIDYqH0GiCWAWJGNCwDlQOBVGINJcUBsGDPAuKnWOSfQuUY8EQRVgccBuL/RGAYeIVHzSskdcSYeZiUEKAFYAQlQtuBdMFAhwBOB4Dy/EQgfktkXOLD76BmsZFSDhCT54kFeMsGJgJ5PhOIubHkeWIxN9QMnGUDE4E8vxCIv1Hg+29QM3CWDYQS4Xck9mEoZiBR7Du16gIbCsSGXjYcdcCoA0YdMOqAUQfQDZBSGR2B1vHkiJHtAE6k6hRb45UYMU5youAdlI4jZAARHohDM5MoByyG0jOgrRpyG6TfoGaAwBxSoqAMGo+x0EYlJQDWY67FJgkQYADWoGesUfIhGQAAAABJRU5ErkJggg==',
  confirmImg: 'data:image/png;base64,[encoded data, 5892 characters]',
}
export default {
  name: 'XShelfCore',
  props: {
    books: {
      type: Array,
      validator(val) {
        if (val.length) {
          let flag = true
          val.forEach((v) => { if (!v.cover && !v.bid && !v.name) flag = false })
          return flag
        } else {
          return true
        }
      },
      require: true
    },
    img: {
      type: Object,
    },
    extraBook: {
      type: Boolean,
      default: true
    },
    bar:{
      type: Boolean,
      default: true
    },
    paddingBottom: {
      type: Number,
      default(){
        if(this.bar){
          return 1.2
        }else{
          return 0
        }
      }
    },
    edit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editModeStatus: this.edit,
      list: this.bar ? this.checkAll(false, this.books) : this.books,
      checkedBook: [],
    }
  },
  methods: {
    changeEditMode(e) {
      this.editModeStatus = !this.editModeStatus
      this.$emit('update:edit',this.editModeStatus)
      let index;
      if (e && this.bar && this.editModeStatus && (index = this.findIndex(e.target))) {
        this.checkAll(false)
        this.checkBook(index)
      }
    },
    checkBook(index) {
      if (this.editModeStatus) {
        this.bar && (this.list[index].checked = !this.list[index].checked)
        this.$emit('edit-book', this.list[index],index)
      }else {
        this.$emit('read-book', this.list[index],index)
      }
    },
    addBook() {
      if(this.edit) return
      this.$emit('add-book')
    },
    del() {
      if (!this.checkedBook.length) return
      this.$emit('delete-book', this.checkedBook)
    },
    checkAll(status = false, list = this.list) {
      return list.map(val => { 
        val.checked = status;
        return val 
      })
    },
    findIndex(dom){
      if(dom === document.body || dom ===  document.documentElement) return 
      if(dom.dataset.id){
        return +dom.dataset.id
      }else{
        return this.findIndex(dom.offsetParent)
      }
    }
  },
  computed: {
    checkImgStatus() {  //如果不提供位非选中的图片,隐藏图标
      return this.icon.uncheckedImg ? this.editModeStatus : this.editModeStatus && this.list[i].checked[i]
    },
    icon() {
      return Object.assign(img, this.img)
    },
  },
  watch: {
    books(val) {
      this.list = this.bar ? this.checkAll(false, val) : val
    },
    list: {
      handler (val,o) {      
        const checkedBook = []
        val.forEach(v=>{if(v.checked) checkedBook.push(v.id)})
        this.checkedBook = checkedBook
      },
      deep: true
    },
    edit(v,oldv){
      if(this.editModeStatus !== v) this.changeEditMode()
    }
  }
}
</script>
<style lang="scss">

.shelf-core-box {
  overflow: hidden;
}

.shelf-core-book {
  width: 33.3%;
  height: 3.50rem;
  position: relative;
  .name {
    margin: .2rem;
    color: #333;
  }
  .cover {
    width: 2rem;
    display: block;
    height: 2.66rem;
    border-radius: 3px;
    pointer-events: none;
    box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.08);
    margin: auto;
  }
  .name {
    text-align: center;
    font-size: .26rem;
  }
  .checkImg {
    position: absolute;
    right: .4rem;
    top: 2.3rem;
    width: .4rem;
    height: .4rem;
  }
}

.shelf-core-add {
  .cover {
    background-color: #fff;
    display: flex;
  }
  img {
    width: 40%;
    margin: auto;
    display: block;
  }
}

.editor-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.2rem;
  background-color: #fff;
  border-top: 1px #ccc solid;
  box-shadow: 0 0 5px rgba(204, 204, 204, 0.4);
  img {
    width: .5rem;
    display: block;
  }
}
.shelf-core-book{
  transition: all .3s;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
  opacity: 0;
  // transform: translateY(-30px);
}
.list-complete-leave-active {
  position: absolute;
}
</style>