<template>
	<div>
		<el-dialog :title="title" :visible="visible" :before-close="handleClose" :close-on-click-modal="false"
			width="50%">
			<div>
				<el-form ref="formInfo" label-position="top" :model="parameter" label-width="150px" :rules="rules">
					<el-row :gutter="24">
						<el-col :span="8">
							<el-form-item :label="$t('international.name')" prop="name">
								<el-input clearable :placeholder="$t('international.tips')+$t('international.name')"
									v-model="parameter.name"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('international.nameEn')" prop="nameEn">
								<el-input clearable :placeholder="$t('international.tips')+$t('international.nameEn')"
									v-model="parameter.nameEn"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('international.code')" prop="code">
								<el-input clearable :placeholder="$t('international.tips')+$t('international.code')"
									v-model="parameter.code"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<!-- <el-col :span="8">
							<el-form-item :label="$t('international.level')" prop="level">
								<el-select v-model="parameter.level" size="medium"
									:placeholder="$t('international.tips')+$t('international.level')">
									<el-option v-for="item in jbList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
 -->
						<el-col :span="8">
							<el-form-item :label="$t('international.type')" prop="type">
								<el-select v-model="typeList" multiple collapse-tags
									:placeholder="$t('international.tips')+$t('international.type')">
									<el-option v-for="item in kmList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('international.unit')" prop="unit">
								<el-select v-model="parameter.unit"  
									:placeholder="$t('international.tips')+$t('international.unit')">
									<el-option v-for="item in sjdwList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<el-form-item :label="$t('international.memo')" prop="memo">
								<el-input clearable type="textarea" :rows="2"
									:placeholder="$t('international.tips')+$t('international.memo')"
									v-model="parameter.memo"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleSave">{{$t('international.save')}}</el-button>
				<el-button @click="handleClose">{{$t('international.cancel')}}</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import internationalSubject from '@/api/basicInfo/internationalSubject.js'
	export default {
		name: 'internationDialog',
		data() {
			return {
				visible: false,
				title: '新增',
				rules: {
					name: [{
						required: true,
						message: this.$t('international.tips') + this.$t('international.name'),
						trigger: 'blur'
					}],
					nameEn: [{
						required: true,
						message: this.$t('international.tips') + this.$t('international.nameEn'),
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: this.$t('international.tips') + this.$t('international.code'),
						trigger: 'blur'
					}],
				},
				queryParam: {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
				},
				typeList: [],
				parameter: {
					name: "",
					nameEn: "",
					type: "",
					code: "",
					parentId: '',
					// level: "",
					correlation: '',
					type: "",
					unit: "",
					memo: ""
				},
				kmList: [],
				sjdwList:[]
			}
		},
		created() {
			this.kmList = dictUtils.getDictItemsFromCache('subjec_type')
			this.sjdwList = dictUtils.getDictItemsFromCache('sjdw')
			
		},
		mounted() {},
		methods: {
			edit(val) {
				this.title = this.$t('common.edit')
				this.visible = true
				internationalSubject.detailId(val, res => {
					if (res) {
						this.parameter = res
						this.typeList=this.parameter.type.split(',')
						console.log(this.typeList);
						this.parameter.level = this.parameter.level.toString()

					}
				})

			},
			add(val) {
				this.parameter.parentId = val
				this.title = this.$t('common.add')
				this.visible = true
				this.typeList=[]
				this.typeList.push(this.kmList[0].value)
				this.parameter.unit=this.sjdwList[0].value
			},

			// 关闭新增人员窗口
			handleClose() {
				this.typeList=[]
				this.visible = false
				this.title = ""
				this.parameter = {
					name: "",
					nameEn: "",
					type: "",
					parentId: "",
					code: "",
					level: "",
					type: "",
					unit: "",
					memo: ""
				}
			},
			// 保存
			handleSave() {
				let str = ''
				this.typeList.forEach(e => {
					str += e + ","
				})
				if (str.length > 0) {
					str = str.substr(0, str.length - 1);
				}
				this.parameter.type = str
				this.$refs.formInfo.validate(valid => {
					if (valid) {
						if (this.title === '添加' || this.title === "add") {
							internationalSubject.addData(this.parameter, res => {
								if (res.state) {
									this.$notify({
										type: 'success',
										message: this.$t('international.success'),
										duration: 2000
									})
									this.$emit('getData');
									this.handleClose()
								}
							})
						} else if (this.title === '编辑' || this.title === "edit") {
							internationalSubject.editData(this.parameter, res => {
								if (res.state) {
									this.$notify({
										type: 'success',
										message: this.$t('international.success'),
										duration: 2000
									})
									this.$emit('getData');
									this.handleClose()
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
