<template>
	<view class="affirm-page">
		<view class="affirm-view overscroll">
			<!-- 门店信息 -->
			<form>
				<view class="module-com">
					<view class="commodity-view">
						<view class="commodity-list">
							<view
								class="commodity-item"
								v-for="(item, index) in selectList"
								:key="index"
							>
								<image
									class="item-icon"
									:src="item.itemCover || item.cover"
									alt="商品图"
								/>

								<view class="item-info">
									<view class="info-line">
										<text class="item-name">{{ item.itemName }}</text>
										<text class="item-price">
											<text class="unit">¥</text>

											<text class="price">{{
												item.itemPrice || getSelectItemPrice(item)
											}}</text>
										</text>
									</view>
									<view class="info-line">
										<text class="item-type">b级</text>
										<text class="item-count">
											<text >{{`${item.bigCount}`}}</text>
											<text >/</text>
											<text >{{ `${item.smallCount}` }}</text>
										</text>
									</view>
								</view>
							</view>
						</view>
						<view class="summary-bar">
							<view class="operate-view" @click="gobackEvent">
								<text class="iconfont icongouwuche"></text>
								重选花材
							</view>
							<view class="describe-view">
								共{{ selectList.length }}种,
								<!-- 共16扎9支， -->
								合计 ¥<text class="price">{{ allPrice }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="prompt-text">注: 请先关注公众号，绑定后可以在移动端自动登录</view> -->

				<view class="module-com input-line-wrap">
					<tui-list-cell class="line-cell" :hover="false" :arrow="true" @tap="showCustomer = true">
						<view class="tui-title ">供应商</view>
						<text>
<!--							{{ detailsInfo.supplierName || "" }}-->
							{{ supplier.name || "请选择" }}
							<!-- 欠款：91658.00  -->
						</text>
					</tui-list-cell>
					<!-- <tui-list-cell class="line-cell" :hover="false">
						<view class="tui-title "></view>

						<view class="tag-list">
							<view class="tag-item">
								盛丰
							</view>
							<view class="tag-item">
								盛丰
							</view>
							<view class="tag-item">
								盛丰
							</view>
						</view>
					</tui-list-cell> -->
				</view>
				<view class="module-com input-line-wrap">
					<tui-list-cell class="line-cell" :hover="false">
						<view class="tui-title ">打包费</view>
						<input :disabled="!canIEdit" v-model="form.packingCharge" placeholder-class="phcolor" class="tui-input" name="floor" placeholder="请填写，留空没有费用"/>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<view class="tui-title ">短途运费</view>
						<input :disabled="!canIEdit" v-model="form.shortCharge" placeholder-class="phcolor" class="tui-input" name="floor" placeholder="请填写，留空没有费用"/>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<view class="tui-title ">包机（长途运费）</view>
						<input :disabled="!canIEdit" v-model="form.longCharge" placeholder-class="phcolor" class="tui-input" name="floor" placeholder="请填写，留空没有费用"/>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<view class="tui-title ">提货费</view>
						<input :disabled="!canIEdit" v-model="form.pickCharge" placeholder-class="phcolor" class="tui-input" name="floor" placeholder="请填写，留空没有费用"/>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<view class="tui-title ">本地运费</view>
						<input :disabled="!canIEdit" v-model="form.localCharge" placeholder-class="phcolor" class="tui-input" name="floor" placeholder="请填写，留空没有费用"/>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false" :arrow="true">
						<view class="tui-title ">入库日期</view>
						<!-- <view class="tui-input" v-if="form.province || form.city">
							{{ form.province + "-" + form.city }}
						</view> -->
						<!-- <view class="tui-placeholder" v-else>请选择</view>
						<input v-model="form.province" name="province" hidden /> -->
						<AppDatePicker
							v-if="canIEdit"
							:dateVal="form.entryTime"
							:placeholder="'请选择日期'"
						/>
						<view v-else>{{ form.entryTime || "请选择日期" }}</view>
					</tui-list-cell>

					<tui-list-cell class="line-cell remark-wrap" :hover="false">
						<view class="tui-title">备注</view>
						<view class="tui-input">
							<textarea
								:disabled="!canIEdit"
								v-model="form.introduction"
								class="tui-textarea remark"
								placeholder-class="phcolor"
								placeholder="请输入备注"
							/>
						</view>
					</tui-list-cell>
				</view>
			</form>
		</view>
		<view class="under-bar">
			<view class="price-view">
				<text class="price-title">总金额</text>
				<text class="price-number">
					¥ <text class="large">{{ Number(allPrice) + Number(form.packingCharge) + Number(form.shortCharge) + Number(form.longCharge) + Number(form.pickCharge) + Number(form.localCharge) }}</text>
				</text>
			</view>
			<button class="admin-button-com blue middle" v-if="canIEdit" @click="formSubmit">
				确认
			</button>
		</view>

		<!-- 选择客户 -->
		<AppSupplierSel
			:show.sync="showCustomer"
			@change="changeCustomerFn"
		/>
	</view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import TuiListCell from "@/components/plugin/list-cell";
import AppAvatarModule from "@/components/module/app-avatar";
import AppCustomerSel from "@/components/app-customer-sel";
const form = require("@/utils/formValidation.js");
import productMins from "@/mixins/product";
import {
	getPurchaseDetailApi,
	createPurchaseOrderApi
} from "@/api/purchase/index";
import { PURCHASE_ORDER_STATUS } from "@/utils/declare";

import AppDatePicker from "@/components/app-date-picker";
import AppSupplierSel from "@/components/app-supplier-sel";

export default {
	// 采购详情
	components: {
		TuiListCell,
		AppAvatarModule,
		AppCustomerSel,
		AppDatePicker,
		AppSupplierSel
	},
	mixins: [productMins],
	data() {
		return {
			PURCHASE_ORDER_STATUS,
			autoLoad: false,
			pageType: "purchase",
			supplier:'',
			form: {
				packingCharge: "", //打包费
				shortCharge: "",
				longCharge: "",
				pickCharge: "",
				localCharge: "",

				entryTime: "",
				ghsId: null
			},
			showCustomer: false,
			detailsInfo: {}
		};
	},
	onLoad() {
		this.initData();
	},
	computed: {
		...mapGetters(["getMerchantInfo", "getLoginInfo"]),
		allPrice() {
			let price = 0;

			if (this.selectList) {
				for (const item of this.selectList) {
					if (item.itemPrice) {
						price += Number(item.itemPrice);
					} else {
						price += this.getSelectItemPrice(item);
					}
				}
			}
			return Math.round(price * 100) / 100;
		},
		canIEdit() {
			const { orderSn } = this.option || {};

			if (!orderSn || this.detailsInfo.status == PURCHASE_ORDER_STATUS.CONFIRM) {
				return true;
			}
			return false;
		}
	},
	methods: {
		...mapActions(["initMerchantInfo"]),
		init() {
			this._getDet();
		},
		// api
		_getDet() {
			let data = uni.getStorageSync("modifyShopB");
			if (this.$util.isEmpty(data)) return;
			Object.keys(this.form).forEach((i, index) => {
				// if (i != 'password') {
				this.form[i] = data[i];
				// }
			});
		},

		async initData() {
			try {
				const { orderSn } = this.option;
				if (!orderSn) {
					return;
				}

				const { data } = await getPurchaseDetailApi(orderSn);
				console.log(11111, data);
				Object.keys(this.form).forEach((i, index) => {
					// if (i != 'password') {
					this.form[i] = data[i];
					// }
				});

				this.detailsInfo = data;

				if (data.itemInfo) {
					let list = data.itemInfo;
					list.forEach(element => {
						element.bigCount = element.bigNum;
						element.smallCount = element.smallNum;
					});
					this.setSelectInfoByType({ type: this.pageType, info: list });
				}

				if (!this.getMerchantInfo) {
					await this.initMerchantInfo();
				}
				console.log(66666, this.getMerchantInfo);
			} catch (error) {
				console.log(4444, error);
			}
		},

		changeCustomerFn(e) {
			console.log("changeCustomerFn", e);
			this.supplier = e;
			this.form.ghsId = e.id;
			// this.form.address = e.address;
			// this.form.lat = e.location.lat;
			// this.form.long = e.location.lng;
		},

		onCityConfirm(e) {
			// this.form.receiveAddress = e.label
			this.form.province = e.provinceName;
			this.form.city = e.cityName;
			// this.pickerText = JSON.stringify(e)
		},
		async confirmFn() {
			try {
				const { orderSn } = this.option;
				let formData = this.form;
				if (orderSn) {
					formData.orderSn = orderSn;
				}
				const itemInfo = this.selectList.map(ele => {
					return {
						classId: ele.classId,
						productId: ele.id,
						bigNum: ele.bigCount,
						smallNum: ele.smallCount,
						itemId:ele.itemId,
						itemPrice: ele.itemPrice || this.getSelectItemPrice(ele)
					};
				});
				formData.itemInfo = JSON.stringify(itemInfo);
				if (!this.getMerchantInfo) {
					await this.initMerchantInfo();
				}
				// formData.ghsId = this.getMerchantInfo.id;
				await createPurchaseOrderApi(formData);
				this.$msg("确认成功！");

				this.resetSelectInfoByType(this.pageType);
				// this.$util.pageTo({ url: "/pagesPurchase/result", type: 2 });
				uni.navigateTo({url:'/common/pageSuccess?title=新增成功'})
			} catch (error) {}
		},
		// 表单验证
		formSubmit(e) {

			if(this.supplier==''){
				uni.showToast({title:'请选择供货商',icon:'none'});return;
			}
			// 表单规则
			let rules = [
				{
					name: "itemInfo",
					rule: ["minLength", 1],
					msg: ["请选择花材"]
				}
			];
			// 进行表单检查
			let formData = this.form;
			formData.itemInfo = this.selectList;
			let checkRes = form.validation(formData, rules);
			// 验证通过!
			if (!checkRes) {
				this.confirmFn();
			} else {
				this.$msg(checkRes);
			}
		},
		gobackEvent() {
			uni.navigateTo({
				url: "/pagesPurchase/add",
				success: result => {},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.affirm-page {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;

	.affirm-view {
		flex: 1;
		padding: 20upx;
		background-color: #f0f2f6;

		.tag-list {
			width: 100%;
			display: flex;
			// justify-content: flex-end;
			align-items: center;
			.tag-item {
				padding: 0 28upx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				margin: 0 10upx 10upx 0;
				height: 50upx;
				font-size: 26upx;

				border: 1px solid #eeeeee;
				border-radius: 4upx;
			}
		}

		.commodity-view {
			display: flex;
			flex-direction: column;
			.commodity-list {
				padding: 20upx;
				.commodity-item {
					display: flex;
					margin-bottom: 20upx;
					.item-icon {
						flex-shrink: 0;
						width: 140upx;
						height: 140upx;
					}
					.item-info {
						display: flex;
						flex-direction: column;
						justify-content: center;
						flex: 1;
						margin-left: 20upx;
						.info-line {
							margin-bottom: 20upx;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							.item-name {
								color: #666;
								font-size: 28upx;
							}
							.item-price {
								color: #333;
								font-size: 22upx;
								.price {
									font-size: 32upx;
									font-weight: bold;
								}
							}
							.item-type {
								color: #999;
								font-size: 24upx;
							}
							.item-count {
								color: #666;
								font-size: 24upx;
							}
						}
					}
				}
			}
			.summary-bar {
				padding: 0 20upx;
				height: 90upx;
				display: flex;

				align-items: center;
				justify-content: space-between;
				border-top: 1upx solid #eeeeee;
				.operate-view {
					display: flex;

					align-items: center;
					color: #3385ff;
					font-size: 26upx;
					.iconfont {
						margin-right: 20upx;
						font-size: 40upx;
					}
				}
				.describe-view {
					display: flex;

					align-items: center;
					color: #333;
					font-size: 24upx;
					.price {
						font-weight: bold;
						font-size: 36upx;
					}
				}
			}
		}

		.module-com {
			background-color: #fff;
			margin-bottom: 20upx;

			border-radius: 10upx;
			overflow: hidden;
			.member-wrap {
				.member-det {
					font-size: 24upx;
					margin-left: 20upx;
				}
			}
			.remark-wrap {
				align-items: flex-start;
				.remark {
					height: 240upx;
				}
			}
			// .tui-placeholder,
			// .tui-input {
			// 	padding-right: 30upx;
			// 	width: 100%;
			// 	text-align: right;
			// }
		}
	}
	.under-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20upx;
		width: 100%;
		height: 100upx;
		background-color: #fff;

		box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
		.price-view {
			display: flex;
			align-items: center;
			font-size: 24upx;
			.price-title {
				color: #333;
			}
			.price-number {
				margin: 0 20upx;
				color: #ff2842;
				.large {
					font-size: 40upx;
				}
			}
		}
		.admin-button-com {
			width: 200upx;
		}
	}
}
</style>
