<template>
  <div class="app-container" >
    <el-form :model="query" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="关键字搜索" prop="imageTitle">
        <el-input
          v-model="query.imageTitle"
          placeholder="请输入关键字"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryTable">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="image-list">
      <ImageItem v-for="(item, index) in tableData" :key="index" :item="item" class="image-item" @goDetail="showImageViewer($event, index, item)"></ImageItem>
    </div>
    <!-- 表格页脚 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="getTableList"
    />
    <MyImageViewer ref="previewImage" :z-index="2000"
    :files="images" :options="{
      download: true,
      print: true,
      edit: true,
      check: true,
    }" @change="imageEditChange"></MyImageViewer>
  </div>
</template>

<script>
import ImageItem from '../../gallery/list/components/ImageItem.vue';
import tableMixin from '../../../mixins/table-mixin';
import { pageListShare } from "@/api/gallery/cata/share";

export default {
  name: 'ShareList',
  components: {
    ImageItem,
  },
  mixins: [tableMixin],
  pageInfo: {
    title: '共享列表',
    exportUrl: '',
    pageListApi: pageListShare,
  },
  data () {
    return {

    };
  },
  methods: {
    imageEditChange() {
      this.getTableList();
    },
    showImageViewer(event, index, item) {
      console.log('showImageViewer');
      
      this.$refs.previewImage.open(index);

    },
  }
}
</script>

<style>

</style>