<template>
	<view class="home bg-f9">
		<header-bar title="产品列表"></header-bar>
		<uni-search-bar v-model="req.keyword" placeholder="输入关键词" @confirm="search" @cancel="cancel" bgColor="#fff"
			cancel-text="取消">
		</uni-search-bar>
		<common-list :config="config" @listClick="toDtl" :data="dataList"></common-list>
		<button type="default" @click="getList()" style="margin-top:10rpx">
			{{status == 'more' ? '点击加载更多' : status == 'noMore' ? '已经到底了' : '加载中..'}}
		</button>
	</view>
</template>

<script>
	import headerBar from '../../../components/header-bar/index.vue'
	import commonList from '../../../components/common-list/common-list.vue'
	import {formateObjToParamStr} from '../../../util/uitl.js'
	import Vue from 'vue'
	export default {
		components: {
			headerBar,
			commonList
		},
		data() {
			return {
				status: 'more',
				config: [{
						label: "产品名称",
						key: 'typeName',
					},
					{
						label: "计划数量",
						key: 'name',
					},
					{
						label: "完成期限",
						key: 'unit',
					}
				],
				dataList: [],
				req: {
					pageNum: 1,
					pageSize: 10,
					keyword: null,
				},
			}
		},
		onLoad() {
			this.search()
			
		},
		onShow() {
			if(this.needRefresh) this.search();
			
			
		},
		methods: {
			toDtl(i){
				console.log(i)
				uni.navigateTo({
					url: '/pages/productionPlan/add?' + formateObjToParamStr(i)
				})
			},
			cancel() {
				this.req.keyword = null
			},
			search() {
				this.req.pageNum = 1
				this.status = 'more'
				this.dataList = []
				this.getList()
			},
			getList() {
				const v = this
				if (v.status === 'more') {
					v.status = 'loading'
				} else {
					return
				}
				v.$post('/api/syringe-management/product/page', v.req).then(res => {
					res.data.records.map(items => {
						items.typeName = (items.type === 0) ? '半成品' : '成品'
					})
					v.dataList = [...v.dataList, ...res.data.records]
					if (res.data.pages === v.req.pageNum || res.data.pages === 0) {
						v.status = 'noMore'
					} else {
						v.status = 'more'
						v.req.pageNum++
					}
				})
			},

		},
	}
</script>

<style lang="less">

</style>
