<template>
  <div class="panel">
    <div class="title">
      <h3>海报</h3>
    </div>
    <div class="list-wrapper">
      <div class="list">
        <div class="fp-poster"
             v-for="item in items"
             :key="item.id"
             @click="changePoster(item)"
        >
          <!--          <el-tooltip :content="item.name" placement="bottom">-->
          <div class="fp-poster-title" :title="item.id + ' ' + item.name">
            {{ item.name }}
          </div>
          <!--          </el-tooltip>-->
          <img :src="item.preview">
          <div class="fp-poster-tool">
            <!--            <el-tooltip content="复制" placement="bottom">-->
            <i @click.stop="copy(item.id)" class="iconfont icon-fuzhi1 i-btn" title="复制"></i>
            <!--            </el-tooltip>-->
            <!--            <el-tooltip content="删除" placement="bottom">-->
            <i @click.stop="remove(item.id)" class="iconfont icon-shanchu i-btn" title="删除"></i>
            <!--            </el-tooltip>-->
          </div>
        </div>
      </div>
      <fp-empty :data="items"/>
    </div>
  </div>
</template>

<script>

import { mapActions, mapMutations, mapState } from "vuex"
import FpEmpty from "../../common/FpEmpty"

export default {
  name: "FpAsidePanelPoster",
  components: {FpEmpty},
  computed: {
    ...mapState({
      'items': state => state.panelposter.items,
      'p': state => state.poster.p,
    }),
  },
  methods: {
    ...mapActions({
      'loadPosters': 'panelposter/getItems',
      'loadPoster': 'poster/loadPoster',
      'copyPoster': 'poster/copyPoster',
      'removePoster': 'poster/removePoster',
    }),
    ...mapMutations({
      'clear': 'snapshots/clear',
      'record': 'snapshots/record',
    }),
    changePoster(item) {
      if (item.id !== this.p.id) {
        // 提示
        this.$confirm('确定要切换海报么?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loadPoster(item.id).then(() => {
            // 清空历史记录
            this.clear();
            this.record('重新加载')
          });
        });
      }
    },
    copy(id) {
      this.copyPoster(id).then(() => {
        this.loadPosters()
      });
    },
    remove(id) {
      this.$confirm('确定要删除海报吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (id !== this.p.id) {
          this.clear();
        }
        this.removePoster(id).then(() => {
          this.loadPosters()
        });
      })
    }
  },
  created() {
    this.loadPosters()
  }
}
</script>

<style scoped>
.title {
  padding: 17px 24px;
  height: 56px;
  box-sizing: border-box;
}

.title h3 {
  font-size: 16px;
  line-height: 22px;
  color: #000;
  font-weight: 500;
  user-select: none;
  padding: 0;
  margin: 0;
}

.list-wrapper {
  overflow-y: auto;
  height: calc(100vh - 111px);
  padding: 0 10px;
}

.list {
  margin: 10px;
  column-count: 2;
  column-gap: 7px;
}

.fp-poster {
  width: 100%;
 height: 100%;
   display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #e0e5ea; 
}


.fp-poster:hover {
  /*box-shadow: 1px 1px 15px #cccc;*/
}

.fp-poster:before {
  content: ' ';
  background: rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fp-poster:hover:before {
  opacity: 1;
}

.fp-poster-title {
  position: absolute;
  height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  background-color: #2c3e50;
  color: #fff;
  padding: 0 5px;
  /*opacity: 0.7;*/
  display: none;
  font-size: 12px;
  line-height: 22px;
}

.fp-poster-tool {
  position: absolute;
  /*height: 24px;*/
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  /*background-color: #2c3e50;*/
  /*color: #fff;*/
  padding: 0 5px;
  bottom: 0;
  /*opacity: 0.7;*/
  /*display: flex;*/
  display: none;
  justify-content: space-between;
  margin-bottom: 5px;
}

.fp-poster-tool .i-btn {
  font-size: 16px;
  box-sizing: border-box;

  display: block;
  padding: 0;
  outline: 0;
  height: 25px;
  /* width: 32px; */
  border: none;
  cursor: pointer;
  border-radius: 3px;
  /* font-size: 16px; */
  /* font-weight: 400; */
  /*background-color: #00000014;*/
  background-color: #fff;
  text-align: center;
  /* height: auto; */
  width: 25px;
}

.fp-poster-tool .i-btn:hover {
  color: #1f48d8;
  background-color: #f0f0f0;
}

.fp-poster:hover .fp-poster-title, .fp-poster:hover .fp-poster-tool {
  /*display: block;*/
  display: flex;
}

.fp-poster img {
  width: 100%;
  height: 100%;
  display:block;
}

</style>