<template>
	<view class="productPricing-content">
		<scroll-view class="product-list" scroll-y @scrolltolower="onreachBottom">
			<view class="st-detailList-main">
				<view class="st-detailList-main-item" v-for="(item, index) in listData" :key="item.id">
					<view class="st-detailList-tit">
						<text style="font-weight: bold;">{{item.product.name}}</text>
						<view class="p-tit-box" v-show="item.titFlag">{{item.product.name}}</view>
						<u-tag size="mini" style="margin:10rpx 0 0 20rpx;" :type="item.product.onlineFalg==1?'success':'info'" :text="item.product.onlineFalgDictValue"></u-tag>
						<copyText :text="item.product.name" label="产品名称"></copyText>
					</view>
					<view class="st-detailList-item-con flex align_center">
						<view class="flex_1">
							<view class="padding_3">产品编码：{{item.productCode}} <copyText :text="item.productCode" label="产品编码"></copyText></view>
							<view class="padding_3">通用产品编码：{{item.productCommonCode}} </view>
							<view class="padding_3" >
								<text>通用产品名称：{{item.productCommon.name || '--'}}</text>
								<u-tag style="margin:10rpx 0 0 20rpx;" size="mini" :type="item.productCommon.onlineFalg==1?'success':'info'" :text="item.productCommon.onlineFalgDictValue"></u-tag>	
							</view>
							<view class="p-t-tit-box" v-show="item.c_titFlag">{{item.productCommon.name || '--'}}</view>
							<view class="padding_3">通用产品分类：
							   <text v-if="item.productCommon.productTypeName2 || item.productCommon.productTypeName3">{{ item.productCommon.productTypeName2 }} {{ item.productCommon.productTypeName3 ? '>' : '' }} {{ item.productCommon.productTypeName3 }}</text>
								<text v-else>--</text>
							</view>
							<view class="font_13">
								创建时间：<text class="gray">{{item.createDate}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="listData.length == 0 &&status!='loading'" :text="noDataText" mode="list" ></u-empty>
				<view style="padding-bottom: 20upx;">
					<u-loadmore v-if="totalNum>listData.length || status=='loading'" :status="status" />
				</view>
			</view>
		</scroll-view>
		<!-- 搜索弹窗 -->
		<searchParts :showModal="showModal" @refresh="refreshList" @close="showModal=false"/>
	</view>
</template>

<script>
	import { productUniversalQueryPage } from '@/api/sales'
	import copyText from '@/pages/common/copyText.vue'
	import searchParts from './searchParts.vue'
	export default{
		components:{searchParts,copyText},
		data(){
			return{
				listData:[],
				totalNum:0,
				pageNo:1,
				pageSize:15,
				noDataText: '暂无数据',
				status: 'loadmore',
				showModal:false,
				params:{
					productCode:'',
					productName:'',
					productCommonCode:'',
					productCommonName:'',
					onlineFalg:undefined
				}
			}
		},
		onNavigationBarButtonTap(e){
			this.showModal=true
		},
		onBackPress() {
			if(this.showModal){
				this.showModal = false
				return true
			}
		},
		onLoad(option) {
			this.getList()
		},
		methods:{
			// 刷新列表
			refreshList(val){
				this.params =val ? val : {},
				this.listData = []
				this.totalNum = 0
				this.getList(1)
			},
			// 列表
			getList(pageNo){
				const _this = this
				if (pageNo) {
					this.pageNo = pageNo
				}
				let params = Object.assign(this.params, { pageNo: this.pageNo, pageSize: this.pageSize })
				this.status = "loading"
				productUniversalQueryPage(params).then(res => {
					if (res.status == 200) {
						if(res.data.list.length>0){
							res.data.list.forEach(con=>{
								con.titFlag = false
								con.c_titFlag = false
							})
						}
						if(this.pageNo>1){
							this.listData = this.listData.concat(res.data.list || [])
						}else{
							this.listData = res.data.list || []
						}
						this.totalNum = res.data.count || 0
					} else {
						this.listData = []
						this.totalNum = 0
						this.noDataText = res.message
					}
					this.status = "loadmore"
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.listData.length < this.totalNum){
					this.pageNo += 1
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss">
	.productPricing-content{
		width:100%;
		height: 100vh;
		.product-list{
			height: 100vh;
				.st-detailList-main{
					padding: 20upx;
					.st-detailList-main-item{
						background: #ffffff;
						padding: 20upx;
						margin-bottom: 25upx;
						border-radius: 25upx;
						box-shadow: 1px 1px 3px #EEEEEE;
						.st-detailList-tit{
							padding-bottom: 20upx;
							position: relative;
							border-bottom: 1px solid #e4e7ed;
							.p-tit-box{
								width: 100%;
								padding:20rpx 30rpx;
								box-sizing: border-box;
								position: absolute;
								top: 60rpx;
								left:0;
								color:#fff;
								background:rgba(0,0,0,.8);
							}
						}
						.st-detailList-item-con{
							padding: 20upx;
							font-size: 26upx;
							position: relative;
							.p-t-tit-box{
								width: 100%;
								padding:20rpx 30rpx;
								box-sizing: border-box;
								position: absolute;
								bottom: 66rpx;
								left:0;
								color:#fff;
								background:rgba(0,0,0,.8);
							}
							.gray{
								color: gray;
							}
							.pimgs{
								margin-right: 16upx;
							}
							.font_13{
								font-size: 26upx;
							}
							.padding_3{
								padding: 6upx 0;
								word-break: break-all;
							}
						}
						.price-all{
							border-top: 1px solid #e4e7ed;
							padding: 20upx 20upx 0;
							.price-item1{
								width: 18%;
								border-right:  1px solid #e4e7ed;
								text-align: center;
								>view{
									color:#999;
								}
							}
							.price-item2{
								width: 46%;
								border-right:  none;
								text-align: center;
								>view{
									color:#999;
								}
							}
						}
					}
				}
				
				
		}
	}
</style>
