<template>
	<view class="page">

		<scroll-view class="scroll" scroll-y>
			<uni-list>
				<!-- 生产厂 单选 -->
				<uni-list-item class="select-item" :class="form.workshopId ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('workshopId')" :rightText="displayLabel('workshopIdName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text class="required">*</text><text>生产厂</text></view>
					</template>
				</uni-list-item>
				<!-- 科办 单选 -->
				<uni-list-item class="mgb10 select-item" :class="form.officeId ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('officeId')" :rightText="displayLabel('officeIdName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text class="required">*</text><text>科办</text></view>
					</template>
				</uni-list-item>

				<!-- 客户名称 关联页选择 -->
				<uni-list-item class="select-item" :class="form.customerId ? 'is-filled' : 'is-empty'" clickable @click="openRelate('customerId')" :rightText="form.customerIdName || '请选择客户名称'"
					showArrow>
					<template v-slot:body>
						<view class="item-title"><text class="required">*</text><text>客户名称</text></view>
					</template>
				</uni-list-item>

				<!-- 客户类型、产品品种 单选 -->
				<uni-list-item class="select-item" :class="form.customerType ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('customerType')" :rightText="displayLabel('customerTypeName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text class="required">*</text><text>客户类型</text></view>
					</template>
				</uni-list-item>
				<uni-list-item class="select-item" :class="form.productVarietyId ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('productVarietyId')" :rightText="displayLabel('productVarietyIdName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text class="required">*</text><text>产品品种</text></view>
					</template>
				</uni-list-item>

				<!-- 其余输入项 -->
				<uni-list-item title="月用量">
					<template v-slot:footer>
						<uni-easyinput v-model="form.monthlyUsage" placeholder="请输入月用量" :inputBorder="false" />
					</template>
				</uni-list-item>
				<uni-list-item title="目标量">
					<template v-slot:footer>
						<uni-easyinput v-model="form.targetQuantity" placeholder="请输入目标量" :inputBorder="false" />
					</template>
				</uni-list-item>
				<uni-list-item title="行业" class="mgb10">
					<template v-slot:footer>
						<uni-easyinput v-model="form.industry" placeholder="请输入行业" :inputBorder="false" />
					</template>
				</uni-list-item>
				<uni-list-item title="牌号">
					<template v-slot:footer>
						<uni-easyinput v-model="form.mark" placeholder="请输入牌号" :inputBorder="false" />
					</template>
				</uni-list-item>
				<uni-list-item title="厚度">
					<template v-slot:footer>
						<uni-easyinput v-model="form.thickness" placeholder="请输入厚度" :inputBorder="false" />
					</template>
				</uni-list-item>
				<uni-list-item title="宽度">
					<template v-slot:footer>
						<uni-easyinput v-model="form.width" placeholder="请输入宽度" :inputBorder="false" />
					</template>
				</uni-list-item>
				<uni-list-item title="材质要求">
					<template v-slot:footer>
						<uni-easyinput v-model="form.materialRequire" placeholder="请输入材质要求" :inputBorder="false" />
					</template>
				</uni-list-item>
				<uni-list-item title="品质要求">
					<template v-slot:footer>
						<uni-easyinput v-model="form.qualityRequire" placeholder="请输入品质要求" :inputBorder="false" />
					</template>
				</uni-list-item>
				<uni-list-item title="同行" class="mgb10">
					<template v-slot:footer>
						<uni-easyinput v-model="form.peer" placeholder="请输入同行" :inputBorder="false" />
					</template>
				</uni-list-item>
				<uni-list-item title="核价模式">
					<template v-slot:footer>
						<uni-easyinput v-model="form.pricingMode" placeholder="请输入核价模式" :inputBorder="false" />
					</template>
				</uni-list-item>
				<uni-list-item title="结算天数" class="mgb10">
					<template v-slot:footer>
						<uni-easyinput v-model="form.settleDays" placeholder="请输入结算天数" :inputBorder="false" />
					</template>
				</uni-list-item>
				<!-- 责任人 关联页选择 -->
				<uni-list-item class="select-item" :class="form.chargeUserIdName ? 'is-filled' : 'is-empty'" title="责任人"
					clickable @click="openRelate('chargeUserId')" :rightText="form.chargeUserIdName || '请选择责任人'" showArrow />
				<view class="footer">
					<button class="btn submit" type="primary" @click="onSubmit">提交</button>
				</view>
			</uni-list>

		</scroll-view>

		<!-- 单选弹框：生产厂、科办、客户类型、产品品种 -->
		<SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options"
			v-model="sheet.value" @confirm="onSheetConfirm" />

		<!-- 关联选择弹框：客户名称、责任人 -->
		<RelateSelectSheet :visible.sync="relate.visible" :title="relate.title" :source="relate.source"
			:display-fields="relate.display" :multiple="relate.multiple" :row-key="relate.rowKey"
			:selectedKeys.sync="relate.selectedKeys" :source-extra="{ source: 'CUSTOMER_DEVELOP' }" @confirm="onRelateConfirm" />
	</view>
</template>

