<template>
	<view class="page">
		<scroll-view class="scroll" scroll-y>
			<view class="detail-page">
				<view class="section">
					<text class="row customer">{{ form.customer.name }}</text>
					<view :class="['status', `status_${form.status}`]" />
					<view class="row"><text class="label">生产厂</text><text class="value">{{ form.workshop ?
						form.workshop.name : '' }}</text>
					</view>
					<view class="row"><text class="label">科办</text><text class="value">{{ form.office ? form.office.name
						: '' }}</text>
					</view>
					<view class="row"><text class="label">客户类型</text><text class="value">{{
						getDicName('ENTERPRISE_TYPE', form.customerType, customerTypeOptions) }}</text>
					</view>
					<view class="row"><text class="label">产品品种</text><text class="value">{{ form.productVariety.name
					}}</text></view>
					<view class="row"><text class="label">月用量</text><text class="value">{{ form.monthlyUsage }}</text>
					</view>
					<view class="row"><text class="label">目标量</text><text class="value">{{ form.targetQuantity }}</text>
					</view>
					<view class="row"><text class="label">订单吨位(kg)</text><text class="value">{{ form.orderQuantity }}</text>
					</view>
					<view class="row"><text class="label">发货吨位(kg)</text><text class="value">{{ form.shipmentQuantity }}</text>
					</view>
					<view class="row"><text class="label">行业</text><text class="value">{{ form.industry }}</text></view>
					<view class="row"><text class="label">创建日期</text><text class="value">{{ form.createTime }}</text>
					</view>
				</view>
				<view class="section">
					<view class="row"><text class="label">牌号</text><text class="value">{{ form.mark }}</text></view>
					<view class="row"><text class="label">厚度</text><text class="value">{{ form.thickness }}</text>
					</view>
					<view class="row"><text class="label">宽度</text><text class="value">{{ form.width }}</text></view>
					<view class="row"><text class="label">材质要求</text><text class="value">{{ form.materialRequire
					}}</text></view>
					<view class="row"><text class="label">品质要求</text><text class="value">{{ form.qualityRequire
					}}</text></view>
					<view class="row"><text class="label">同行</text><text class="value">{{ form.peer }}</text></view>
				</view>
				<view class="section">
					<view class="row"><text class="label">核价模式</text><text class="value">{{ form.pricingMode }}</text>
					</view>
					<view class="row"><text class="label">结算天数</text><text class="value">{{ form.settleDays }}</text>
					</view>
				</view>
				<view class="section">
					<view class="row"><text class="label">责任人</text><text class="value">{{ form.chargeUserName }}</text>
					</view>
				</view>
				<VisitList mode="view" :list="form.visitRecords || []" />
			</view>
		</scroll-view>
		<detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
	</view>
</template>

<script>
import {
	getDetailApi,
	cancelApi
} from '@/api/devManage.js'
import {
	getDicName
} from '@/utils/dic.js'
import {
	getDicByCodeApi
} from '@/api/base.js'
import DetailButtons from '@/components/detail-buttons/index.vue'
import VisitList from './visitList.vue'


