<template>
	<view class="page">
		<scroll-view class="scroll" scroll-y>
			<view class="detail-page">
				<view class="section">
					<text class="row company">{{ safeText(form.peerName) }}</text>
					<view class="row"><text class="label">同行品种</text><text class="value">{{ safeText(form.peerProductName) }}</text></view>
					<view class="row"><text class="label">同行报价</text><text class="value">{{ safeText(form.peerPrice) }}</text></view>
					<view class="row"><text class="label">创建人</text><text class="value">{{ safeText(form.createBy) }}</text></view>
					<view class="row"><text class="label">创建时间</text><text class="value">{{ formatDateTime(form.createTime) }}</text></view>
				</view>
			</view>
		</scroll-view>
		<detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
	</view>
</template>

<script>
import DetailButtons from '@/components/detail-buttons/index.vue'
import { salesmanQuotationPeerGetApi, salesmanQuotationPeerDeleteApi } from '@/api/procure-manage/salesmanQuotationPeer.js'

export default {
	name: 'PeerInfoDetail',
	components: { DetailButtons },
	data() {
		return {
			id: '',
			loading: false,
			form: {},
			buttons: [
				{ text: '编辑', visible: true, variant: 'outline', event: 'edit' },
				{ text: '删除', visible: true, variant: 'danger', event: 'delete' }
			]
		}
	},
	computed: {
		displayButtons() {
			const isToday = this.isToday(this.form.createTime);
			return [
                { ...this.buttons[0], visible: isToday && this.$auth.hasPermi('procure-manage:peer-info:modify') },
                { ...this.buttons[1], visible: isToday && this.$auth.hasPermi('procure-manage:peer-info:delete') }
			]
		}
	},
	onShow() {
		const options = (this.$route && this.$route.query) ? this.$route.query : {}
		const id = options && options.id ? String(options.id) : ''
		if (id && id !== this.id) {
			this.id = id
		}
		if (this.id) this.loadDetail()
	},
	methods: {
		isToday(dateStr) {
            if (!dateStr) return false;
            const date = new Date(dateStr);
            const today = new Date();
            return (
            date.getFullYear() === today.getFullYear() &&
            date.getMonth() === today.getMonth() &&
            date.getDate() === today.getDate()
            );
        },
		safeText(v) {
			const s = v == null ? '' : String(v)
			return s.trim() ? s : ''
		},
		formatDateTime(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
		},
		handleButtonClick(btn) {
			if (!btn || btn.disabled) return
			const e = btn.event || ''
			if (e === 'edit') return this.onEdit()
			if (e === 'delete') return this.onDelete()
		},
		onEdit() {
			uni.navigateTo({ url: '/pages/peer-info/modify?id=' + this.id })
		},
		onDelete() {
			const id = this.id || (this.form && this.form.id) || ''
			if (!id) return
			uni.showModal({
				title: '系统提示',
				content: '是否确定删除该同行信息？',
				confirmText: '确定',
				cancelText: '取消',
				success: (res) => {
					if (res && res.confirm) {
						salesmanQuotationPeerDeleteApi(id).then(() => {
							uni.showToast({ title: '已删除', icon: 'none' })
							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' })
						})
					}
				}
			})
		},
		async loadDetail() {
			this.loading = true
			try {
				const res = await salesmanQuotationPeerGetApi(this.id)
				this.form = (res && res.data) ? res.data : {}
			} catch (e) {
				this.form = {}
				uni.showToast({ title: '详情加载失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		}
	}
}
</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: 28rpx;
	}

	.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;

		&.pre {
			white-space: pre-wrap;
		}
	}
}
</style>