<script>
	import SingleSelectSheet from '@/components/single-select/index.vue'
	import RelateSelectSheet from '@/components/relate-select/index.vue'
	import constant from '@/utils/constant'
	import storage from '@/utils/storage'
    import {
        updateApi,
        getDetailApi,
        officeQueryApi,
        productVarietyQueryApi,
        workshopQueryApi
    } from '@/api/devManage.js'
	import {
		getDicByCodeApi
	} from '@/api/base.js'

    export default {
        name: 'DevManageModify',
		components: {
			SingleSelectSheet,
			RelateSelectSheet
		},
        data() {
            return {
                form: {
                    id: '',
                    workshopIdName: '',
                    workshopId: '',
                    officeIdName: '',
                    officeId: '',
                    customerIdName: '',
                    customerId: '',
                    customerType: '',
                    customerTypeName: '',
                    chargeUserId: '',
                    chargeUserIdName: '',
                    productVarietyId: '',
                    productVarietyIdName: '',
                    monthlyUsage: '',
                    targetQuantity: '',
                    industry: '',
                    mark: '',
                    thickness: '',
                    width: '',
                    materialRequire: '',
                    qualityRequire: '',
                    peer: '',
                    pricingMode: '',
                    settleDays: '',
                },
				sheet: {
					visible: false,
					title: '请选择',
					field: '',
					options: [],
					value: ''
				},
				relate: {
					visible: false,
					title: '选择',
					source: '',
					display: [],
					multiple: false,
					rowKey: 'id',
					selectedKeys: []
				},
				officeOptions: [],
				customerTypeOptions: [],
                productVarietyIdOptions: [],
                currentId: ''
            }
        },
        created() {
			// 责任人默认使用当前用户昵称/用户名
			const user = storage.get(constant.name);
			const userId = storage.get(constant.id);
			this.form.chargeUserIdName = user || '';
			this.form.chargeUserId = userId || '';
			// 科办
            this.loadOfficeOptions()
            //  客户类型
            this.loadCustomerTypeOptions()
            //  生产厂
            this.loadproductVarietyIdOptions()
        },
        onLoad(query) {
            const id = (query && (query.id || query.code)) || ''
            if (id) {
                this.currentId = id
                this.loadDetail(id)
            }
        },
        methods: {
            async loadDetail(id) {
                try {
                    const res = await getDetailApi(id)
                    const data = res.data || {}
                    const w = data.workshop || {}
                    const o = data.office || {}
                    const c = data.customer || {}
                    const p = data.productVariety || {}
                    this.form.id = data.id || ''
                    this.form.workshopId = w.id  || ''
                    this.form.workshopIdName = w.name || ''
                    this.form.officeId = o.id || ''
                    this.form.officeIdName = o.name || ''
                    this.form.customerId = c.id || ''
                    this.form.customerIdName = c.name || ''
                    this.form.productVarietyId = p.id || ''
                    this.form.productVarietyIdName = p.name || ''
                    this.form.customerType = data.customerType || ''
                    this.form.monthlyUsage = data.monthlyUsage || ''
                    this.form.targetQuantity = data.targetQuantity || ''
                    this.form.industry = data.industry || ''
                    this.form.mark = data.mark || ''
                    this.form.thickness = data.thickness || ''
                    this.form.width = data.width || ''
                    this.form.materialRequire = data.materialRequire || ''
                    this.form.qualityRequire = data.qualityRequire || ''
                    this.form.peer = data.peer || ''
                    this.form.pricingMode = data.pricingMode || ''
                    this.form.settleDays = data.settleDays || ''
                    this.form.chargeUserId = data.chargeUserId || ''
                    this.form.chargeUserIdName = data.chargeUserName || ''
                    this.updateCustomerTypeName()
                } catch (e) {
                }
            },
            // 校验必填项：生产厂、科办、客户名称、客户类型、产品品种
            validateRequired() {
                const checks = [{
                        key: 'workshopId',
                        label: '生产厂'
					},
					{
						key: 'officeId',
						label: '科办'
					},
					{
						key: 'customerId',
						label: '客户名称'
					},
					{
						key: 'customerType',
						label: '客户类型'
					},
					{
						key: 'productVarietyId',
						label: '产品品种'
					}
				]
				for (const it of checks) {
					const val = this.form[it.key]
					if (val === undefined || val === null || String(val).trim() === '') {
						uni.showToast({
							title: `请先选择${it.label}`,
							icon: 'none'
						})
						return false
					}
				}
				return true
			},
			async loadOfficeOptions() {
				try {
					const res = await officeQueryApi({
						pageIndex: 1,
						pageSize: 9999
					})
					const _data = res.data || {}
					const list = _data.datas || []
					this.officeOptions = (list || []).map(it => ({
						label: it.name || it.text || it.officeName || it.label,
						value: it.id || it.code || it.value
					}))
				} catch (e) {
					this.officeOptions = []
				}
			},
			displayLabel(field) {
				const m = this.form
				const map = {
					workshopIdName: '请选择生产厂',
					officeIdName: '请选择科办',
					customerTypeName: '请选择客户类型',
					productVarietyIdName: '请选择产品品种'
				}
				const val = m[field]
				return val ? String(val) : map[field]
			},
			async openSheet(field) {
				const setSheet = (title, options) => {
					const current = this.form[field]
					const match = (options || []).find(o => String(o.label) === String(current) || String(o.value) === String(current))
					this.sheet = {
						...this.sheet,
						visible: true,
						title,
						options,
						field,
						value: match ? match.value : ''
					}
				}
				if (field === 'workshopId') {
					const res = await workshopQueryApi({ pageIndex: 1, pageSize: 9999 })
					const _data = res.data || {}
					const list = _data.datas || (Array.isArray(_data) ? _data : [])
					const opts = (list || []).map(it => ({
						label: it.name ,
						value: it.id
					}))
					setSheet('生产厂', opts)
				} else if (field === 'officeId') {
					setSheet('科办', this.officeOptions)
				} else if (field === 'customerType') {
					const opts = this.customerTypeOptions || [];
					setSheet('客户类型', opts)
				} else if (field === 'productVarietyId') {
					const opts = this.productVarietyIdOptions;
					setSheet('产品品种', opts)
				}
			},
			onSheetConfirm({
				value,
				label
			}) {
				const field = this.sheet.field
				if (!field) return
				this.form[field] = value || '';
				this.form[field + 'Name'] = label || ''
				this.sheet.visible = false
			},
			openRelate(fieldKey) {
				let config = {};
				switch(fieldKey) {
					case 'customerId':
						config = {
							title: '客户名称',
							source: 'customer',
							rowKey: 'id',
							multiple: false,
							display: [{
									label: '名称',
									field: 'name'
								},
								{
									label: '编号',
									field: 'code'
								},
								{
									label: '状态',
									field: 'available',
									format: v => (v ? '启用' : '停用')
								}
							]
						}
						break
					case 'chargeUserId':
						config = {
							title: '责任人',
							source: 'user',
							rowKey: 'id',
							multiple: false,
							display: [{
									label: '姓名',
									field: 'name'
								},
								{
									label: '编号',
									field: 'code'
								},
								{
									label: '状态',
									field: 'available',
									format: v => (v ? '启用' : '停用')
								}
							]};
						break
				}
				const selectedKeys = this.form[fieldKey] ? [this.form[fieldKey]] : [];
				// 逐一赋值，避免整体替换对象导致子组件 prop 更新不及时
				this.sheet.visible = false
				this.relate.title = config.title
				this.relate.source = config.source
				this.relate.display = config.display
				this.relate.multiple = config.multiple
				this.relate.rowKey = config.rowKey
				this.relate.selectedKeys = selectedKeys
				this.relate.fieldKey = fieldKey;
				// 最后再打开弹框，确保选中键已传入
				this.$nextTick(() => {
					this.relate.visible = true
				})
			},
			onRelateConfirm({
				items
			}) {
				console.log('onRelateConfirm__item', items)
				const _fieldKey = this.relate.fieldKey;
				console.log('onRelateConfirm__fieldKey', _fieldKey)
				const first = (items && items.length > 0) ? items[0] : null
				// 若无选中项，确认时清空之前的值
				this.form[_fieldKey] = first.id || '';
				this.form[_fieldKey + 'Name'] = first.name || '';
			},
            async loadCustomerTypeOptions() {
                try {
                    const res = await getDicByCodeApi('ENTERPRISE_TYPE');
                    const list = res.data || [];
                    this.customerTypeOptions = (list || []).map(it => ({
                        label: it.name || '',
                        value: it.code || ''
                    }))
                    this.updateCustomerTypeName()
                } catch (e) {
                    this.customerTypeOptions = []
                }
            },
            updateCustomerTypeName() {
                const code = this.form.customerType
                const match = (this.customerTypeOptions || []).find(it => String(it.value) === String(code))
                this.form.customerTypeName = match ? match.label : ''
            },

            async loadproductVarietyIdOptions() {
                try {
                    const res = await productVarietyQueryApi({ pageIndex: 1, pageSize: 9999 })
                    const _data = res.data || {}
					const list = _data.datas || (Array.isArray(_data) ? _data : [])
					this.productVarietyIdOptions = (list || []).map(it => ({
						label: it.name || it.text || it.label,
						value: it.id || it.code || it.value
					}))
				} catch (e) {
					this.productVarietyIdOptions = []
				}
			},
            async onSubmit() {
                // 必填校验
                if (!this.validateRequired()) return
                const payload = {
                    ...this.form
                }
                delete payload.workshopIdName
                delete payload.officeIdName
                delete payload.customerTypeName
                delete payload.customerIdName
                delete payload.productVarietyIdName
                delete payload.chargeUserIdName
                payload.id = payload.id || this.currentId || ''
                updateApi(payload).then(res => {
                    uni.showToast({
                        title: '保存成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        uni.redirectTo({ url: '/pages/dev_manage/index' })
                    }, 300)
                }).catch(e => {
                    uni.showToast({
                        title: e.msg || '提交失败',
                        icon: 'none'
                    })
                })
            }
        }
    }
</script>

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

	.scroll {
		flex: 1;
		padding: 12rpx 0 160rpx;
	}

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

	::v-deep .uni-list {
		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;

						&-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>