<template>
	<div ref="ccqyModule">
		<a-modal
			width="98%"
			ok-text="提交"
			:title="pageTitle"
			@ok="onSubmit"
			@cancel="closeModel"
			:footer="props.modalData.type == 'look' ? true : undefined"
			:getContainer="() => $refs.ccqyModule"
			v-model:visible="props.modalData.visible"
		>
			<a-form ref="formRef" :model="formData" :rules="rulesRef">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="企业名称" :labelCol="labelCol" name="enterpriseName">
							<a-input
								:disabled="props.modalData.type == 'look'"
								v-model:value="formData.enterpriseName"
								placeholder="请填写企业名称"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item :labelCol="labelCol" label="统一社会信用代码" name="creditCode">
							<a-input
								v-model:value="formData.creditCode"
								placeholder="请填写统一社会信用代码"
								:disabled="props.modalData.type == 'look'"
							/> </a-form-item
					></a-col>
					<a-col :span="8">
						<a-form-item label="成立时间" class="inputClsss" :labelCol="labelCol">
							<a-date-picker
								placeholder="请选择成立时间"
								value-format="YYYY-MM-DD 00:00:00"
								v-model:value="formData.establishmentTime"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="所属总公司企业信用代码" :labelCol="labelCol">
							<a-input
								v-model:value="formData.headquarterCreditCode"
								placeholder="请填写所属总公司企业信用代码"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="法人姓名" :labelCol="labelCol" name="legalRepresentative">
							<a-input
								v-model:value="formData.legalRepresentative"
								placeholder="请填写法人姓名"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="法人联系方式" name="legalContact" :labelCol="labelCol">
							<a-input
								placeholder="请填写法人联系方式"
								v-model:value="formData.legalContact"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="企业联系人" name="enterpriseContact" :labelCol="labelCol">
							<a-input
								placeholder="请填写企业联系人"
								v-model:value="formData.enterpriseContact"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="联系电话" name="contactNumber" :labelCol="labelCol">
							<a-input
								placeholder="请填写联系电话"
								v-model:value="formData.contactNumber"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="所属市州" name="cityState" :labelCol="labelCol">
							<a-select
								placeholder="请选择所属市州"
								v-model:value="formData.cityState"
								:disabled="props.modalData.type == 'look'"
							>
								<a-select-option v-for="dic in props.modalData.cityList" :key="dic.name" :value="dic.id">{{
									dic.dictLabel
								}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="企业性质" name="enterpriseNature" :labelCol="labelCol">
							<a-input
								placeholder="请填写企业性质"
								v-model:value="formData.enterpriseNature"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="企业类型" name="enterpriseType" :labelCol="labelCol">
							<a-input
								placeholder="请填写企业性质"
								v-model:value="formData.enterpriseType"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="经度" name="longitude" :labelCol="labelCol">
							<a-input
								placeholder="请填写经度"
								v-model:value="formData.longitude"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="纬度" name="latitude" :labelCol="labelCol">
							<a-input
								placeholder="请填写纬度"
								v-model:value="formData.latitude"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="应急分类" name="emergencyCategory" :labelCol="labelCol">
							<a-input readonly placeholder="请填写应急分类" v-model:value="formData.emergencyCategory" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:labelCol="labelCols"
							label="实际经营地址（省、市、县、乡镇街道门牌号）"
							name="actualBusinessAddress"
						>
							<a-input
								placeholder="请填写实际经营地址"
								v-model:value="formData.actualBusinessAddress"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="threeLevel">
						<a-form-item label="归口管理地区" name="managementAreaProvince" :labelCol="labelCol">
							<a-select
								placeholder="请选择所属省"
								v-model:value="formData.managementAreaProvince"
								:disabled="props.modalData.type == 'look'"
								@change="
									(val, option) => {
										getNextDic(val, option, 'gkglCity')
									}
								"
							>
								<a-select-option v-for="dic in dictList.province" :value="dic.id" :key="dic.name">{{
									dic.dictLabel
								}}</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item name="managementAreaCity" :labelCol="labelCol">
							<a-select
								placeholder="请选择所属市"
								v-model:value="formData.managementAreaCity"
								:disabled="!formData.managementAreaProvince || props.modalData.type == 'look'"
								@change="
									(val, option) => {
										getNextDic(val, option, 'gkglCounty')
									}
								"
							>
								<a-select-option v-for="dic in dictList.gkglCity" :value="dic.id" :key="dic.name">{{
									dic.dictLabel
								}}</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item name="managementAreaCounty" :labelCol="labelCol">
							<a-select
								placeholder="请选择所属市县"
								v-model:value="formData.managementAreaCounty"
								:disabled="!formData.managementAreaCity || props.modalData.type == 'look'"
							>
								<a-select-option v-for="dic in dictList.gkglCounty" :value="dic.id" :key="dic.name">{{
									dic.dictLabel
								}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="应急级别" name="emergencyLevel" :labelCol="labelCol">
							<a-checkbox-group
								:options="options"
								v-model:value="formData.emergencyLevel"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="threeLevel">
						<a-form-item label="实际经营地" :labelCol="labelCol" name="actualAddressProvince">
							<a-select
								placeholder="请选择所属省"
								:disabled="props.modalData.type == 'look'"
								name="actualAddressProvince"
								v-model:value="formData.actualAddressProvince"
								@change="
									(val, option) => {
										getNextDic(val, option, 'sjjyCity')
									}
								"
							>
								<a-select-option v-for="dic in dictList.province" :value="dic.id" :key="dic.name">{{
									dic.dictLabel
								}}</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item :labelCol="labelCol" name="actualAddressCity">
							<a-select
								placeholder="请选择所属市"
								v-model:value="formData.actualAddressCity"
								:disabled="!formData.actualAddressProvince || props.modalData.type == 'look'"
								@change="
									(val, option) => {
										getNextDic(val, option, 'sjjyCounty')
									}
								"
							>
								<a-select-option v-for="dic in dictList.sjjyCity" :value="dic.id" :key="dic.name">{{
									dic.dictLabel
								}}</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item :labelCol="labelCol" name="actualAddressCounty">
							<a-select
								placeholder="请选择所属市县"
								v-model:value="formData.actualAddressCounty"
								:disabled="!formData.actualAddressCity || props.modalData.type == 'look'"
							>
								<a-select-option v-for="dic in dictList.sjjyCounty" :value="dic.id" :key="dic.name">{{
									dic.dictLabel
								}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item class="inputClsss" label="原粮库房仓容（吨）" name="grainStorageCapacity" :labelCol="labelCol">
							<a-input-number
								min="0"
								placeholder="请填写原粮库房仓容"
								v-model:value="formData.grainStorageCapacity"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item
							class="inputClsss"
							label="原粮油罐罐容(吨）"
							name="vegetableOilTankCapacity"
							:labelCol="labelCol"
						>
							<a-input-number
								min="0"
								placeholder="请填写原粮油罐罐容"
								v-model:value="formData.vegetableOilTankCapacity"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item
							class="inputClsss"
							label="成品粮库房容（吨）"
							name="finishedGrainStorageCapacity"
							:labelCol="labelCol"
						>
							<a-input-number
								min="0"
								placeholder="请填写成品粮库房容"
								v-model:value="formData.finishedGrainStorageCapacity"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item
							class="inputClsss"
							label="成品粮油罐（吨）"
							name="finishedOilTankCapacity"
							:labelCol="labelCol"
						>
							<a-input-number
								min="0"
								placeholder="请填写成品粮油罐"
								v-model:value="formData.finishedOilTankCapacity"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item class="inputClsss" label="实际日运输量（吨）" name="dailyTransportVolume" :labelCol="labelCol">
							<a-input-number
								min="0"
								placeholder="请填写实际日运输量"
								v-model:value="formData.dailyTransportVolume"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="生产状态" name="productionStatus" :labelCol="labelCol">
							<a-radio-group
								placeholder="请选择生产状态"
								name="productionStatus"
								v-model:value="formData.productionStatus"
								:disabled="props.modalData.type == 'look'"
							>
								<a-radio :value="0">停产</a-radio>
								<a-radio :value="1">生产</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item
							class="inputClsss"
							label="自有运输车辆数（辆）"
							name="ownTransportVehicles"
							:labelCol="labelCol"
						>
							<a-input-number
								min="0"
								placeholder="请填写自有运输车辆数"
								v-model:value="formData.ownTransportVehicles"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item
							class="inputClsss"
							label="自有车辆日配送能力（吨）"
							name="ownVehiclesDailyDeliveryCapacity"
							:labelCol="labelCol"
						>
							<a-input-number
								min="0"
								placeholder="请填写自有车辆日配送能力"
								:disabled="props.modalData.type == 'look'"
								v-model:value="formData.ownVehiclesDailyDeliveryCapacity"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item class="inputClsss" label="自有运输能力（吨）" name="ownTransportCapacity" :labelCol="labelCol">
							<a-input-number
								min="0"
								placeholder="请填写自有运输能力"
								v-model:value="formData.ownTransportCapacity"
								:disabled="props.modalData.type == 'look'"
							/>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
			<a-table :columns="columns" :data-source="tableData" :pagination="false">
				<template #bodyCell="{ column, index }">
					<template v-if="column.key != 'typeTetx'">
						<a-input-number
							min="0"
							:disabled="props.modalData.type == 'look'"
							v-model:value="tableData[index][column.key].quantity"
						/>
					</template>
				</template>
			</a-table>
		</a-modal>
	</div>
</template>
<script setup lang="ts" name="">
	import { defineProps, reactive } from 'vue'
	import { Form } from 'ant-design-vue'
	import { addMixin } from '@/mixins/emergencySupport/yjccqyAdd.js'
	import api from '@/api/emergencySupport/emergencySupportCenter.js'
	import { storageDataFilter, getStorageDataFilter } from '@/utils/datafilter.js'
	const formRef = ref()
	const useForm = Form.useForm
	const dictList = reactive({
		province: [],
		gkglCity: [],
		sjjyCity: [],
		gkglCounty: [],
		sjjyCounty: []
	})
	const emit = defineEmits(['closeModel'])
	const dictionary = JSON.parse(localStorage.getItem('DICT_TYPE_TREE_DATA'))
	const { formData, tableData, pageTitle, options, columns, rulesRef, labelCol, labelCols } = addMixin()
	const props = defineProps({
		modalData: {
			type: Object
		}
	})

	onMounted(() => {
		getCityDicList()
		// 查看详情
		if (props.modalData.type == 'look' || props.modalData.type == 'edit') {
			pageTitle.value = '查看应急配送企业详情'
			api.getDetails({ id: props.modalData.id }).then((res) => {
				formData.value = res
				formData.value.emergencyLevel = []
				if (res.isNationalLevel > 0) {
					formData.value.emergencyLevel.push('1')
				}
				if (res.isProvincialLevel > 0) {
					formData.value.emergencyLevel.push('2')
				}
				if (res.isCityLevel > 0) {
					formData.value.emergencyLevel.push('3')
				}
				if (res.isCountyLevel > 0) {
					formData.value.emergencyLevel.push('4')
				}
				tableData.value = storageDataFilter(res.bizEsStorageEnterpriseGrain)
				showDictValue()
			})
		} else {
			pageTitle.value = '新增应急仓储企业'
			tableData.value = storageDataFilter([])
		}
	})

	// 提交
	function onSubmit() {
		let apiFun = null
		delete formData.value.bizEsStorageEnterpriseGrain
		delete formData.value.bizEsStorageEnterpriseGrain

		if (props.modalData.type == 'edit') {
			apiFun = api.editDetails
			formData.value.bizEsStorageEnterpriseGrainEditParamList = getStorageDataFilter(tableData.value)
		} else {
			apiFun = api.addDetails
			formData.value.bizEsStorageEnterpriseGrainAddParamList = getStorageDataFilter(tableData.value)
		}
		formData.value.isNationalLevel = formData.value.emergencyLevel.indexOf('1') > -1 ? 1 : 0
		formData.value.isProvincialLevel = formData.value.emergencyLevel.indexOf('2') > -1 ? 1 : 0
		formData.value.isCityLevel = formData.value.emergencyLevel.indexOf('3') > -1 ? 1 : 0
		formData.value.isCountyLevel = formData.value.emergencyLevel.indexOf('4') > -1 ? 1 : 0

		formRef.value.validate().then(() => {
			apiFun(formData.value).then((res) => {
				closeModel('upData')
			})
		})
	}
	// 进入时  初始字典
	function showDictValue() {
		dictList.province.map((item) => {
			if (item.id == formData.value.managementAreaProvince) {
				if (item.dictLabel == '北京市' || item.dictLabel == '上海市' || item.dictLabel == '重庆市') {
					dictList.gkglCity.push(item)
				} else {
					dictList.gkglCity = item.children
				}
			} else if (item.id == formData.value.actualAddressProvince) {
				if (item.dictLabel == '北京市' || item.dictLabel == '上海市' || item.dictLabel == '重庆市') {
					dictList.sjjyCity.push(item)
				} else {
					dictList.sjjyCity = item.children
				}
			}
		})
		// 回显县区字典
		dictList.gkglCity.map((item) => {
			if (item.id == formData.value.managementAreaCity) {
				Array.prototype.push.apply(dictList.gkglCounty, item.children)
			}
		})
		// 回显县区字典
		dictList.sjjyCity.map((item) => {
			if (item.id == formData.value.actualAddressCity) {
				Array.prototype.push.apply(dictList.sjjyCounty, item.children)
			}
		})
	}
	// 获取字典
	function getCityDicList() {
		dictionary.map((item) => {
			if (item.dictValue == 'xzqh') {
				item.children.map((el, index) => {
					if (el.dictLabel != '美国' && el.dictLabel != '加拿大') {
						dictList.province.push(el)
					}
				})
			}
		})
	}
	// 获取下一级的字典
	function getNextDic(val, option, type) {
		let dictArr = []
		if (type == 'gkglCity') {
			// 如果省级选择的是北京市、上海市和重庆市那么下一级的城市列表只能是北京市、上海市和重庆市
			if (option.key == '北京市' || option.key == '上海市' || option.key == '重庆市') {
				dictList.province.map((item) => {
					if (item.id == option.value) {
						dictArr.push(item)
						formData.value.managementAreaCity = ''
						formData.value.managementAreaCounty = ''
					}
				})
			} else {
				dictArr = dictList.province
				formData.value.managementAreaCity = ''
				formData.value.managementAreaCounty = ''
			}
		} else if (type == 'sjjyCity') {
			// 如果省级选择的是北京市、上海市和重庆市那么下一级的城市列表只能是北京市、上海市和重庆市
			if (option.key == '北京市' || option.key == '上海市' || option.key == '重庆市') {
				dictList.province.map((item) => {
					if (item.id == option.value) {
						dictArr.push(item)
						formData.value.actualAddressCity = ''
						formData.value.actualAddressCounty = ''
					}
				})
			} else {
				dictArr = dictList.province
				formData.value.actualAddressCity = ''
				formData.value.actualAddressCounty = ''
			}
		} else if (type == 'gkglCounty') {
			dictArr = dictList.gkglCity
			formData.value.managementAreaCounty = ''
		} else {
			dictArr = dictList.sjjyCity
			formData.value.actualAddressCounty = ''
		}
		if (
			(type == 'gkglCity' || type == 'sjjyCity') &&
			(option.key == '北京市' || option.key == '上海市' || option.key == '重庆市')
		) {
			dictList[type] = dictArr
		} else {
			dictArr.map((item) => {
				if (val == item.id) {
					dictList[type] = item.children
				}
			})
		}
	}
	// 关闭
	function closeModel(data) {
		emit('closeModel', data)
	}
</script>
<style scoped lang="less">
	:deep(.ant-modal) {
		top: 50px;
		min-width: 1471px;
		height: calc(100vh - 100px);
		.ant-modal-header {
			.ant-modal-title {
				font-weight: bold;
			}
		}
		.ant-modal-body {
			overflow: auto;
			height: calc(100vh - 200px);
		}
	}
	.threeLevel {
		.ant-form-item {
			width: 24%;
			float: left;
			margin-right: 1%;
			min-width: 167px;
		}
		.ant-form-item:first-child {
			width: 49%;
			min-width: 341px;
		}
	}
	.inputClsss {
		.ant-picker,
		.ant-input-number {
			width: 100%;
		}
	}
</style>
