<template>
  <div class="mall-section-container">
    <el-input
      placeholder="请输入图片名称/相册名称"
      style="width: 260px"
      v-model.trim="search"
      prefix-icon="el-icon-search"
      clearable
      @clear="getSearchImgList"
      @keyup.enter.native="getSearchImgList"
    />
    <div class="folder-list" v-if="folderData.length > 0 || imgData.length > 0">
      <template v-if="folderData.length > 0">
        <router-link
          :to="`/img-list?memberId=${memberId}&folderId=${item.id}&from=${from}`"
          v-for="item in folderData"
          :key="item.id"
        >
          <folder-item :folder="item" />
        </router-link>
      </template>
      <template v-if="imgData.length > 0">
        <img-item
          v-for="(item, index) in imgData"
          :key="item.url"
          :img="item"
          :index="index"
          :img-list="imgData"
        />
      </template>
    </div>
    <div class="no-data-wrap" v-else>
      <img src="../../../static/img/no-data_icon.png" />
      <p style="color:#909399;font-size:14px">暂无数据</p>
    </div>
  </div>
</template>

<script>
import request from '@/api/request.js';
import folderItem from './folder-item.vue';
import imgItem from './img-item.vue';
export default {
  name: 'photo-album',
  props: {
    memberId: String,
    folderId: String,
    from: String
  },
  components: {
    folderItem,
    imgItem
  },
  data () {
    return {
      api: {
        // 获取用户所有相册
        getOneMemberAlbum: '/api-member/getOneMemberAlbum',
        // 获取相册中的图片
        getOneAlbumPhotoById: '/api-member/getOneAlbumPhotoById',
        // 查询图片或者相册
        findImgOrAlbumByCondition: '/api-member/findImgOrAlbumByCondition'
      },
      search: '',
      memberId: '',
      from: '',
      folderData: [],
      imgOriginData: [],
      imgData: []
    }
  },
  created() {
    if (this.folderId) {
      this.getImgs();
    } else {
      this.getImgList();
    }
  },
  methods: {
    getImgList() {
      request.get(`${this.api.getOneMemberAlbum}/${this.memberId}`).then(res => {
        let { code, message, data } = res.data;
        data = data || [];
        if (code !== 200) {
          this.$message.error(message);
          return;
        }
        this.folderData = data.slice();
      });
    },
    getImgs() {
      request.get(`${this.api.getOneAlbumPhotoById}/${this.folderId}`).then(res => {
        let { code, message, data } = res.data;
        data = data || [];
        if (code !== 200) {
          this.$message.error(message);
          return;
        }
        this.imgOriginData = data.map(item => {
          return JSON.parse(item.details);
        });
        this.imgData = this.imgOriginData.slice();
      })
    },
    getSearchImgList() {
      // 如果是在相册里面搜索，只搜索本相册中的图片
      if (this.folderId) {
        this.imgData = this.imgOriginData.slice();
        if (this.search) {
          this.imgData = this.imgOriginData.filter(item => item.name.indexOf(this.search) >= 0);
        }
        return;
      }
      // 在相册列表页搜索，搜索相册和图片
      request.get(`${this.api.findImgOrAlbumByCondition}?mid=${this.memberId}&confition=${this.search}`).then(res => {
        let { code, message, data } = res.data;
        data = data || {};
        if (code !== 200) {
          this.$message.error(message);
          return;
        }
        let { album, photo } = data;
        album = album || [];
        photo = photo || [];
        this.folderData = album.slice();
        this.imgData = photo.map(item => {
          return JSON.parse(item.details);
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mall-section-container {
  position: relative;
  padding: 22px 24px 24px;
  margin: 24px;
  min-height: calc(100vh - 427px);
  background: #fff;
  .folder-list {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
  }
  .no-data-wrap {
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    text-align: center;
  }
}
</style>
