<view id="home">
  <view class="file-detail">

    <view class='sudoku' wx:if="{{photoListData.length > 0}}">
      <view  wx:for="{{photoListData}}" wx:key="index" class='span-3' data-item="{{item}}" data-index="{{index}}" bindtap='preview' bindlongpress='_action'>
        <view class='sudoku__item'>
          <image src="{{item}}"></image>
        </view>
      </view>
    </view>
    <view class="no-img" wx:else>暂无信息</view>
  </view>
</view>

import {
  showLoading,
} from '../../../utils/index';
import {
  epro
} from '../../../utils/project-info';
import http from '../../../utils/request';

Page({
  data: {
    detailData: {},
    photoListData: [],
    previewList: [],
    subjectId: 0, // 编辑患者需要的id
  },

  onLoad (e) {
    showLoading();
    // 存储进入编辑患者需要的id
    this.setData({
      subjectId: e.subjectId
    });
    this.fetchPhotoList(e.subjectId);
  },

  // 点击图片预览
  preview (e) {
    let value = e.currentTarget.dataset.item;
    wx.previewImage({
      current: value,
      urls: this.data.previewList
    })
  },

  fetchPhotoList (id) {
    let params = {
      id: id
    };
    http.get(epro.API.photoList, params)
      .then(res => {
        this.setData({
          photoListData: res.data.data.data,
          previewList: res.data.data.data
        });
        wx.stopPullDownRefresh();
        wx.hideLoading()
      })
  }

});

#home{
  background: #F6F6F6;
  min-height: 100%;
  padding-top: 20rpx;
}

.file-detail {
  position: relative;
  background: #FFFFFF;
  border-radius: 8rpx;
  width: 710rpx;
  margin: 0 auto;
  padding-top: 40rpx;
}

.title {
  width: 100%;
  padding: 30rpx 40rpx;
  color: #555
}

.title-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10rpx 0;
  font-size: 32rpx;
  font-weight: 400;
  color: #333;
}

.edit-icon{
  position: absolute;
  right: 60rpx;
  top: 40rpx;
}

.title-item>label {
  width: 180rpx;
  text-align: left;
}

.sudoku {
  padding: 0 40rpx 40rpx;
  display: flex;
  flex-wrap: wrap;
}

.sudoku__item {
  width: 200rpx;
  height: 200rpx;
  position: relative;
  overflow: hidden;
}

.sudoku__item image{
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

.span-3{
  display: inline-flex;
  width: 33.33%;
  justify-content: center;
  margin-bottom: 10rpx;
  align-items: center；
}

.no-img{
  text-align: center;
  font-size: 24rpx;
  color: #999999;
  padding-bottom: 40rpx;
}