<template>
	<view style="padding: 100rpx 0;">
		<view class="head">
			<view class="">
				<view class="" style="display: flex;justify-content: space-around;margin-top: 24rpx;color:#777777">
					<view :class="{act: tabIndex==1}" @click="changeTabs(1)">
						报价列表
					</view>
					<view :class="{act: tabIndex==2}" @click="changeTabs(2)">
						报价记录{{tabIndex}}
					</view>
				</view>
				<view style="height: 8rpx;" />
				<view class="line" :style="{left:tabIndex==1?tabsLeft+'px':tabsRight+'px'}" />
			</view>
		</view>
		<view class="content">
			<u-loading-page v-if="loading" :loading="loading"></u-loading-page>
			<view v-else>
				<view class="card" v-for="(item,index) in lists" :key='index'>
					<view class="head">
					</view>
					<view class="card-content">
						<view class="card-content-l" style="width: 152rpx;height: 152rpx;">
							<image style="width: 152rpx;height: 152rpx;" :src="item.goods.imgs" mode=""></image>
							<view class="status">
								{{tabIndex==1?"未报价":"已报价" }}
							</view>
						</view>
						<view class="card-content-r">
							<view class="title ellipsis">
								{{item.goods.name}}
							</view>
							<view class="need">
								需求量： {{item.need_num}}{{item.unit_name}}
							</view>
							<view class="ipt">
								<u--input placeholder="输入报价数量" :readonly="tabIndex==2" v-model="item.nums"
									style="background-color:#F6F6F6;border: none;"></u--input>
								<view style="width: 10rpx;">

								</view>
								<u--input style="background-color: #F6F6F6;border: none;" placeholder="输入产品报价"
									@blur="priceBlur(index)" :readonly="tabIndex==2" v-model="item.price"></u--input>
							</view>
						</view>
					</view>
					<view class="card-footer" v-if="item.nums && item.price">
						共{{item.nums}}{{item.unit_name}}&nbsp; &nbsp;合计:<text
							style="font-size: 28rpx;color: #FC452F;font-weight: 700;">￥{{(item.nums*item.price).toFixed(2)}}</text>
					</view>
					<u-line style="margin-top: 30rpx;" color="#F3F3F3"></u-line>
				</view>
			</view>

			<!-- 	<up-empty @click='test2' v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</up-empty> -->

			<!-- <view class="detail" @click="navgo('/pageQuota/Balance/index')">
				提现
			</view> -->
			<view class="submit-btn" v-if="tabIndex==1">
				<u-button shape='circle' color='#20B128' @click="submit" text="提交"></u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		OpurchaseGoodsOfferListApi
	} from "@/api/supplier.js"




	export default {
		data() {
			return {
				tabIndex: 1,
				tabsLeft: 0,
				tabsRight: 0,
				loading: false,
				lists: [{
						"id": 15,
						"supplier_id": 9,
						"order_id": 2,
						"goods_id": 113,
						"price": "",
						"nums": '',
						"unit": null,
						"is_adopt": 0,
						"is_storage": 0,
						"create_time": 0,
						"update_time": 0,
						"delete_time": null,
						"need_num": 0,
						"notes": null,
						"before_nums": 400,
						"is_adopt_text": "待报价",
						"goods": {
							"id": 113,
							"name": "火龙果花",
							"py": "",
							"sys_labels": [
								"497"
							],
							"number": "",
							"spec": "富含维生素C、钙、磷、铁等营养成分",
							"class": 497,
							"brand": 0,
							"unit": 2,
							"buy": "0.02",
							"sell": "0.01",
							"retail": "0.00",
							"code": "",
							"warehouse": 1,
							"location": "",
							"stocktip": "100.00",
							"sales": 0,
							"tax_rate": null,
							"imgs": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240515/202405151405465afc55555.png",
							"details": [
								""
							],
							"data": "",
							"more": "",
							"create_time": "2024-05-15 14:05:52",
							"update_time": "2024-05-15 14:05:52",
							"delete_time": null,
							"sort": 0,
							"unit_name": "斤"
						}
					},
					{
						"id": 14,
						"supplier_id": 9,
						"order_id": 2,
						"goods_id": 112,
						"price": "",
						"nums": '',
						"unit": null,
						"is_adopt": 0,
						"is_storage": 0,
						"create_time": 0,
						"update_time": 0,
						"delete_time": null,
						"need_num": 0,
						"notes": null,
						"before_nums": 300,
						"is_adopt_text": "待报价",
						"goods": {
							"id": 112,
							"name": "蛇皮果",
							"py": "",
							"sys_labels": [
								"120"
							],
							"number": "",
							"spec": "富含维生素C、B族维生素",
							"class": 120,
							"brand": 0,
							"unit": 2,
							"buy": "0.02",
							"sell": "0.01",
							"retail": "0.00",
							"code": "",
							"warehouse": 1,
							"location": "",
							"stocktip": "100.00",
							"sales": 0,
							"tax_rate": null,
							"imgs": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240515/20240515135546c2f251314.png",
							"details": [
								""
							],
							"data": "",
							"more": "",
							"create_time": "2024-05-15 13:55:49",
							"update_time": "2024-05-15 13:55:49",
							"delete_time": null,
							"sort": 0,
							"unit_name": "斤"
						}
					},
					{
						"id": 13,
						"supplier_id": 9,
						"order_id": 2,
						"goods_id": 111,
						"price": "",
						"nums": '',
						"unit": null,
						"is_adopt": 0,
						"is_storage": 0,
						"create_time": 0,
						"update_time": 0,
						"delete_time": null,
						"need_num": 0,
						"notes": null,
						"before_nums": 200,
						"is_adopt_text": "待报价",
						"goods": {
							"id": 111,
							"name": "红参果",
							"py": "",
							"sys_labels": [
								"121"
							],
							"number": "",
							"spec": "质地柔软丨口感清甜",
							"class": 121,
							"brand": 0,
							"unit": 2,
							"buy": "0.02",
							"sell": "0.01",
							"retail": "0.00",
							"code": "",
							"warehouse": 1,
							"location": "",
							"stocktip": "100.00",
							"sales": 0,
							"tax_rate": null,
							"imgs": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240515/202405151353132038a8389.png",
							"details": [
								""
							],
							"data": "",
							"more": "",
							"create_time": "2024-05-15 13:53:16",
							"update_time": "2024-05-15 13:53:16",
							"delete_time": null,
							"sort": 0,
							"unit_name": "斤"
						}
					},
					{
						"id": 12,
						"supplier_id": 9,
						"order_id": 2,
						"goods_id": 110,
						"price": "",
						"nums": '',
						"unit": null,
						"is_adopt": 0,
						"is_storage": 0,
						"create_time": 0,
						"update_time": 0,
						"delete_time": null,
						"need_num": 0,
						"notes": null,
						"before_nums": 100,
						"is_adopt_text": "待报价",
						"goods": {
							"id": 110,
							"name": "仁面果",
							"py": "",
							"sys_labels": [
								"122"
							],
							"number": "",
							"spec": "口感丰富丨果汁丰富",
							"class": 122,
							"brand": 0,
							"unit": 2,
							"buy": "0.02",
							"sell": "0.01",
							"retail": "0.00",
							"code": "",
							"warehouse": 1,
							"location": "",
							"stocktip": "100.00",
							"sales": 0,
							"tax_rate": null,
							"imgs": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240515/202405151349268542d3786.png",
							"details": [
								""
							],
							"data": "",
							"more": "",
							"create_time": "2024-05-15 13:51:06",
							"update_time": "2024-05-15 13:51:06",
							"delete_time": null,
							"sort": 0,
							"unit_name": "斤"
						}
					},
					{
						"id": 15,
						"supplier_id": 9,
						"order_id": 2,
						"goods_id": 113,
						"price": "",
						"nums": '',
						"unit": null,
						"is_adopt": 0,
						"is_storage": 0,
						"create_time": 0,
						"update_time": 0,
						"delete_time": null,
						"need_num": 0,
						"notes": null,
						"before_nums": 400,
						"is_adopt_text": "待报价",
						"goods": {
							"id": 113,
							"name": "火龙果花",
							"py": "",
							"sys_labels": [
								"497"
							],
							"number": "",
							"spec": "富含维生素C、钙、磷、铁等营养成分",
							"class": 497,
							"brand": 0,
							"unit": 2,
							"buy": "0.02",
							"sell": "0.01",
							"retail": "0.00",
							"code": "",
							"warehouse": 1,
							"location": "",
							"stocktip": "100.00",
							"sales": 0,
							"tax_rate": null,
							"imgs": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240515/202405151405465afc55555.png",
							"details": [
								""
							],
							"data": "",
							"more": "",
							"create_time": "2024-05-15 14:05:52",
							"update_time": "2024-05-15 14:05:52",
							"delete_time": null,
							"sort": 0,
							"unit_name": "斤"
						}
					},
					{
						"id": 14,
						"supplier_id": 9,
						"order_id": 2,
						"goods_id": 112,
						"price": "",
						"nums": '',
						"unit": null,
						"is_adopt": 0,
						"is_storage": 0,
						"create_time": 0,
						"update_time": 0,
						"delete_time": null,
						"need_num": 0,
						"notes": null,
						"before_nums": 300,
						"is_adopt_text": "待报价",
						"goods": {
							"id": 112,
							"name": "蛇皮果",
							"py": "",
							"sys_labels": [
								"120"
							],
							"number": "",
							"spec": "富含维生素C、B族维生素",
							"class": 120,
							"brand": 0,
							"unit": 2,
							"buy": "0.02",
							"sell": "0.01",
							"retail": "0.00",
							"code": "",
							"warehouse": 1,
							"location": "",
							"stocktip": "100.00",
							"sales": 0,
							"tax_rate": null,
							"imgs": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240515/20240515135546c2f251314.png",
							"details": [
								""
							],
							"data": "",
							"more": "",
							"create_time": "2024-05-15 13:55:49",
							"update_time": "2024-05-15 13:55:49",
							"delete_time": null,
							"sort": 0,
							"unit_name": "斤"
						}
					},
					{
						"id": 13,
						"supplier_id": 9,
						"order_id": 2,
						"goods_id": 111,
						"price": "",
						"nums": '',
						"unit": null,
						"is_adopt": 0,
						"is_storage": 0,
						"create_time": 0,
						"update_time": 0,
						"delete_time": null,
						"need_num": 0,
						"notes": null,
						"before_nums": 200,
						"is_adopt_text": "待报价",
						"goods": {
							"id": 111,
							"name": "红参果",
							"py": "",
							"sys_labels": [
								"121"
							],
							"number": "",
							"spec": "质地柔软丨口感清甜",
							"class": 121,
							"brand": 0,
							"unit": 2,
							"buy": "0.02",
							"sell": "0.01",
							"retail": "0.00",
							"code": "",
							"warehouse": 1,
							"location": "",
							"stocktip": "100.00",
							"sales": 0,
							"tax_rate": null,
							"imgs": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240515/202405151353132038a8389.png",
							"details": [
								""
							],
							"data": "",
							"more": "",
							"create_time": "2024-05-15 13:53:16",
							"update_time": "2024-05-15 13:53:16",
							"delete_time": null,
							"sort": 0,
							"unit_name": "斤"
						}
					},
					{
						"id": 12,
						"supplier_id": 9,
						"order_id": 2,
						"goods_id": 110,
						"price": "",
						"nums": '',
						"unit": null,
						"is_adopt": 0,
						"is_storage": 0,
						"create_time": 0,
						"update_time": 0,
						"delete_time": null,
						"need_num": 0,
						"notes": null,
						"before_nums": 100,
						"is_adopt_text": "待报价",
						"goods": {
							"id": 110,
							"name": "仁面果",
							"py": "",
							"sys_labels": [
								"122"
							],
							"number": "",
							"spec": "口感丰富丨果汁丰富",
							"class": 122,
							"brand": 0,
							"unit": 2,
							"buy": "0.02",
							"sell": "0.01",
							"retail": "0.00",
							"code": "",
							"warehouse": 1,
							"location": "",
							"stocktip": "100.00",
							"sales": 0,
							"tax_rate": null,
							"imgs": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240515/202405151349268542d3786.png",
							"details": [
								""
							],
							"data": "",
							"more": "",
							"create_time": "2024-05-15 13:51:06",
							"update_time": "2024-05-15 13:51:06",
							"delete_time": null,
							"sort": 0,
							"unit_name": "斤"
						}
					}



				]
			}
		},
		methods: {
			getTabsPosi() {
				const {
					windowWidth
				} = uni.getSystemInfoSync();
				this.tabsLeft = (((windowWidth / 2) - 26) / 2)
				this.tabsRight = (this.tabsLeft + (windowWidth / 2))
			},
			async getLists() {
				let that = this
				// that.loading = true
				// let res = await getLists({})
				// this.lists = res.lists
				// that.loading = false
				that.loading = true
				setTimeout(() => {
					that.loading = false
				}, 1000)
			},
			changeTabs(num) {
				let that = this
				this.tabIndex = num
				this.getLists()
			},
			priceBlur(i) {
				this.lists[i].price = (+this.lists[i].price).toFixed(2)
			},
			async submit() {
				let data =
					this.lists.filter(item => {
						return (+item.price && +item.nums)
					}).map(item => {
						return {
							id: item.id,
							nums: item.nums,
							price: item.price
						}
					})

				if (!data.length) return
				this.getLists(2)
				return
				let res = await submitApi({
					...data
				})
				this.getLists(2)
			}
		},
		onLoad() {
			this.getTabsPosi()
			this.getLists()
			OpurchaseGoodsOfferListApi()

		}
	}
