<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="roleAdd" v-auth="'role.create'"></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="query.search" placeholder="测点集名称" clearable @keyup.enter="handleQuery"></el-input>
					<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column label="名称" prop="name" min-width="100"></el-table-column>
				<el-table-column label="计量物料" prop="material_name" min-width="150"></el-table-column>
				<el-table-column label="所属部门" prop="belong_dept_name" min-width="150"></el-table-column>
				<el-table-column label="所属工段" prop="mgroup_name" min-width="150"></el-table-column>
				<el-table-column label="创建时间" prop="create_time" min-width="150"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="140">
					<template #default="scope">
						<el-button link size="small" @click="roleEdit(scope.row)" v-auth="'team.update'" type="primary">编辑</el-button>
						<el-divider direction="vertical"></el-divider>
						<el-popconfirm title="确定删除吗？" @confirm="roleDel(scope.row, scope.$index)">
							<template #reference>
								<el-button link size="small" v-auth="'role.delete'" type="danger">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<el-dialog :title="titleMap[type]" v-model="limitedVisible">
		<el-form :model="form" :rules="rules" ref="addForm"  label-width="80px" style="padding: 0 10px;">
			<el-row>
				<el-col :md="12" :sm="24">
					<el-form-item label="名称" prop="name">
						<el-input v-model="form.name" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="测点编号" prop="code">
						<el-input v-model="form.code" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="单位" prop="unit">
						<el-input v-model="form.unit" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="检测设备">
						<el-select
							v-model="form.ep_monitored"
							placeholder="检测设备"
							clearable
							style="width: 100%;"
						>
							<el-option
							v-for="item in monitoredOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="所属设备">
						<el-select
							v-model="form.ep_belong"
							placeholder="所属设备"
							clearable
							style="width: 100%;"
						>
							<el-option
							v-for="item in epOptions"
							:key="item.id"
							:label="item.name"
							:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="所在集合">
						<el-select
							v-model="form.mgroup"
							placeholder="所在集合"
							clearable
							style="width: 100%;"
						>
							<el-option
							v-for="item in mgroupOptions"
							:key="item.id"
							:label="item.name"
							:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :sm="24">
					<el-form-item label="计量物料">
						<el-select
							v-model="form.material"
							placeholder="计量物料"
							clearable
							style="width: 100%;"
						>
							<el-option
							v-for="item in materials"
							:key="item.id"
							:label="item.name"
							:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="limitedVisible=false" >取 消</el-button>
			<el-button v-if="type!=='show'" type="primary" :loading="isSaving" @click="submitHandle()">保 存</el-button>
		</template>
	</el-dialog>
</template>
<script>
	import {genTree} from "@/utils/verificate";
	const defaultForm = {
		id:"",
		name: "",
		cate:'',
		product:'',
		belong_dept:'',
	};
	export default {
		name: 'dept',
		data() {
			return {
				apiObj: this.$API.enm.mpoint.list,
				search: {
					keyword: null
				},
				query: {},
				isSaving: false,
				limitedVisible : false,
				checkStrictly:true,
				type: "add",
				titleMap: {
					add: '新增测点集',
					edit: '编辑测点集',
					show: '查看测点集'
				},
				//表单数据
				form: defaultForm,
				//验证规则
				rules: {
					name: [{required: true, message: '请输入测点集名称'}],
					code: [{required: true, message: '请输入测点集编号'}],
					unit: [{required: true, message: '请输入测点集单位'}],
					
				},
                groupsProps: {
                    multiple: false,
                    emitPath: false,
                    checkStrictly: true,
                },
				options:[
					{label:'动力电',value:'elec'},
					{label:'工业水',value:'water'},
					{label:'煤粉',value:'water'},
					{label:'蒸汽',value:'water'},
					{label:'柴油',value:'water'},
					{label:'压缩空气',value:'water'},
				],
				cates_:{
					'elec':'动力电',
					'water':'工业水',
				},
                group: [],
				mgroupOptions:[],
				epOptions:[],
				materials:[],
				monitoredOptions:[],
				
			}
		},

		mounted() {
			this.getMaterial();
			this.getGroup();//获取部门
			this.getEquipment();//获取设备
			this.getMonitored();//获取检测设备
			this.getMgroup();//获取集合
		},
		methods: {
			handleChange(value) {
                console.log(value);
                console.log(this.form.belong_dept);
			},
			//加载树数据
			async getGroup() {
				let res = await this.$API.system.dept.list.req({ page: 0 });
				this.group = genTree(res);
			},
			//获取设备列表
			getEquipment(){
				this.$API.em.equipment.list.req({page:0,type:10}).then(res=>{
					this.epOptions = res;
				})
			},
			//获取监测设备列表
			getMonitored(){
				this.$API.em.equipment.list.req({page:0,type:20}).then(res=>{
					this.monitoredOptions = res;
				})
			},
			//获取集合列表
			getMgroup(){
				this.$API.mtm.mgroup.list.req({page:0}).then(res=>{
					this.mgroupOptions = res;
				})
			},
			//获取产品列表
			getMaterial(){
				this.$API.mtm.material.list.req({page:0}).then(res=>{
					this.materials = res;
				})
				
			},
			//添加测点集
			roleAdd(){
				this.limitedVisible = true;
				this.type = "add";
				this.form = Object.assign({}, defaultForm);
			},
			submitHandle(){
				let that = this;
				this.$refs.addForm.validate( (valid) => {
					if (valid) {
						this.isSaveing = true;
						let res;
						if(this.type==='add'){
							res = this.$API.enm.mpoint.create.req(that.form);
						}else{
							res = this.$API.enm.mpoint.update.req(that.form.id,that.form);
						}
						if(res.err_msg){
							this.$message.error(res.err_msg);
						}else{
							this.isSaveing = false;
							this.limitedVisible = false;
							this.$refs.table.refresh();
						}
					}
				})
			},
			//编辑测点集
			roleEdit(row){
				this.type='edit';
				this.form=row;
				this.limitedVisible = true;
			},

			//删除测点集
			async roleDel(row){
				var id = row.id;
				var res = await this.$API.mtm.team.delete.req(id);
				if(res.err_msg){
					this.$message.error(res.err_msg)
				}else{
					this.$refs.table.refresh();
					this.$message.success("删除成功")
				}
			},
			//表格选择后回调事件
			selectionChange(selection){
				this.selection = selection;
			},
			//搜索
			handleQuery(){
				this.$refs.table.queryData(this.query)
			},
			//本地更新数据
			handleSaveSuccess(){
				this.$refs.table.refresh()
			}
		}
	}
</script>
<style scoped>
	.treeMain {width: 100%;height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
</style>
