<template>
  <div>
    <div class="medias">
    <div class="btn-push">
      <span v-if="images.length<=0">请选择图片<br/>不超过10MB</span>
      <ul class="image-con" v-else>
        <li v-for="(item,i) in images" :key="i">
          <img :src="item.icon||$thumb" alt="">
          <div class="del">
              <span @click="del(item)" class="ui-button submit">删除</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <button class="ui-button submit" @click="selectHandle">选择图片</button>
  <div class="dialog" style="z-index: 2000" v-if="isShowSelect">
      <Table
        :list="list"
        :tabHeader="$MAPTABLEHEADER[type]"
        @updateList="update"
        @cancle="isShowSelect = false"
        :title="`选择${$MARERIALSTR[type]}`"
        @changeCurrent="changeCurrent"
        :paging="paging"
        @submit="handleSelect"
      >
    </Table>
  </div>
  </div>
</template>

<script>
import { getMaterialList} from "@/api";
import Table from "@/components/tableSelect";
import { changeByteUnit } from '@/utils/file'

export default {
  components:{Table},
  props:['image'],
  data(){
    return {
      type:'image',
      images:[...this.image],
      isShowSelect:false,
      list:[],
      paging: {
        pageSize: 8,
        pageNum: 1,
        total: 0,
        showSize: 4,
        current: 1
      },
    }
  },
  methods:{
    del(item){
      let index = this.images.findIndex(i => i.id === item.id)
      ~index && this.images.splice(index, 1)
    },
    selectHandle(){
      this.isShowSelect = true 
      this.getMaterialList()
    },
    changeCurrent(data){
      this.paging.pageNum = data;
    },
    update(data) {
      this.key = data;
      this.getMaterialList();
    },
    handleSelect(data){
      this.images = this.images.concat(data)
      this.isShowSelect = false
    },
    getMaterialList() {
      getMaterialList(
        {
          pageNum: this.paging.pageNum,
          pageSize: this.paging.pageSize,
          searchKey: this.key,
          type:this.type
        },
        (data) => {
          this.paging.pageNum = data.data.pageNum;
          this.paging.pageSize = data.data.pageSize;
          this.paging.total = data.data.total;
          this.list = data.data.list.map(i=>{
            i.fileSize = changeByteUnit(Number(i.fileSize))
            return i
          })
        }
      );
    },
  },
  watch:{
    "paging.pageNum": function () {
      this.isShowSelect && this.getMaterialList();
    },
    isShowSelect(newVal){
      if (!newVal) {
        this.paging.pageNum = 1
      }
    },
    images(newVal){
      if (newVal.length>20) {
        return this.$alert({ content: "最多添加20张图片" });
      }
      this.$emit('imageChange',newVal)
    }
  }
}
</script>

<style lang="less" src="./style.less"></style>

<style lang="less" scoped>
.ui-button{
  width: 100%;
  margin-top: 10px;
}
.medias{
  min-height: 216px;
  overflow-y: auto;
  @gap:6px;
.image-con{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: @gap;
  width: 100%;
  position: relative;
  >li{
    width: calc((100% - (@gap * 3)) / 3);
    height: 59px;
    margin-bottom: @gap;
    position: relative;
    overflow: hidden;
    margin-right: @gap;
    >img{
      height: 100%;
      position: absolute;
      transform: translate(-50%,-50%);
      top: 50%;
      left: 50%;
    }
    .del{
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
      background: rgba(0, 0, 0, 0.5);
      >.ui-button{
        display: flex;
        align-items: center;
        width: auto;
        padding: 0 10px;
        margin: 0;
        line-height: 24px;
        height: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        min-width: unset;
        width: 90%;
        font-size: 12px;
      }
    }
    &:nth-of-type(3n){
      margin-right: 0;
    }
    &:hover{
      .del{
        display: block;
      }
    }
  }
}
}
</style>
