<template>
	<el-dialog
		class="super-flexible-dialog"
		:title="isDetail ? $t('ws.detail') : !dataForm.id ? $t('add') : $t('edit')"
		:visible.sync="visible"
		:close-on-click-modal="false"
		:destroy-on-close="true"
	>
		<div style="max-height: 60vh; overflow-y: scroll; overflow-x: hidden;">
			<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
				<el-row :gutter="20">
					<el-col :span="12"
						><el-form-item :label="$t('ws.name')" prop="name"> <el-input v-model="dataForm.name" :placeholder="$t('ws.name')" /> </el-form-item
					></el-col>
					<el-col :span="12"
						><el-form-item :label="$t('ws.code')" prop="code"> <el-input v-model="dataForm.code" :placeholder="$t('ws.code')" /> </el-form-item
					></el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="12"
						><el-form-item :label="$t('ws.belong')" prop="productionLineId">
							<el-select v-model="dataForm.productionLineId" :placeholder="$t('ws.belong')">
								<el-option v-for="line in lineList" :key="line.id" :value="line.id" :label="line.name" />
							</el-select> </el-form-item
					></el-col>
					<el-col :span="12"
						><el-form-item :label="$t('desc')" prop="description"> <el-input v-model="dataForm.description" :placeholder="$t('desc')" /> </el-form-item
					></el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="12"
						><el-form-item :label="$t('remark')" prop="remark"> <el-input v-model="dataForm.remark" :placeholder="$t('remark')" /> </el-form-item
					></el-col>
				</el-row>
			</el-form>

			<section class="attr-form-section" v-if="dataForm.id">
				<h3>
					{{ $t('ws.eqbind') }}
					<!-- <el-button type="text" v-if="!showAttrForm" @click="addEq">{{ $t('add') }}</el-button> -->
				</h3>
				<div class="table" v-if="!showAttrForm">
					<base-table
						:page="page"
						:size="limit"
						:data="eqList"
						:table-head-configs="tableProps"
						:max-height="calcMaxHeight(8)"
						@operate-event="handleOperations"
						@refreshDataList="getDataList"
					/>
					<el-pagination
						@size-change="sizeChangeHandle"
						@current-change="currentChangeHandle"
						:current-page="page"
						:page-sizes="[5, 10, 15, 20]"
						:page-size="limit"
						:total="eqTotal"
						layout="total, sizes, prev, pager, next, jumper"
					/>
				</div>
				<attr-form v-else ref="AttrFrom" :workshop-section-id="dataForm.id" @close-attr-form="showAttrForm = false" @refresh-list="handleRefreshList" />
			</section>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClick({ name: 'cancel' })">{{ $t('cancel') }}</el-button>
			<el-button type="primary" v-if="dataForm.id" @click="handleClick({ name: 'update' })">{{ $t('update') }}</el-button>
			<el-button type="success" v-else @click="handleClick({ name: 'save' })">{{ $t('save') }}</el-button>
		</span>
	</el-dialog>
</template>

<script>
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import SmallTitle from '@/components/small-title'
// import { pick } from 'lodash/object'
// import TableOperateComponent from '@/components/base-table/components/operationComponent'
import AttrForm from './workshopSectionDialogAttrForm.vue'
import { calcMaxHeight } from '@/utils'
const tableProps = [
	{
		type: 'index',
		name: i18n.t('index')
	},
	{ name: i18n.t('eq.name'), prop: 'equipmentName' },
	{ name: i18n.t('dept.sort'), prop: 'sort' }
	// {
	// 	name: i18n.t('handle'),
	// 	prop: 'operations',
	// 	fixed: 'right',
	// 	width: 180,
	// 	subcomponent: TableOperateComponent,
	// 	options: ['edit', 'delete']
	// }
]

