<template>
	<view>
		<up-subsection :list="menu_list" :current="0" @change="sectionChange"></up-subsection>
		<view class="content">
			<up-transition :show="true" mode="slide-left">
				<view v-if="goodsList1.length>0">
					<up-list @scrolltolower="getGoodsList">
						<up-list-item v-for="(item, index) in goodsList1" :key="index">
							<view class="card">
								<view class="card-content">
									<view class="card-content-l" style="width: 152rpx;height: 152rpx;">
										<image style="width: 152rpx;height: 152rpx;" :src="item.image" mode=""></image>
									</view>
									<view class="card-content-r">
										<view class="title ellipsis">
											编号:{{item.order_id}}|{{item.store_name}}
										</view>
										<view>
											单位:{{item.unit_name}}
										</view>
										<view>
											规格:{{item.store_info}}
										</view>
										<view style="color: red;">
											需求量： {{item.need_num}}
										</view>
										<view>
											<view class="">
												采购备注：
											</view>
											<view v-for="value in item.source_order_info" style="display: flex;">
												<view>
													数量：{{value.need_num}}
												</view>
												<view style="margin-left: 8rpx;">
													备注：{{value.mark}}
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="card-footer">
									<up-button size="small" type="primary" shape="circle" @click="cancleOrder(item)"
										v-if="item.buyer_confirm==0">确认已采购</up-button>
									<up-button size="small" type="success" shape="circle" v-else
										@click="cancleOrder(item)">修改采购信息</up-button>
								</view>
								<up-line style="margin-top: 30rpx;" color="#F3F3F3"></up-line>
							</view>
						</up-list-item>
					</up-list>
				</view>
				<up-empty @click='test2' v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</up-empty>
			</up-transition>
			<up-modal :show="show" title="采购确认" showCancelButton @cancel="show=false" @confirm="offerUpdate()">
				<up-form labelPosition="left">
					<up-form-item label="供应商" labelWidth='auto'>
						<!-- 						<up-input @click="showSupplier = true">
							<template #suffix>
								<span>{{supplierText}}</span>
							</template>
						</up-input> -->
						<next-search-select :multiple="false" :list="supplierList" label-key="mer_name" value-key="id"
							placeholder=" 请选择供应商" title="选择供应商" v-model:value="formData.supplier_id"
							@change="changeCallback" @search="getSupplierList" clearable></next-search-select>
					</up-form-item>
					<up-form-item label="名称">
						<up-input v-model="formData.store_name" border="none" disabled=""></up-input>
					</up-form-item>
					<up-form-item label="需求数量">
						<up-input v-model="formData.need_num" disabled> <template #suffix>
								<span>{{formData.unit_name}}</span>
							</template></up-input>
					</up-form-item>
					<up-form-item label="采购数量">
						<up-input v-model="formData.buyer_nums" @change='changeInputPrice'> <template #suffix>
								<span>{{formData.unit_name}}</span>
							</template></up-input>
					</up-form-item>
					<up-form-item label="总价">
						<up-input v-model="formData.total_price"></up-input>
					</up-form-item>
					<up-form-item label="付款方式" labelWidth='auto'>
						<up-radio-group v-model="radio_value">
							<up-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name"
								:name="item.name" @change="radioChange"></up-radio>
						</up-radio-group>
					</up-form-item>
					<view style="font-size: 30rpx;color: #303133;">
						<view class="">
							采购备注：
						</view>
						<view v-for="item in formData.source_order_info" style="display: flex;">
							<view>
								数量：{{item.need_num}}
							</view>
							<view style="margin-left: 8rpx;">
								备注：{{item.mark}}
							</view>
						</view>
					</view>
				</up-form>
			</up-modal>
			<up-picker :show="showSupplier" :columns="supplierList" keyName="mer_name" @confirm="supplierConfirm"
				@cancel="showSupplier = false"></up-picker>

		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		reactive,
	} from "vue"
	import {
		supplierListApi,
		purchaseProductOfferLists,
		purchaseProductOfferUpdate,
		purchaseProductOfferOutboundFloatingLv
	} from "@/api/purchase_product_offer.js"
	const menu_list = ref(['未采购', '已采购']);

	const test2 = () => {
		console.log("点解")
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	const show = ref(false)
	const showSupplier = ref(false)
	const supplierText = ref('')
	const pickerText = ref('')
	const picker_price = ref(0)
	const pickerShow = ref(false)
	const formData = ref({
		id: '',
		bhoid: '',
		supplier_id: '',
		purchase: '',
		total_price: '',
		buyer_nums: '',
		need_num: 0,
		package: '',
		store_info: '',
		marques: '',
		after_sales: '',
		pay_type: 1,
		source_order_info: []
	})
	// tabsindex
	const radiolist1 = ref([{
		name: '赊账',
		value: 1
	}, {
		name: '现金',
		value: 2
	}])
	const radio_value = ref('赊账')
	const tabIndex = ref(1)
	const {
		windowWidth
	} = uni.getSystemInfoSync();
	const tabsLeft = ref(((windowWidth / 2) - 26) / 2)
	const tabsRight = ref(tabsLeft.value + (windowWidth / 2))
	// tabsindex结束

	const priceBlur = (index, goodsList) => {
		goodsList[index].price = Number(goodsList[index].price).toFixed(2)
	}

	// 列表
	const showGoods = ref(false)
	const showGoods1 = ref(false)
	const goodsList = ref([])
	const goodsList1 = ref([])
	const where = ref({
		buyer_confirm: 0,
		page_no: 0,
		page_size: 15
	})
	const loadEnd = ref(false)
	const getGoodsList = async () => {
		if (loadEnd.value) {
			return
		}
		where.value.page_no++
		let res = await purchaseProductOfferLists(where.value)
		if (where.value.page_no == 1) {
			goodsList1.value = res.data.lists
		} else {
			goodsList1.value.push(...res.data.lists)
		}
		if (res.data.lists.length < where.value.page_size) {
			loadEnd.value = true
		}
	}
	const supplierList = ref([])
	const getSupplierList = (val = '') => {
		supplierListApi({
			mer_name: val
		}).then(res => {
			supplierList.value = res.data.lists
		})
	}

	function changeCallback(item) {
		console.log("选中的item：", item)
	}
	const supplierConfirm = (e) => {
		showSupplier.value = false
		supplierText.value = e.value[0].mer_name
		formData.value.supplier_id = e.value[0].id
	}
	const cancleOrder = (item) => {
		columns.value[0].forEach(e => {
			if (e['name_b'] == item['category_name']) {
				pickerText.value = e['name']
				picker_price.value = e['value']
			}
		})
		show.value = true
		formData.value.store_name = item['store_name']
		formData.value.id = item['id']
		formData.value.bhoid = item.order_id
		formData.value.need_num = item['need_num']
		formData.value.buyer_nums = ''
		formData.value.product_id = item['product_id']
		formData.value.unit_name = item['unit_name']
		formData.value.package = item.package
		formData.value.store_info = item.store_info
		formData.value.marques = item.marques
		formData.value.after_sales = item.after_sales
		formData.value.source_order_info = item.source_order_info
		if (item.buyer_confirm == 1) {
			formData.value.purchase = item.price
			formData.value.buyer_nums = item.buyer_nums
			formData.value.total_price = item.total_price
			formData.value.supplier_id = item.supplier_id
			formData.value.pay_type = item.pay_type
			supplierText.value = item.supplier_name
			if (item.pay_type == 1) {
				radio_value.value = '赊账'
			} else {
				radio_value.value = '现金'
			}
		} else {
			formData.value.purchase = ''
			formData.value.total_price =
				formData.value.supplier_id = ''
			formData.value.pay_type = 1
			supplierText.value = ''
			radio_value.value = '赊账'
		}
	}
	const offerUpdate = () => {
		purchaseProductOfferUpdate(formData.value).then(res => {
			uni.$u.toast(res.msg);
			show.value = false
			getGoodsList()
		})
	}
	const changeInputPrice = (e) => {
		if (formData.value.buyer_nums > 0 && formData.value.purchase > 0) {
			formData.value.total_price = (formData.value.buyer_nums * formData.value.purchase).toFixed(2)
		}
	}
	const sectionChange = (index) => {
		loadEnd.value = false
		where.value.page_no = 0
		where.value.buyer_confirm = index
		goodsList1.value = []
		getGoodsList()
	}
	const columns = ref([]);
	const pickerConfirm = (e) => {
		pickerShow.value = false
		let outbound_price = (formData.value.price * e.value[0].value)
		pickerText.value = e.value[0].name
		formData.value.outbound_price = (parseInt(formData.value.price) + outbound_price).toFixed(2)
	}
	const OutboundFloatingLv = () => {
		purchaseProductOfferOutboundFloatingLv().then(res => {
			columns.value = res.data
		})
	}
	const radioChange = (e) => {
		if (e == '赊账') {
			formData.value.pay_type = 1
		} else {
			formData.value.pay_type = 2
		}
	}
	getGoodsList()
	OutboundFloatingLv()
	getSupplierList()
</script>

<style lang="scss">
	.head {
		padding: 20rpx;
		background-color: white;
		position: relative;

		.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: 50rpx;
			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: 300rpx;
		right: 20rpx;
	}

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