<template>
	<view class="page">
		<scroll-view class="scroll" scroll-y>
			<uni-list>
				<uni-list-item>
					<template v-slot:body>
						<view class="item-title"><text class="required">*</text><text>同行名称</text></view>
					</template>
					<template v-slot:footer>
						<uni-easyinput v-model="form.peerName" placeholder="请输入同行名称" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item class="select-item" :class="form.peerProductName ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('peerProductId')" :rightText="displayLabel('peerProductName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text class="required">*</text><text>同行品种</text></view>
					</template>
				</uni-list-item>

				<uni-list-item>
					<template v-slot:body>
						<view class="item-title"><text class="required">*</text><text>同行报价</text></view>
					</template>
					<template v-slot:footer>
						<uni-easyinput type="digit" v-model="form.peerPrice" placeholder="请输入同行报价" :inputBorder="false" />
					</template>
				</uni-list-item>
			</uni-list>
		</scroll-view>

		<view class="footer">
			<button class="btn submit" type="primary" :disabled="submitting" @click="onSubmit">{{ submitting ? '提交中...' : '提交' }}</button>
		</view>

		<SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
			@confirm="onSheetConfirm" />
	</view>
</template>

<script>
import SingleSelectSheet from '@/components/single-select/index.vue'
import { breedRelationshipQueryApi } from '@/api/procure-manage/salesmanQuotation.js'
import { salesmanQuotationPeerSaveApi } from '@/api/procure-manage/salesmanQuotationPeer.js'

export default {
	name: 'PeerInfoAdd',
	components: { SingleSelectSheet },
	data() {
		return {
			submitting: false,
			productVarietyList: [],
			sheet: { visible: false, title: '请选择', options: [], field: '', value: '' },
			form: {
				peerName: '',
				peerProductId: '',
				peerProductName: '',
				peerPrice: ''
			}
		}
	},
	created() {
		this.loadProductVariety()
	},
	methods: {
		async loadProductVariety() {
			try {
				const res = await breedRelationshipQueryApi({ pageIndex: 1, pageSize: 9999 })
				const _data = res && res.data ? res.data : {}
				const list = _data.datas || _data.list || _data.records || []
				this.productVarietyList = list.map(it => ({
					label: it.productName || it.name || '',
					value: it.productId || it.id || ''
				})).filter(it => it.value)
			} catch (e) {
				this.productVarietyList = []
			}
		},
		displayLabel(field) {
			const map = { peerProductName: '请选择同行品种' }
			const val = this.form[field]
			return val ? String(val) : (map[field] || '请选择')
		},
		openSheet(field) {
			if (field === 'peerProductId') {
				const current = this.form.peerProductId
				const match = (this.productVarietyList || []).find(o => String(o.value) === String(current))
				this.sheet = {
					visible: true,
					title: '同行品种',
					options: this.productVarietyList || [],
					field,
					value: match ? match.value : ''
				}
			}
		},
		onSheetConfirm({ value, label }) {
			const field = this.sheet.field
			if (!field) return
			if (field === 'peerProductId') {
				this.form.peerProductId = value || ''
				this.form.peerProductName = label || ''
			}
		},
		validate() {
			const checks = [
				{ key: 'peerName', label: '同行名称' },
				{ key: 'peerProductId', label: '同行品种' },
				{ key: 'peerPrice', label: '同行报价' }
			]
			for (const it of checks) {
				const val = this.form[it.key]
				const empty = (val === undefined || val === null || (typeof val === 'string' && String(val).trim() === ''))
				if (empty) {
					uni.showToast({ title: `${it.label}必填`, icon: 'none' })
					return false
				}
			}
			return true
		},
		buildPayload() {
			return {
				peerName: this.form.peerName,
				peerProductId: this.form.peerProductId,
				peerPrice: this.form.peerPrice
			}
		},
		async onSubmit() {
			if (this.submitting) return
			if (!this.validate()) return
			this.submitting = true
			const payload = this.buildPayload()
			try {
				await salesmanQuotationPeerSaveApi(payload)
				uni.showToast({ title: '保存成功', icon: 'success' })
				try { uni.setStorageSync('PEER_INFO_LIST_NEED_REFRESH', '1') } catch (e) {}
				setTimeout(() => { uni.redirectTo({ url: '/pages/peer-info/index' }) }, 300)
			} catch (e) {
				uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
			} finally {
				this.submitting = false
			}
		}
	}
}
</script>

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

.scroll {
	flex: 1;
	padding: 0rpx 0 160rpx;
	background-color: #f3f3f3;
}

.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32rpx;
	padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
	z-index: 10;

	.btn {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
	}

	.submit {
		background: $theme-primary;
		color: #fff;
	}
}

.title-header {
	display: flex;
	align-items: center;
	padding: 24rpx 32rpx 12rpx;
	background-color: #ffffff;

	.title-header_icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	span {
		font-size: 34rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.9);
	}
}

.mgb10 {
	margin-bottom: 20rpx;
}

::v-deep .uni-list {
    .uni-easyinput {
        display: flex;

        .uni-input-input {
            color: rgba(0, 0, 0, 0.9);
        }
    }

    .uni-input-placeholder {
        z-index: 1;
    }

    .uni-input-input {
        background-color: #ffffff;
    }

    background: transparent;

    &-item {
        &__extra-text {
            font-size: 32rpx;
        }

        &__content-title {
            font-size: 32rpx;
            color: rgba(0, 0, 0, 0.9);
        }

        &__container {
            padding: 32rpx;

            .uni-easyinput {
                &__placeholder-class {
                    font-size: 32rpx;
                    color: rgba(0, 0, 0, 0.4);
                }

                &__content {
                    border: none;
                    background-color: #ffffff !important;

                    &-input {
                        padding-left: 0 !important;
                        height: 48rpx;
                        line-height: 48rpx;
                        font-size: 32rpx;
                    }

                    .content-clear-icon {
                        font-size: 44rpx !important;
                    }
                }
            }

            .item-title,
            .uni-list-item__content {
                flex: none;
                min-height: 48rpx;
                line-height: 48rpx;
                font-size: 32rpx;
                position: relative;
                width: 210rpx;
                margin-right: 32rpx;
                color: rgba(0, 0, 0, 0.9);

                .required {
                    color: red;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: -16rpx;
                }
            }
        }

        &.select-item {
            &.is-empty {
                .uni-list-item__extra-text {
                    color: rgba(0, 0, 0, 0.4) !important;
                }
            }

            &.is-filled {
                .uni-list-item__extra-text {
                    color: rgba(0, 0, 0, 0.9) !important;
                }
            }
        }

        &.mgb10 {
            margin-bottom: 20rpx;
        }
    }
}
</style>