<template>
  <transition name="fade">
    <div v-if="selection && selection.length > 0" class="page-selector" :class="show?'show':''">
      <div class="angle" @click="show = !show" />
      <div class="page-select-selection">
        <el-row class="title">
          <el-col :span="8">
            <span style="margin-left:10px">已选数：{{ selection.length }}</span>
          </el-col>
          <el-col :span="8" style="text-align: center;">
            <span style="font-size: large;">已选主体列表</span>
          </el-col>
        </el-row>
        <el-table
          ref="selectTable"
          :data="selection"
          tooltip-effect="dark"
          style="width: 100%"
          :fit="true"
          max-height="calc(100vh - 175px)"
        >
          <el-table-column v-for="(each, index) in columns" :key="'pageSelect'+index" :show-overflow-tooltip="true" :type="each.type" :prop="each.prop" :label="each.label" :min-width="each.minWidth" align="center" />
          <el-table-column min-width="50" align="center">
            <template slot="header">
              <el-button type="danger" icon="el-icon-delete-solid" size="mini" @click="cleanAll">清空</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="removeItem(scope.$index, scope.row)"
              >移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </transition>
</template>

<script>
/**
 * 通用分页多选组件
 * @param {Array} selection 用于保存已选项的数据列表
 * @param {Array} columns 用于保存显示列信息参数项 prop:用于指向selection中的数据项 label:用于渲染数据列名
 * @returns "@removeCallback" 移除按钮触发后的回调方法，该方法返回(index, row)两个参数，index表示移除按钮所在行号，row即为移除的数据
 * @author lroyia
 * @since 2021年2月2日 14:13:39
 */
export default {
  props: {
    selection: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: true,
      colunmAll: []
    }
  },
  methods: {
    // 移除指定内容
    removeItem(index, row) {
      this.selection.splice(index, 1)
      this.$emit('removeCallback', index, row)
    },
    // 清空所有
    cleanAll() {
      while (this.selection.length > 0) {
        this.removeItem(0, this.selection[0])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-selector{
  z-index: 999;
  display: block;
  position: fixed;
  box-shadow: 0 0 10px #ccc;
  bottom: 0px;
  left: calc(100vw);
  width:40vw;
  transition: left .5s;
  -moz-transition: left .5s;	/* Firefox 4 */
  -webkit-transition: left .5s;	/* Safari 和 Chrome */
  -o-transition: left .5s;	/* Opera */
  .angle{
    cursor: pointer;
    position:absolute;
    display:inline-block;
    width:30px;
    height:40px;
    left:-30px;
    line-height: 40px;
    color:#bbb;
    font-weight: bold;
    top:50%;
    text-align: center;
    box-shadow: -5px 0 5px #ccc;
    background:white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .title{
    background:white;
    padding-top: 5px;
  }
  .angle:before{
    content:'<'
  }
}
.page-selector.show{
  left: 60vw;
  .angle:before{
    content: '>';
  }
}
.fade-enter-active{
  animation: move-in .5s;
}
.fade-leave-active {
  animation: move-in .5s reverse;
}
@keyframes move-in {
  0% {
    left: 100vw;
  }
  50% {
    transform: 80vw;
  }
  100% {
    transform: 60vw;
  }
}
// .fade-enter{
//   left:60vw;
// }
// .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
//   left: 100vw;
// }
</style>