</script>


<style lang="scss">
	.head {
		padding: 20rpx;
		background-color: white;
		position: relative;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 10;

		.act {
			color: #20B128;
		}

		.line {
			width: 26px;
			height: 5rpx;
			background-color: #20B128;
			border-radius: 50rpx;
			position: absolute;
			transition: 300ms;
		}
	}

	.content {
		padding: 20rpx;
		padding-bottom: 150rpx;

		.card {
			width: 710rpx;
			margin: 0 auto;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: white;



			.card-content {
				display: flex;
				position: relative;

				.card-content-l {
					margin-right: 20rpx;
					position: relative;

					.status {
						width: 152rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, .3);
						text-align: center;
						color: white;
						font-size: 24rpx;
						line-height: 40rpx;
						position: absolute;
						bottom: 0;
					}
				}

				.card-content-r {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
						width: 500rpx;
					}

					.need {
						color: #777777;
						font-size: 24rpx;
					}

					.ipt {
						display: flex;
						height: 56rpx;

					}
				}

				.status-png {
					position: absolute;
					right: 20rpx;
				}

			}

			.card-footer {
				margin-top: 30rpx;
				text-align: right;
				font-size: 28rpx;
				color: #060606;
			}
		}

		.submit-btn {
			position: fixed;
			bottom: 70rpx;
			width: 710rpx;
			margin: 0 auto;
		}
	}

	.detail {
		width: 88rpx;
		height: 88rpx;
		border-radius: 88rpx;
		text-align: center;
		line-height: 88rpx;
		background-color: #50C758;
		color: white;
		position: absolute;
		bottom: 30px;
		// right: 20rpx;
	}

	.ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>