<template>
  <div id="app">
    <div class="search">
      <van-search
        v-model="searchKey"
        show-action
        placeholder="请输入入库单号查询"
        background="#4992fc"
        @search="onSearch"
      >
        <div slot="action" @click="onSearch" style="color: #fff">搜索</div>
      </van-search>
    </div>
    <div class="tabs">
      <van-tabs
        v-model="activeIndex"
        sticky
        type="card"
        color="#4992fc"
        @click="tabSwift"
      >
        <van-tab title="库存实景"></van-tab>
        <van-tab title="质检报告"></van-tab>
      </van-tabs>
    </div>
    <div class="content">
      <div class="content__msg" v-if="warehouseName">仓库: {{warehouseName}}</div>
      <div class="content__list">
        <template v-if="activeIndex === 0">
          <van-list
            v-model="livePhotoLoading"
            :finished="livePhotoFinished"
            finished-text="~ 就这么多了 ~"
            @load="getLivePhoto"
          >
            <template v-for="item in livePhotoList">
              <div class="content__list__item" :key="item.id">
                <div class="head-info">
                  <div class="head-info__title">{{`库位: ${item.locName || '-'} / ${item.locCode}`}}</div>
                  <div class="head-info__value">{{`更新时间: ${item.recentTime}`}}</div>
                </div>
                <template v-for="(img, index) in item.fileList">
                  <div class="content__list__item__img" :key="img.id">
                    <img :src="img.fileAddress" :alt="img.fileName" @click="toPreviewImgs(index, item.fileList)" />
                  </div>
                </template>
              </div>
            </template>
          </van-list>
        </template>
        <template v-if="activeIndex === 1">
          <van-list
            v-model="qcReportsLoading"
            :finished="qcReportsFinished"
            finished-text="~ 就这么多了 ~"
            @load="getQCReports"
          >
            <div class="content__list__item">
              <div class="content__list__item__img" v-for="(item, index) in qcReportsList" :key="item.id">
                <img
                  :key="item.fileId"
                  :src="item.fileAddress"
                  :alt="item.fileName"
                  @click="toPreviewImgs(index, qcReportsList)"
                />
              </div>
            </div>
          </van-list>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'

export default {
  data () {
    return {
      searchKey: '', // 搜索关键词
      activeIndex: 0, // 激活的 tab 索引
      warehouseName: '', // 仓库名
      // 实景模块
      livePhotoLoading: false,
      livePhotoFinished: true,
      livePhotoCurrentNo: 0,
      livePhotoList: [], // 实景图片列表
      // 报告模块
      qcReportsLoading: false,
      qcReportsFinished: true,
      qcReportsCurrentNo: 0,
      qcReportsList: [], // 实景图片列表
      // 基础查询参数
      limitCount: 10,
    }
  },
  methods: {
    // 搜索
    onSearch () {
      if (!this.searchKey) {
        this.$toast.fail('请输入入库单号')
        return false
      }
      this.livePhotoCurrentNo = 0
      this.qcReportsCurrentNo = 0
      this.livePhotoList = []
      this.qcReportsList = []
      if (this.activeIndex === 0) {
        // 获取库存实景
        this.getLivePhoto()
      } else if (this.activeIndex === 1) {
        // 获取质检报告
        this.getQCReports()
      }
      // 获取仓库信息
      this.getWarehouseInfo()
    },
    // 点击选项卡
    tabSwift (index, title) {
      this.livePhotoCurrentNo = 0
      this.qcReportsCurrentNo = 0
      this.livePhotoList = []
      this.qcReportsList = []
      this.onSearch()
    },
    // 获取仓库信息
    getWarehouseInfo () {
      const url = this.$API.businessPages.viewReports.getWarehouseInfo
      const param = {
        orderNos: this.searchKey,
      }
      this.$https.post(url, param)
        .then(data => {
          if (data.succeed) {
            this.warehouseName = data.data.warehouseName
          } else {
            this.$toast.fail(data.errorMsg)
          }
        })
    },
    // 获取实景图
    getLivePhoto () {
      ++this.livePhotoCurrentNo
      const url = this.$API.businessPages.viewReports.getLivePhoto
      const param = {
        orderNos: this.searchKey,
        businessType: 'LIVE',
        'page.currentPage': this.livePhotoCurrentNo,
        'page.limitCount': this.limitCount,
      }
      this.$https.post(url, param)
        .then(data => {
          this.livePhotoLoading = false
          if (data.succeed) {
            if (data.data.msg) {
              this.$toast.fail(data.data.msg)
            } else {
              this.livePhotoList = [...this.livePhotoList, ...data.data.rows]
              // 总数判断是否加载完
              this.livePhotoFinished = this.livePhotoList.length >= data.data.total
            }
          } else {
            this.$toast.fail(data.errorMsg)
          }
        })
    },
    // 获取质检报告图
    getQCReports () {
      ++this.qcReportsCurrentNo
      const url = this.$API.businessPages.viewReports.getQCReports
      const param = {
        orderNos: this.searchKey,
        businessType: 'QC',
        'page.currentPage': this.qcReportsCurrentNo,
        'page.limitCount': this.limitCount,
      }
      this.$https.post(url, param)
        .then(data => {
          if (data.succeed) {
            this.qcReportsLoading = false
            this.qcReportsList = [...this.qcReportsList, ...data.data.rows]
            // 总数判断是否加载完
            this.qcReportsFinished = this.qcReportsList.length >= data.data.total
          } else {
            this.$toast.fail(data.errorMsg)
          }
        })
    },
    // 预览图片
    toPreviewImgs (startPosition, fileList) {
      ImagePreview({
        images: fileList.map(item => item.fileAddress),
        startPosition,
      })
    }
  }
}
</script>

<style lang="scss">
  #app {
    width: 100vw;
    height: 100vh;

    .tabs {
      margin: 10px 0;
    }
    .content {
      &__msg {
        font-size: 0.8rem;
        margin: 1rem;
      }
      &__list {
        width: 100%;
        padding: 1rem;
        &__item {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-items: center;
          margin-bottom: 1rem;
          border-bottom: 1px solid #ccc;
          &__img {
            width: 9rem;
            text-align: center;
            margin: 0.5rem 0;
            img {
              max-width: 100%;
              vertical-align: middle;
            }
          }

          .head-info {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding-bottom: 0.5rem;
            border-bottom: 1px dashed #ddd;
            color: #323233;
            font-size: 0.8rem;
            &__value {
              color: #969799;
            }
          }
        }
      }
    }
  }
</style>
