<template>
	<view class="page">
		<scroll-view class="scroll" scroll-y>
			<view class="detail-page">
				<view class="section">
					<text class="row company">{{ safeText(form.projectName) }}</text>
					<view class="row"><text class="label">项目编号</text><text class="value">{{ safeText(form.projectCode) }}</text></view>
					<view class="row"><text class="label">报价时间</text><text class="value">{{ formatDateTimeMinute(form.quoteTime) }}</text></view>
					<view class="row"><text class="label">供应商名称</text><text class="value">{{ safeText(form.supplierName) }}</text></view>
					<view class="row"><text class="label">品种</text><text class="value">{{ safeText(form.productName) }}</text></view>
					<view class="row"><text class="label">数量</text><text class="value">{{ safeText(form.quantity) }}</text></view>
					<view class="row"><text class="label">价格</text><text class="value">{{ safeText(form.price) }}</text></view>
					<view class="row"><text class="label">采购处</text><text class="value">{{ safeText(form.purchaseDepartmentName) }}</text></view>
					<view class="row"><text class="label">负责人</text><text class="value">{{ safeText(form.principalName) }}</text></view>
					<view class="row"><text class="label">分配时间</text><text class="value">{{ formatDateTimeMinute(form.assignTime) }}</text></view>
				</view>
			</view>
		</scroll-view>

		<detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
	</view>
</template>

<script>
import DetailButtons from '@/components/detail-buttons/index.vue'
import { supplierQuotationDealGetApi } from '@/api/procure-manage/supplierQuotationDeal.js'

export default {
	name: 'QuoteManageDetail',
	components: { DetailButtons },
	data() {
		return {
			id: '',
			loading: false,
			form: {},
			buttons: [{
				text: '分配',
				visible: true,
				variant: 'primary',
				event: 'assign'
			}]
		}
	},
	computed: {
		displayButtons() {
			return [
				{ ...this.buttons[0], visible: !this.form.principalId && this.$auth.hasPermi('procure-manage:quote-manage:assign') }
			]
		}
	},
	onShow() {
		const options = (this.$route && this.$route.query) ? this.$route.query : {}
		const id = options && options.id ? String(options.id) : ''
		this.id = id
		this.loadDetail()
	},
	methods: {
		safeText(v) {
			const s = v == null ? '' : String(v)
			return s.trim() ? s : '-'
		},
		formatDateTimeMinute(v) {
			const s = v == null ? '' : String(v).trim()
			if (!s) return '-'
			if (s.length >= 16) return s.slice(0, 16)
			if (s.length >= 10) return s.slice(0, 10)
			return s
		},
		async loadDetail() {
			this.loading = true
			try {
				const res = await supplierQuotationDealGetApi(this.id)
				const data = (res && res.data) ? res.data : {}
				this.form = data
			} catch (e) {
				this.form = {}
				uni.showToast({ title: '详情加载失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		handleButtonClick(btn) {
			if (!btn || btn.disabled) return
			const e = btn.event || ''
			if (e === 'assign') return this.onAssign()
		},
		onAssign() {
			const pd = this.form.purchaseDepartment || this.form.purchaseDepartmentId || ''
			uni.navigateTo({ url: '/pages/quote-manage/assign?id=' + this.id + '&purchaseDepartment=' + pd })
		}
	}
}
</script>

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

.scroll {
	flex: 1;
	padding: 8rpx 0 144rpx;
}

.detail-page {
	background: #f3f3f3;
}

.section {
	padding: 32rpx;
	background: #fff;
	margin-bottom: 20rpx;
}

.row {
	display: flex;
	margin-bottom: 28rpx;

	&:last-child {
		margin-bottom: 0;
	}

	&.company {
		font-size: 36rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.9);
		padding-top: 8rpx;
		line-height: 50rpx;
		margin-bottom: 32rpx;
	}

	.label {
		max-width: 420rpx;
		margin-right: 20rpx;
		line-height: 32rpx;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.value {
		flex: 1;
		line-height: 32rpx;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.9);
		text-align: right;
		word-break: break-all;
	}
}
</style>