<template>
  <view>
    <!-- 搜索 -->
    <div class="search">
      <u-input
        v-model="keyWord"
        placeholder="请输入搜索内容"
        suffixIcon="search"
        suffixIconStyle="color: #666"
        shape="circle"
        @blur="handleSearch"
      ></u-input>
    </div>
    <!-- 列表 -->
    <div class="list-cont" v-for="(item, index) in tableList" :key="index" @click="goDetail(item)">
      <u-row justify="space-between" customStyle="margin-bottom: 10px; padding: 0 15px;">
        <u-col span="6">
          <div>{{ item.proName }}</div>
        </u-col>
        <u-col span="6">
          <div style="text-align: end; color: #999">{{ item.code }}</div>
        </u-col>
      </u-row>
      <u-line style="margin-bottom: 5px"></u-line>
      <div class="list-item">
        <span>数量：</span>
        <span>{{ item.num }}</span>
      </div>
      <div class="list-item">
        <span>日期：</span>
        <span>{{ item.backTime }}</span>
      </div>
      <div class="list-item">
        <span>备注：</span>
        <span>{{ item.remark }}</span>
      </div>
    </div>

    <u-loadmore :status="status" line v-if="tableList.length > 10" />

    <!-- 空状态 -->
    <u-empty v-if="tableList.length == 0" mode="data"></u-empty>
  </view>
</template>

<script>
import { getRecordList } from '@/api/aqSafety'

export default {
  data() {
    return {
      keyWord: '',
      status: 'loadmore',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableList: []
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    handleSearch() {
      this.pageSize = 10
      this.getList()
    },
    async getList() {
      try {
        const params = {
          encryptedData: JSON.stringify({ keyWord: this.keyWord }),
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        console.log('🚀 ~ getList ~ params', params)
        const res = await getRecordList(params)
        console.log('🚀 ~ getList ~ res', res)
        this.tableList = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log('🚀 ~ getList ~ error', error)
      }
    },
    onReachBottom() {
      console.log('🚀 ~ onReachBottom ~ ')
      if (this.total < 10 || this.total == this.tableList.length) {
        this.status = 'nomore'
        return
      }
      this.status = 'loading'
      setTimeout(() => {
        this.pageSize += 10
        this.getList()
        if (this.tableList.length != this.total) this.status = 'loadmore'
        else this.status = 'nomore'
      }, 500)
      console.log('加载..', this.pageSize)
    },
		goDetail(item) {
			const params = {
				...item
			}
			uni.navigateTo({
				url: `/pages/returnInventory/details?params=${JSON.stringify(params)}`
			})
		}
  }
}
</script>

<style lang="scss">
page {
  padding: 15px;
  background-color: #f8f8f8;
}
.search {
  margin-bottom: 15px;
}
.list-cont {
  padding: 15px 0;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

  .list-item {
    padding: 5px 15px;
  }
}
</style>
