<template>
	<div class="common-page device-manage">

    	<!-- 表格 -->
		<div class="panel-bottom page-row">
			<h3>大屏配置</h3>
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<div class="content">
							<el-table :data="tableData" v-loading="loading" border :row-class-name="tableRowClassName" height="75vh" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
								<el-table-column prop="title" label="标题" align="center"></el-table-column>
								<!-- <el-table-column prop="componentName" label="组件名称" align="center"></el-table-column> -->
								<el-table-column prop="pos" label="位置" align="center" :formatter="posChange"></el-table-column>
								<el-table-column prop="dsort" label="排序" align="center"></el-table-column>
								<el-table-column prop="status" label="状态" align="center" :formatter="statusChange"></el-table-column>
								<el-table-column label="操作" align="center" fixed="right" width="200">
									<template slot-scope="scope">
										<el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 表单渲染 -->
		<el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" width="700px">
			<el-form :model="form.item" ref="form1" :inline="true" size="small" label-width="150px">
				<el-form-item label="所属模块" prop="pid" v-if="form.item.pid != 0">
					<el-select v-model="form.item.pid" placeholder="请选择所属模块" style="width:280px;">
						<el-option label="数据总览" value="1"></el-option>
						<el-option label="车辆管理" value="2"></el-option>
						<el-option label="智能调度" value="3"></el-option>
						<el-option label="数据分析" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="位置" prop="pos" v-if="form.item.pid != 0 && form.item.pos != 'center'">
					<el-select v-model="form.item.pos" placeholder="请选择位置" style="width:280px;">
						<el-option label="左侧" value="left"></el-option>
						<el-option label="右侧" value="right"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="排序" prop="dsort">
					<el-input-number v-model="form.item.dsort"></el-input-number>
				</el-form-item>
                <el-form-item label="状态" prop="status">
					<el-select v-model="form.item.status" placeholder="请选择状态" style="width:280px;">
						<el-option label="显示" value="1"></el-option>
						<el-option label="隐藏" value="0"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="text" @click="cancelForm">取消</el-button>
				<el-button :loading="form.status.cu === 2" type="primary" @click="submitForm('form1', form.item)">确认</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';

export default {
	name: 'LargeScreenMenuDispose',
	data() {
		return {
			//标题属性
			loading: false,
			alarmTimeId:'',
			tableData: [],
			form: {
                title:'修改菜单配置',
                visible:false,
                reqType:'edit',
                status:{cu:0},
                item:{},
			},
		}
	},
	mounted() {
		this.loadData();
	},
	methods: {
		loadData() {
			//获取大屏顶部大标题
			HttpReq.truckDispatching.screenTitleMenuQuery({size:9999,pid:0,sort:'dsort'}).then((res1) => {
				if(res1.code == 200){
					let alltableData = [];
					res1.data.content.forEach((item,index)=>{
						if(item.children){
							let sonData = {...item};
							sonData.children = [];
							//获取对应子标题
							HttpReq.truckDispatching.screenTitleMenuQuery({size:9999,pid:item.children,sort:'dsort'}).then((res2) => {
								if(res2.code == 200){
									sonData.children = res2.data.content;
									alltableData.push(sonData);
									this.tableData = alltableData;
								}else{
									return
								}
							})
						}else{
							alltableData.push(item);
							this.tableData = alltableData;
						}
					})
					
				}
			})

		},
		tableRowClassName({row, rowIndex}) {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		},
		cancelForm(a, b, c){
			this.form.visible = false;
		},
		toEdit(item) {
			// 请除表单验证
			this.$refs['form1'] && this.$refs['form1'].clearValidate();
			this.form.title = '修改菜单配置';
			this.form.status.cu = 0;
			this.form.visible = true;
			this.form.item = {...item};
			this.form.reqType = 'edit';
			this.alarmTimeId = this.form.item.id;
		},
		submitForm(validateName, item){
			if(!this.form.status.cu){
				this.form.status.cu = 2;
				this.$refs[validateName].validate(valid => {
					if(valid){
						this.reqUpdateItem(this.form, item)
					}else{
						this.form.status.cu = 0
					}
				});
			};
		},
		//修改菜单配置
		reqUpdateItem(form, item){
			let lastData = {...item};
			lastData.id = this.alarmTimeId;
			if(lastData.children){
				delete lastData.children;
			}
			HttpReq.truckDispatching.screenTitleMenuUpdate(lastData).then((res) => {
				form.visible = false;
				if(res.code == 200){
					this.$notify({
						title: '大屏配置修改成功！',
						type: 'success',
						duration: 2500
					});
					this.loadData()
				}else{
					this.$notify({
						title: res.msg,
						type: 'error',
						duration: 2500
					})
				}
			}).catch(function(error) {
				form.status.cu = 0
			});
		},
        //组件状态展示修改
        statusChange(row){
            return row.status == '1' ? '显示' : '隐藏';
        },
		//组件位置展示
		posChange(row){
			return row.pos == 'left' ? '左侧' : row.pos == 'right' ? '右侧' : row.pos == 'center' ? '中间' : '';
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	.el-table .warning-row {
		background: oldlace;
	}
	.el-table .success-row {
		background: #f0f9eb;
	}
	
	.device-manage{
		.panel-bottom{
			.el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
			.btn-groub2{
				display:inline-block;
				.el-button{margin:2px 0;padding:6px 15px;font-size:15px;}
				.el-button--warning {
					background-color: #e6a23c;
					border-color: #e6a23c;
				}
				.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
			}
		}
	}
	
	.ecahrt1-dialog{
		display:flex;align-items:center;
		.el-dialog{
			margin-top:inherit !important;display:table !important;width:fit-content;
			.el-form-item{margin-right:0;}
		}

		.el-dialog__header{height:0;padding:0;display:block;}
		.form-body{
			border:1px solid #999;width:800px;height:500px;position:relative;
			>div{position:absolute;top:0;left:0;height:100%;width:100%;}
		}
	}
</style>