export default {
	name: 'DevManageDetail',
	components: {
		DetailButtons,
		VisitList
	},
	data() {
		return {
			form: {
				workshop: {},
				office: {},
				customer: {},
				customerType: '',
				chargeUserId: '',
				chargeUserIdName: '',
				productVariety: {},
				monthlyUsage: '',
				targetQuantity: '',
				orderQuantity: '',
				shipmentQuantity: '',
				industry: '',
				mark: '',
				thickness: '',
				width: '',
				materialRequire: '',
				qualityRequire: '',
				peer: '',
				pricingMode: '',
				settleDays: '',
				createTime: '',
				status: ''
			},
			customerTypeOptions: [],
			todoType: '',
			buttons: [{
				text: '编辑',
				visible: true,
				variant: 'outline',
				event: 'edit',
			},
			{
				text: '审核详情',
				visible: true,
				variant: 'outline',
				event: 'auditDetail'
			},
			{
				text: '审核',
				visible: true,
				variant: 'primary',
				event: 'audit'
			},
			{
				text: '拜访记录',
				visible: true,
				variant: 'primary',
				event: 'visitAdd',
			},
			{
				text: '取消',
				visible: true,
				variant: 'outline',
				event: 'cancel',
				style: {
					color: 'rgba(0,0,0,0.9)',
					border: '1px solid #DCDCDC'
				}
			}
			],
		}
	},
	computed: {
		displayButtons() {
			const s = Number(this.form && this.form.status || 0)
			const t = this.todoType || '';
			console.log('s', s, 't', t)
			return [
				{ ...this.buttons[0], visible: (s === 3 && t === '' && this.$auth.hasPermi('customer-dev-manage:customer-dev-plan:modify')) },
				{ ...this.buttons[1], visible: this.$auth.hasPermi('customer-dev-manage:customer-dev-plan:reviewDetail') },
				{ ...this.buttons[2], visible: (s === 1 && t === 'WAIT' && this.$auth.hasPermi('customer-dev-manage:customer-dev-plan:review')) },
				{ ...this.buttons[3], visible: (s === 2 && t === '' && this.$auth.hasPermi('customer-dev-manage:customer-dev-plan:record')) },
				{ ...this.buttons[4], visible: (s === 3 && t === '' && this.$auth.hasPermi('customer-dev-manage:customer-dev-plan:close')) }
			]
		}
	},
	created() {
		this.loadCustomerTypeOptions()
	},
	onShow() {
		uni.$on('dev_manage_detail_reload', this.onReload)
	},
	onUnload() {
		uni.$off('dev_manage_detail_reload', this.onReload)
	},
	onLoad(query) {
		const id = (query && (query.id || query.code)) || ''
		const t = (query && (query.todoType)) || ''
		this.todoType = t
		if (id) this.loadDetail(id)
	},
	methods: {
		onReload(payload) {
			const id = (payload && (payload.id || payload.code)) || this.form.id || this.form.code || ''
			if (id) this.loadDetail(id)
		},
		async loadDetail(id) {
			try {
				const res = await getDetailApi(id)
				console.log('getDetailApi res', res)
				const data = res.data || {};
				this.form = {
					...data
				}
			} catch (e) {
				console.error('loadDetail error', e)
			}
		},
		async loadCustomerTypeOptions() {
			try {
				const res = await getDicByCodeApi('ENTERPRISE_TYPE')
				const list = res.data || []
				this.customerTypeOptions = Array.isArray(list) ? list : []
			} catch (e) {
				this.customerTypeOptions = []
			}
		},
		getDicName: getDicName,
		handleButtonClick(btn) {
			if (!btn || btn.disabled) return
			if (typeof btn.onClick === 'function') return btn.onClick(this.form, btn.params)
			const e = btn.event || ''
			if (e === 'edit') return this.onEdit(btn && btn.params)
			if (e === 'auditDetail') return this.onAuditDetail(btn && btn.params)
			if (e === 'audit') return this.onAudit(btn && btn.params)
			if (e === 'cancel') return this.onCancel(btn && btn.params)
			if (e === 'visitAdd') return this.onVisitAdd(btn && btn.params)
		},
		onEdit() {
			const id = this.form.id || this.form.code || ''
			const query = id ? ('?id=' + encodeURIComponent(id)) : ''
			uni.navigateTo({
				url: '/pages/dev_manage/modify' + query
			})
		},
		onAuditDetail() {
			const CACHE_KEY = 'sourceBusinessId';
			uni.setStorageSync(CACHE_KEY, this.form.id)
			uni.navigateTo({ url: '/pages/flow/audit_detail' })
		},
		onAudit() {
			const CACHE_KEY = 'sourceBusinessId';
			uni.setStorageSync(CACHE_KEY, this.form.id);
			uni.navigateTo({ url: '/pages/flow/audit' })
		},
		onCancel() {
			const id = this.form && (this.form.id || this.form.code) || ''
			if (!id) return
			uni.showModal({
				title: '系统提示',
				content: '是否确定取消该流程？',
				confirmText: '确定',
				cancelText: '取消',
				success: (res) => {
					if (res && res.confirm) {
						cancelApi(id).then(() => {
							uni.showToast({ title: '已取消', icon: 'none' })
							setTimeout(() => {
								uni.redirectTo({ url: '/pages/dev_manage/index' })
							}, 300)
						}).catch(() => {
							uni.showToast({ title: '取消失败', icon: 'none' })
						})
					}
				}
			})
		},
		onVisitAdd() {
			console.log('onVisitAdd', this.form)
			const id = this.form && (this.form.id || this.form.code) || ''
			if (!id) return
			const query = id ? ('?id=' + encodeURIComponent(id)) : ''
			uni.navigateTo({ url: '/pages/dev_manage/visit_add' + query })
		}
	}
}
</script>

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

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

.detail-page {
	background: #f3f3f3;
}

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

	.status {
		position: absolute;
		top: 16rpx;
		right: 52rpx;
		width: 180rpx;
		height: 146rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;

		&_1 {
			background-image: url('~@/static/images/dev_manage/status_1.png');
		}

		&_2 {
			background-image: url('~@/static/images/dev_manage/status_2.png');
		}

		&_3 {
			background-image: url('~@/static/images/dev_manage/status_3.png');
		}

		&_4 {
			background-image: url('~@/static/images/dev_manage/status_4.png');
		}

	}

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

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

		&.customer {
			font-size: 36rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.9);
		}

		.label {
			max-width: 300rpx;
			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;
		}
	}
}
</style>