<template>
  <div class="panel">
    <div class="title" @keyup.enter="searchHandler">
      <!--      <h3>素材</h3>-->
      <el-input clearable v-model="params.name" placeholder="搜索素材" size="normal" style="width: 100%;">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <!--      <fp-button size="normal" style="margin-left: 10px" >管理</fp-button>-->
    </div>
    <div class="list-wrapper">
      <div class="list">
        <div class="fp-img"
             v-for="item in items2"
             :key="item.id"
             @click="addItemToEditor(item)"
             :title="item.name"
        >
          <img :src="item.preview"/>
          <div class="fp-material-tool">
            <i @click.stop="remove(item.id)" class="iconfont icon-shanchu i-btn" title="删除"></i>
          </div>
        </div>
      </div>
      <fp-empty :data="items"/>
    </div>

  </div>
</template>

<script>

import http from '@/api/fastposter'
import {mapActions, mapGetters, mapMutations, mapState} from "vuex"
import FpEmpty from "../../common/FpEmpty"

export default {
  name: "FpAsideMaterial",
  components: {
    FpEmpty,
    // FpButton
  },
  data() {
    return {
      params: {
        name: ''
      }
    }
  },
  computed: {
    ...mapState({
      'items': state => state.panelmaterial.items,
      'p': state => state.poster.p
    }),
    ...mapGetters({
      'scale': 'poster/scale',
    }),
    items2() {
      return this.items.map(item => {
        return {
          id: item.id,
          t: 'image',
          name: item.filename,
          desc: '点击创建',
          v: item.path,
          preview: item.preview,
          w: 200,
          uid: item.uid
        }
      })
    }
  },
  created() {
    this.searchHandler()
  },
  methods: {
    ...mapActions({
      'search': 'panelmaterial/search',
      '_remove': 'panelmaterial/remove',
    }),
    ...mapMutations({
      'addItem': 'poster/addItem',
      'record': 'snapshots/record',
    }),
    addItemToEditor(item) {
      let img = new Image()
      let that = this
      img.src = http.imgUrl(item.v)
      img.onload = () => {
        item.w = img.width
        item.h = img.height
        that.addItem(item)
        that.record(`新增素材: ${item.name}`)
      }
    },
    searchHandler() {
      this.search({...this.params})
    },
    remove(id) {
      this.$confirm('确定要删除素材吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._remove(id).then(() => {
          this.searchHandler()
        });
      })
    }
  }
}
</script>

<style scoped>
.title {
  padding: 10px 32px 10px 16px;
  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: 0px 10px;
}

.list {
  display: flex;
  flex-wrap: wrap;
}

.fp-img {
  width: 135px;
  display: inline-block;
  margin: 4px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #e0e5ea;
  height: 90px;
}

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


.fp-img:before {
  content: " ";
  background: rgba(0, 0, 0, .15);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity .2s ease;
}

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


.fp-material-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;*/
  justify-content: flex-end;
  margin-bottom: 5px;
}

.fp-material-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-material-tool .i-btn:hover {
  color: #1f48d8;
  background-color: #f0f0f0;
}

.fp-img:hover .fp-material-tool {
  /*display: block;*/
  display: flex;
}
</style>