	<!--购销计划弹框内容 --> 
<template>
	<div>
		<a-modal v-model:visible="visible" width="78%" :closable="false" :maskClosable="false" :title="titleText"
			:footer="null">
			<a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
				<a-row>
					<a-col :span="8">
						<a-form-item label="计划单号">
							<a-input class="title-box" autocomplete="off" :disabled="true" placeholder="自动生成"
								v-model:value="formState.planOrderNo" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="计划文号" name="planNo">
							<a-input class="title-box" autocomplete="off" :disabled="showLock" v-model:value="formState.planNo" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="计划名称" name="planName">
							<a-input class="title-box" autocomplete="off" :disabled="showLock" v-model:value="formState.planName" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="8">
						<a-form-item label="计划年度" name="planYear">
							<a-date-picker :disabled="showLock" picker="year" v-model:value="formState['planYear']"
								value-format="YYYY" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="制定计划单位" name="planUnit">
							<a-input class="title-box" autocomplete="off" :disabled="showLock" v-model:value="formState.planUnit" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="计划下达时间">
							<a-date-picker :disabled="showLock" v-model:value="formState['planReleaseTime']"
								value-format="YYYY-MM-DD 00:00:00" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="8">
						<a-form-item label="接收库区" name="orgId">
							<a-select class="select-box" :disabled="showLock" v-model:value="formState.orgId" :size="size"
								@change="onChangeData" style="width: 100%" placeholder="请选择">
								<a-select-option v-for="item in receiveList" :key="item.orgId" :value="item.orgId">{{ item.orgName
								}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="计划类型" name="planType">
							<a-select class="select-box" :disabled="showLock" v-model:value="formState.planType" :size="size"
								@change="getPlanType" style="width: 100%" placeholder="请选择">
								<a-select-option v-for="item in planTypeData" :key="item.planType" :value="item.planType">{{ item.label
								}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<!-- 销售计划表格 -->
				<a-row class="row-box" v-if="formState.planType === 1">
					<a-col :span="24">
						<plus-circle-outlined v-if="salesData.isType !== '3'" :style="{ fontSize: '22px', marginBottom: '14px' }"
							@click="addSalesPlan" />
						<!-- <a-form ref="formRefData" :model="salesDataList" :rules="rulesData" :label-col="labelCol"
							:wrapper-col="wrapperCol"> 暂时注销 -->
						<a-table :scroll="{ y: 400 }" :dataSource="salesDataList" :row-key="(record) => record.id"
							:columns="salesTypeData">
							<template #bodyCell="{ column, index, record }">
								<template v-if="column.key === 'basicStorehouseId'">
									<!-- 暂时注销 <a-form-item :name="[index, 'storehouseId']" :rules="rulesData.storehouseId"> -->
									<a-select class="select-box" :disabled="showLock" v-model:value="record.basicStorehouseId" :size="size"
										@change="storehouseData(record)" style="width: 100%" placeholder="请选择">
										<a-select-option v-for="item in warehouseList" :key="item.basicStorehouseId"
											:value="item.basicStorehouseId">{{
												item.storehouseName }}</a-select-option>
									</a-select>
									<!-- </a-form-item> -->
								</template>
								<template v-if="column.key === 'warehouseId'">
									<!-- 暂时注销 <a-form-item :name="[index, 'warehouseId']" :rules="rulesData.warehouseId"> -->
									<a-select class="select-box" :disabled="showLock" v-model:value="record.warehouseId" :size="size"
										@change="warehouseData(record)" style="width: 100%" placeholder="请选择">
										<a-select-option v-for="item in goodsPositionList" :key="item.warehouseId"
											:value="item.warehouseId">{{ item.warehouseName }}</a-select-option>
									</a-select>
									<!-- </a-form-item> -->
								</template>
								<template v-if="column.key === 'grainVarietyId'">
									<!-- 暂时注销 <a-form-item :name="[index, 'grainVarietyId']" :rules="rulesData.grainVarietyId"> -->
									<a-input class="title-box" autocomplete="off" :disabled="true"
										v-model:value="record.grainVarietyName" />

									<!-- </a-form-item> -->
								</template>
								<template v-if="column.key === 'grainNatureId'">
									<!-- 暂时注销 <a-form-item :name="[index, 'grainNatureId']" :rules="rulesData.grainNatureId"> -->
									<a-input class="title-box" autocomplete="off" :disabled="true" v-model:value="record.grainNatureName" />
									<!-- </a-form-item> -->
								</template>
								<template v-if="column.key === 'grainGradeId'">
									<!-- 暂时注销 <a-form-item :name="[index, 'grainGradeId']" :rules="rulesData.grainGradeId"> -->
									<a-input class="title-box" autocomplete="off" :disabled="true" v-model:value="record.grainGradeName" />
									<!-- </a-form-item> -->
								</template>
								<template v-if="column.key === 'planQuantity'">
									<!-- 暂时注销 <a-form-item :name="[index, 'planQuantity']" :rules="rulesData.planQuantity"> -->
									<a-input class="title-box" autocomplete="off" :disabled="showLock"
										v-model:value="record.planQuantity" />
									<!-- </a-form-item> -->
								</template>
								<template v-if="column.key === 'action'">
									<span>
										<a-button :disabled="showLock" class="delete" @click="salesDelete(record)">删除</a-button>
									</span>
								</template>
							</template>
						</a-table>
						<!-- </a-form> -->
					</a-col>
				</a-row>
				<!-- 收购计划表格 -->
				<a-row class="row-box" v-if="formState.planType === 2">
					<a-col :span="24">
						<plus-circle-outlined v-if="salesData.isType !== '3'" :style="{ fontSize: '22px', marginBottom: '14px' }"
							@click="addPlanBuy" />
						<a-table :scroll="{ y: 400 }" :dataSource="buyTypeDataList" :row-key="(record) => record.id"
							:columns="buyTypeData">
							<template #bodyCell="{ column, record }">
								<template v-if="column.key === 'grainVarietyId'">
									<a-select class="select-box" :disabled="showLock" v-model:value="record.grainVarietyId" :size="size"
										style="width: 100%" placeholder="请选择">
										<a-select-option v-for="item in varietyList" :key="item.grainVarietyId"
											:value="item.grainVarietyId">{{ item.grainVarietyName }}</a-select-option>
									</a-select>
								</template>
								<template v-if="column.key === 'grainNatureId'">
									<a-select class="select-box" :disabled="showLock" v-model:value="record.grainNatureId" :size="size"
										style="width: 100%" placeholder="请选择">
										<a-select-option v-for="item in natureList" :key="item.grainNatureId" :value="item.grainNatureId">{{
											item.grainNatureName }}</a-select-option>
									</a-select>
								</template>
								<template v-if="column.key === 'grainGradeId'">
									<a-select class="select-box" :disabled="showLock" v-model:value="record.grainGradeId" :size="size"
										style="width: 100%" placeholder="请选择">
										<a-select-option v-for="item in gradeList" :key="item.grainGradeId" :value="item.grainGradeId">{{
											item.grainGradeName }}</a-select-option>
									</a-select>
								</template>
								<template v-if="column.key === 'planQuantity'">
									<a-input class="title-box" autocomplete="off" :disabled="showLock"
										v-model:value="record.planQuantity" />
								</template>
								<template v-if="column.key === 'action'">
									<span>
										<a-button :disabled="showLock" class="delete" @click="buyDelete(record)">删除</a-button>
									</span>
								</template>
							</template>
						</a-table>
					</a-col>
				</a-row>
			</a-form>
			<div class="btn-box">
				<a-button v-if="salesData.isType !== '3'" style="margin-right: 16px" type="primary"
					@click="handleOk('1')">保存</a-button>
				<a-button v-if="salesData.isType !== '3'" style="margin-right: 16px" class="check"
					@click="handleOk('2')">下发</a-button>
				<a-button @click="handleCancel">关闭</a-button>
			</div>
		</a-modal>
	</div>
</template>
<script setup>
import reserveQuantityApi from '@/api/reserve.info/reserveQuantityApi.js'
// import { validateThreeDecimalPlaces } from '@/utils/validator'
import { message } from 'ant-design-vue'
const props = defineProps({
	salesData: {
		type: Object,
		default: () => { }
	}
})
const formState = ref({})
// 销售表格头
const salesTypeData = [
	{
		title: '序号',
		dataIndex: 'Index',
		align: 'center',
		customRender: ({ text, record, index }) => {
			return `${index + 1}`
		}
	},
	{
		title: '仓房名称',
		dataIndex: 'basicStorehouseId',
		align: 'center',
		key: 'basicStorehouseId'
	},
	{
		title: '货位',
		dataIndex: 'warehouseId',
		align: 'center',
		key: 'warehouseId'
	},
	{
		title: '品种',
		dataIndex: 'grainVarietyId',
		align: 'center',
		key: 'grainVarietyId'
	},
	{
		title: '性质',
		dataIndex: 'grainNatureId',
		align: 'center',
		key: 'grainNatureId'
	},
	{
		title: '粮食等级',
		dataIndex: 'grainGradeId',
		align: 'center',
		key: 'grainGradeId'
	},
	{
		title: '数量(吨)可保留三位小数',
		dataIndex: 'planQuantity',
		align: 'center',
		key: 'planQuantity'
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		key: 'action',
		width: '100px'
	}
]
// 收购表格头
const buyTypeData = [
	{
		title: '序号',
		dataIndex: 'Index',
		align: 'center',
		customRender: ({ text, record, index }) => {
			return `${index + 1}`
		}
	},
	{
		title: '品种',
		dataIndex: 'grainVarietyId',
		align: 'center',
		key: 'grainVarietyId'
	},
	{
		title: '性质',
		dataIndex: 'grainNatureId',
		align: 'center',
		key: 'grainNatureId'
	},
	{
		title: '等级',
		dataIndex: 'grainGradeId',
		align: 'center',
		key: 'grainGradeId'
	},
	{
		title: '数量(吨)可保留三位小数',
		dataIndex: 'planQuantity',
		align: 'center',
		key: 'planQuantity'
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		key: 'action',
		width: '100px'
	}
]
const rules = ref({
	planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
	orgId: [{ required: true, message: '请选择接收库区', trigger: 'change' }],
	planType: [{ required: true, message: '请选择计划类型', trigger: 'change' }],
})
// 暂时注销
// const rulesData = ref({
// 	storehouseId: [{ required: true, message: '请输入', trigger: 'change' }],
// 	warehouseId: [{ required: true, message: '请输入', trigger: 'change' }],
// 	grainVarietyId: [{ required: true, message: '请输入', trigger: 'blur' }],
// 	grainNatureId: [{ required: true, message: '请输入', trigger: 'blur' }],
// 	grainGradeId: [{ required: true, message: '请输入', trigger: 'blur' }],
// 	planQuantity: [
// 		{ required: true, message: '请输入', trigger: 'blur' },
// 		{ validator: validateThreeDecimalPlaces, trigger: 'blur' }
// 	],
// })
const isTypeData = ref('')
const showLock = ref(false)
const visible = ref(false)
const titleText = ref('')
const formRef = ref(null)
// const formRefData = ref(null) //暂时注销
const emit = defineEmits(['isVisible'])
const receiveList = ref([])
const planTypeData = ref([
	{ planType: 1, label: '销售计划' }, { planType: 2, label: '收购计划' }
]) //计划类型
const salesDataList = ref([]) // 销售计划数据
const buyTypeDataList = ref([]) // 收购计划数据
const warehouseList = ref([]) //仓房数据
const goodsPositionList = ref([]) //货位数据
const gradeList = ref([]) //等级
const natureList = ref([]) //性质
const varietyList = ref([]) //品种
// 计划类型chnage事件
const getPlanType = (val) => {
	if (val === 2) {
		getVariety(), getNature(), getGrade()
	}
	buyTypeDataList.value = []
	salesDataList.value = []
	if (props.salesData.id && formState.value.planType === 2) {
		buyTypeDataList.value = incomeData.value
	}
	if (props.salesData.id && formState.value.planType === 1) {
		salesDataList.value = salesTypeDataList.value
	}
}
// 接收库区数据接口
const getOrgInfoDataList = () => {
	reserveQuantityApi.purchaseSalesOrgId().then(res => {
		receiveList.value = res
	})
}
// 接收库区change事件
const onChangeData = (val) => {
	getStoreHouseList(val)
	if (formState.value.planType && formState.value.planType === 1) {
		salesDataList.value = []
		salesDataList.value.push({
			basicStorehouseId: null, warehouseId: null, grainVarietyName: null, grainNatureName: null, grainGradeName: null,
			planQuantity: null
		})
	}
	if (formState.value.planType && formState.value.planType === 2) {
		buyTypeDataList.value = []
		buyTypeDataList.value.push({
			grainVarietyId: null, grainNatureId: null, grainGradeId: null, planQuantity: null
		})
	}
}
// 获取仓房数据
const getStoreHouseList = (val) => {
	reserveQuantityApi.storeHouseList({ orgId: val }).then(res => {
		warehouseList.value = []
		res.forEach(i => {
			warehouseList.value.push({
				storehouseName: i.storehouseName,
				basicStorehouseId: i.storehouseId
			})
		})
	})
}
// 仓房change数据
const storehouseData = (val) => {
	val.grainGradeName = null,
		val.grainNatureName = null,
		val.grainVarietyName = null,
		val.planQuantity = null,
		val.basicStorehouseId = val.basicStorehouseId,
		val.warehouseId = null
	getWarehouseDataList(val.basicStorehouseId)
}
// 获取货位数据
const getWarehouseDataList = (val) => {
	reserveQuantityApi.warehouseDataList({ storehouseId: val }).then(res => {
		goodsPositionList.value = []
		goodsPositionList.value = res
	})
}

const arrObj = ref({})
// 货位change事件
const warehouseData = (val) => {
	val.grainGradeName = null,
		val.grainNatureName = null,
		val.grainVarietyName = null,
		val.planQuantity = null,
		val.basicStorehouseId = val.basicStorehouseId,
		val.warehouseId = val.warehouseId
	getSalesList(val)
	setTimeout(() => {
		val.grainVarietyName = arrObj.value.pzName
		val.grainNatureName = arrObj.value.hwxzName
		val.grainGradeName = arrObj.value.djName
		val.planQuantity = arrObj.value.kcsl
		val.grainVarietyId = arrObj.value.pz
		val.grainNatureId = arrObj.value.hwxz
		val.grainGradeId = arrObj.value.dj
	}, 500)
}

// 销售的品种性质等级数量数据
const getSalesList = (val) => {
	let objData = {
		basicStorehouseId: val.basicStorehouseId,//仓房id
		orgId: formState.value.orgId, //接收库区id
		warehouseId: val.warehouseId //货位id
	}
	reserveQuantityApi.getListDetailData(objData).then(res => {
		arrObj.value = res
	})

}
// 品种
const getVariety = () => {
	reserveQuantityApi.purchaseSalesListDetail({ parentId: 1060 }).then(res => {
		varietyList.value = []
		res.forEach(item => {
			varietyList.value.push({
				grainVarietyId: item.enumId,
				grainVarietyName: item.enumname
			})
		})
	})
}
// 性质
const getNature = () => {
	reserveQuantityApi.purchaseSalesListDetail({ parentId: 1032 }).then(res => {
		natureList.value = []
		res.forEach(item => {
			natureList.value.push({
				grainNatureId: item.enumId,
				grainNatureName: item.enumname
			})
		})
	})
}
// 等级
const getGrade = () => {
	reserveQuantityApi.purchaseSalesListDetail({ parentId: 1002 }).then(res => {
		gradeList.value = []
		res.forEach(item => {
			gradeList.value.push({
				grainGradeId: item.enumId,
				grainGradeName: item.enumname
			})
		})
	})
}
// 添加收购计划事件
const addPlanBuy = () => {
	buyTypeDataList.value.push({
		grainVarietyId: null, grainNatureId: null, grainGradeId: null, planQuantity: null
	})
}
// 收购计划删除事件
const buyDelete = (row) => {
	buyTypeDataList.value.splice(row, 1)
}
// 添加销售计划
const addSalesPlan = () => {
	salesDataList.value.push({
		basicStorehouseId: null, warehouseId: null, grainVarietyName: null, grainNatureName: null, grainGradeName: null,
		planQuantity: null
	})
}
// 销售计划删除事件
const salesDelete = (row) => {
	salesDataList.value.splice(row, 1)
}

// 取消按钮
const handleCancel = () => {
	colosData()
}
// 确定按钮
const handleOk = (val) => {
	// val值是'1'的情况就是保存事件,是'2'的情况就是下发事件
	// 暂时注销
	// formRefData.value.validate().then(() => {
	// 	return
	// }).catch((error) => { })
	formRef.value
		.validate()
		.then(() => {
			// isTypeData === '1' 新增  2是编辑 3是查看
			if (isTypeData.value === '1') return addData(val)
			if (isTypeData.value === '2') return editData(val)
		})
		.catch((error) => {
			message.warning('请填写完善')
		})
}
// 新增
const addData = (val) => {
	let obj = {
		...formState.value,
		planOrderNo: formState.value.planOrderNo || '',
		status: val === '1' ? 0 : 1,
	}
	if (formState.value.planType == 2) {
		obj.planBuy = buyTypeDataList.value
	}
	if (formState.value.planType == 1) {
		obj.planSale = salesDataList.value
	}
	reserveQuantityApi.purchaseSalesAdd(obj).then((res) => {
		colosData()
	})
}
// 编辑
const editData = (val) => {
	let obj = {
		...formState.value,
		id: props.salesData.id,
		planOrderNo: '',
		status: val === '1' ? 0 : 1,
	}
	if (formState.value.planType == 2) {
		obj.planBuy = buyTypeDataList.value
	}
	if (formState.value.planType == 1) {
		obj.planSale = salesDataList.value
	}
	reserveQuantityApi.purchaseSalesEdit(obj).then((res) => {
		colosData()
	})
}
const incomeData = ref([]) //暂存收购计划
const salesTypeDataList = ref([])  //暂存销售计划
// 用于查看调用
const detailData = (id) => {
	reserveQuantityApi.purchaseSalesDetail({ id: id, planType: props.salesData.planType }).then((res) => {
		formState.value = {
			planOrderNo: res.planOrderNo,
			planNo: res.planNo,
			planName: res.planName,
			planYear: res.planYear,
			planUnit: res.planUnit,
			planReleaseTime: res.planReleaseTime,
			orgId: res.orgId,
			planType: res.planType
		}
		if (res.planType == 2) {
			getVariety(), getNature(), getGrade()
			incomeData.value = []
			incomeData.value = res.planBuy
			buyTypeDataList.value = res.planBuy
		} else {
			getOrgInfoDataList(), getStoreHouseList(res.orgId)
			res.planSale.map(item => {
				getWarehouseDataList(item.basicStorehouseId)
			})
			salesTypeDataList.value = []
			salesTypeDataList.value = res.planSale
			salesDataList.value = res.planSale
		}
	})
}
// 取消按钮
const colosData = () => {
	visible.value = false
	emit('isVisible', false)
	formRef.value.resetFields() //resetFields()函数是组件库提供的
	formState.value = {}
}
// 监听点击事件更新数据
watch(
	() => props.salesData,
	async (newValue, oldvalue) => {
		await nextTick()
		titleText.value = newValue.titleText
		visible.value = newValue.visible
		showLock.value = newValue.showLock
		isTypeData.value = newValue.isType
		getOrgInfoDataList()//, getLsxzInfoList()
		// isType字段用于查看接口
		if (newValue.isType == '2' || newValue.isType == '3') {
			detailData(newValue.id)
		} else {
			// 用于新增时清空表格数据
			formState.value = {}
		}
	},
	{ deep: true }
)
</script>
<style lang="less" scoped>
.ant-input {
	width: 80%;
}

/* 针对 a-form-item 的 label 应用样式 */
::v-deep .ant-form-item-label {
	width: 160px;
	text-align: right;
}

::v-deep .ant-form-item-control-input {
	width: 100%;
}

::v-deep .ant-pagination {
	display: none;
}

/deep/.ant-input-number-input {
	text-align: left !important;
}

.title-box {
	width: 100%;
}

.ant-picker {
	width: 100%;
}

.from-input {
	width: 101.4%;
}

::v-deep.ant-modal-footer {
	display: none !important;
}

.btn-box {
	text-align: center;
}

.check {
	background-color: rgba(112, 125, 233);
	color: #fff;
}

.btn-type {
	background-color: #22ce8d;
	color: #fff;
}

.row-box {
	margin-bottom: 20px;
}
</style>
	