export default {
	name: 'WorkshopDialog',
	components: { BaseTable, SmallTitle, AttrForm },
	data() {
		return {
			calcMaxHeight,
			visible: false,
			isDetail: false,
			tableProps,
			lineList: [],
			eqList: [],
			eqTotal: 0,
			dataForm: {
				id: null,
				// 工段名称
				name: '',
				// 工段编码
				code: '',
				// 所属产线
				productionLineId: null,
				// 描述
				description: '',
				// 备注
				remark: ''
			},
			dataFormRules: {
				name: [{ required: true, message: i18n.t('validate.required'), trigger: 'blur' }],
				code: [{ required: true, message: i18n.t('validate.required'), trigger: 'blur' }]
			},
			limit: 5,
			page: 1,
			showAttrForm: false
		}
	},
	mounted() {
		this.getLineList()
	},
	methods: {
		init(id) {
			this.dataForm = {
				id: null,
				name: '',
				code: '',
				productionLineId: null,
				description: '',
				remark: ''
			}
			this.showAttrForm = false
			this.dataForm.id = id
			// this.isDetail = !!id

			this.$nextTick(() => {
				if (id) {
					// 编辑
					this.$http({
						url: this.$http.adornUrl('/monitoring/workshopSection/' + this.dataForm.id),
						method: 'get'
					}).then(({ data: res }) => {
						if (res.data) {
							const { name, code, productionLineId, description, remark } = res.data
							this.dataForm.name = name
							this.dataForm.code = code
							this.dataForm.productionLineId = productionLineId
							this.dataForm.description = description
							this.dataForm.remark = remark
						}
					})
					// 获取list
					this.getDataList()
				} else {
					this.getWsCode()
				}
			})

			this.visible = true
		},
		getWsCode() {
			this.$http({
				url: this.$http.adornUrl('/monitoring/workshopSection/getCode'),
				method: 'post'
			}).then(({ data: res }) => {
				if (res.data) {
					this.dataForm.code = res.data
				}
			})
		},
		getLineList() {
			this.$http({
				url: this.$http.adornUrl('/monitoring/productionLine/list'),
				method: 'get'
			}).then(({ data: res }) => {
				if (res.data) {
					this.lineList = res.data
				} else {
					this.lineList.splice(0)
				}
			})
		},
		getDataList() {
			// 获取设备关联表
			this.$http({
				url: this.$http.adornUrl('/monitoring/workshopSectionEquipment'),
				method: 'get',
				params: this.$http.adornParams({
					limit: this.limit,
					page: this.page,
					id: this.dataForm.id
				})
			}).then(({ data: res }) => {
				if (res.data && res.data.list) {
					this.eqList = res.data.list
					this.eqTotal = res.data.total
				} else {
					this.eqList.splice(0)
					this.eqTotal = 0
				}
			})
		},
		// 每页数
		sizeChangeHandle(val) {
			this.limit = val
			this.page = 1
			this.getDataList()
		},
		// 当前页
		currentChangeHandle(val) {
			this.page = val
			this.getDataList()
		},
		addEq() {
			this.handleAddOrUpdate()
		},
		handleOperations({ type, data: id }) {
			switch (type) {
				case 'edit':
					this.handleAddOrUpdate(id)
					break
				case 'delete':
					this.handleDeleteEq(id)
					break
			}
		},
		handleDeleteEq(id) {
			this.$confirm(i18n.t('prompt.sure'), i18n.t('prompt.title'), {
				// this.$confirm(`确定删除 ${id} 吗?`, i18n.t('prompt.title'), {
				confirmButtonText: i18n.t('confirm'),
				cancelButtonText: i18n.t('cancel'),
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl('/monitoring/workshopSectionEquipment'),
					method: 'delete',
					data: [id]
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: i18n.t('prompt.success'),
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getDataList()
							}
						})
					} else {
						this.$message.error(data.msg)
					}
				})
			})
		},
		handleRefreshList() {
			this.getDataList()
			this.showAttrForm = false
		},
		handleAddOrUpdate(id) {
			this.showAttrForm = true
			if (id) {
				this.$nextTick(() => {
					this.$refs.AttrFrom.setInitialId(id)
				})
			}
		},
		handleClick({ name }) {
			switch (name) {
				case 'cancel':
					this.visible = false
					break
				case 'update':
				case 'save':
					this.handleCreateOrUpdate()
					break
			}
		},
		handleCreateOrUpdate() {
			this.$refs['dataForm'].validate(valid => {
				if (valid) {
					this.$http({
						url: this.$http.adornUrl('/monitoring/workshopSection'),
						method: this.dataForm.id ? 'put' : 'post',
						data: {
							...this.dataForm
						}
					}).then(({ data: res }) => {
						this.$message.success({
							message: i18n.t('prompt.success'),
							onClose: () => {
								this.$emit('refreshDataList')
								this.visible = false
							}
						})
					})
				}
			})
		}
	}
}
</script>

<style scoped>
.super-flexible-dialog >>> .el-select,
.super-flexible-dialog >>> .el-cascader {
	width: 100%;
}

.super-flexible-dialog >>> ::-webkit-scrollbar {
	width: 4px;
	border-radius: 4px;
	background: #fff;
}

.super-flexible-dialog >>> ::-webkit-scrollbar-thumb {
	width: 4px;
	border-radius: 4px;
	background: #ccc;
}

.super-flexible-dialog >>> .hidden-input {
	display: none;
}
</style>
