<template>
	<div class="" style="background: #eee; border-radius: 8px; padding: 24px;">
		<el-row>
			<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item :label="edit ? $t('ws.binded') : $t('ws.unbind')" prop="equipmentId">
							<el-select v-if="!edit" clearable v-model="dataForm.equipmentId" :placeholder="$t('ws.eqbindplaceholder')">
								<el-option v-for="eq in eqList" :key="eq.id" :label="eq.name" :value="eq.id" />
							</el-select>
							<el-input v-else disabled v-model="bindedEquipmentName" /> </el-form-item
					></el-col>
					<el-col :span="12">
						<el-form-item :label="$t('ws.sort')" prop="sort"> <el-input v-model="dataForm.sort" :placeholder="$t('ws.setorder')" clearable /> </el-form-item
					></el-col>
				</el-row>
			</el-form>
		</el-row>
		<el-row style="text-align: right">
			<el-button size="small" @click="handleCancel">{{ $t('cancel') }}</el-button>
			<el-button size="small" type="success" @click="handleSave">{{ edit ? $t('update') : $t('ws.bind') }}</el-button>
		</el-row>
	</div>
</template>

<script>
import i18n from '../../../i18n'

export default {
	name: 'AttrForm',
	props: {
		workshopSectionId: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			edit: false,
			bindedEquipmentName: '',
			dataForm: {
				id: null,
				sort: null,
				equipmentId: null
			},
			dataFormRules: {
				sort: [
					{
						type: 'integer',
						message: i18n.t('hints.number'),
						transform: val => Number(val),
						trigger: 'blur'
					}
				]
			},
			eqList: []
		}
	},
	mounted() {
		this.edit = false
		this.bindedEquipmentName = ''
		this.getEqList()
	},
	methods: {
		setInitialId(id) {
			this.edit = true
			// 获取信息，让用户修改排序
			this.$http({
				url: this.$http.adornUrl('/monitoring/workshopSectionEquipment/') + id,
				method: 'get'
			}).then(({ data: res }) => {
				if (res.data) {
					const { id, equipmentId, equipmentName, sort } = res.data
					this.dataForm = { id, equipmentId, sort }
					this.bindedEquipmentName = equipmentName
				} else {
					this.dataForm = { id: null, equipmentId: null, sort: null }
					this.bindedEquipmentName = ''
				}
			})
		},
		getEqList() {
			this.$http({
				url: this.$http.adornUrl('/monitoring/equipment/noBindEqu'),
				method: 'get'
			}).then(({ data: res }) => {
				if (res.data) {
					this.eqList = res.data.map(item => ({ id: item.id, name: item.name }))
				} else {
					this.eqList.splice(0)
				}
			})
		},
		handleCancel() {
			this.eqList.splice(0)
			this.dataForm = {
				id: null,
				sort: null,
				equipmentId: null
			}
			this.$emit('close-attr-form')
		},
		handleSave() {
			this.$http({
				url: this.$http.adornUrl('/monitoring/workshopSectionEquipment'),
				method: this.edit ? 'put' : 'post',
				data: {
					...this.dataForm,
					workshopSectionId: this.workshopSectionId
				}
			}).then(({ data: res }) => {
				if (res.data) {
					this.$message.success({
						message: i18n.t('prompt.success'),
						duration: 1500,
						onClose: () => {
							this.$emit('refresh-list')
							this.handleCancel()
						}
					})
				}
			})
		}
	}
}
</script>
