<template>
  <div class="mainCon">
    <NavBar />
    <div class="innerCon">
      <van-list
        v-show="list.length||loading"
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="queryList"
      >
        <div v-for="item in list" :key="item.id" class="maintenance-item van-clearfix" @click="goDetail(item)">
          <!--<img :src="item.imgPath || require('../../assets/pic_def_bj.png')" alt="图片加载失败">-->
          <div class="right-box">
            <div class="title-4 van-ellipsis">{{ item.name }}</div>
            <span>{{ item.partsCode }}</span>
            <!--<span>车型备注：{{ item.remark||'&#45;&#45;' }}</span>-->
          </div>
        </div>
      </van-list>
      <div v-show="!list.length&&!loading" class="no-message" />
    </div>
  </div>
</template>
<script>
import { queryPartsList } from '../../api/parts'
import '../../styles/parts.scss'
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: true,
      searchQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  mounted() {
    this.queryList()
  },
  methods: {
    goDetail(item) {
      this.$router.push('/parts/detail/' + item.id)
    },
    queryList() {
      this.loading = true
      this.finished = false
      const params = { ...this.searchQuery }
      if (this.$route.query.ids) {
        params.categoryCodes = this.$route.query.ids.join()
      }
      if (this.$route.query.code) {
        params.code = this.$route.query.code
      }
      queryPartsList(params).then(res => {
        this.list = this.list.concat(res)
        this.loading = false
        if (res.length === this.searchQuery.limit) {
          this.searchQuery.page++
        } else {
          this.finished = true
        }
      })
    }
  }
}
</script>
