<template>
	<!-- <el-tabs v-model="activeName"> -->
		<!-- <el-tab-pane label="个性化管理" name="zhcx"> -->
			<div class="main">
				<!-- <p class="tips">查询条件</p> -->
				<el-form
					:inline="true"
					ref="ruleForm"
					class="demo-form-inline"
				>
					<el-form-item label="个性化标题" class="w100" prop="syqlx">
						<el-input
							placeholder="输入个性化标题"
							v-model="queryData.title"
							@change="getData"
						></el-input>
					</el-form-item>
					<el-form-item label="个性化代码" class="w100" prop="zdtzm">
						<el-input
							placeholder="输入个性化代码"
							v-model="queryData.code"
							@change="getData"
						></el-input>
					</el-form-item>
					<el-form-item class="ml20">
						<el-button type="primary" @click="getData" icon="el-icon-search"
							>查询</el-button
						>
						<el-button
							type="warning"
							style="margin-left:60px"
							@click="reset"
							icon="el-icon-refresh"
							>重置</el-button
						>
					</el-form-item>
					<el-form-item style="margin-left:-20px">
						<el-button
							type="primary"
							@click="gxhVisible = true"
							icon="el-icon-plus"
							>新增</el-button
						>
						<el-button
							type="success"
							style="margin-left:60px"
							@click="save"
							icon="el-icon-folder"
							>保存</el-button
						>
					</el-form-item>
				</el-form>
				<!-- <p class="tips">查询列表</p> -->
				<div class="dataGrid" ref="dataGrid">
					<el-table
						:data="tableData"
						:height="tableHeight"
					>
						<el-table-column
							type="index"
							width="80"
							align="center"
							label="序号"
						>
						</el-table-column>
						<el-table-column prop="title" align="center" label="个性化标题">
						</el-table-column>
						<el-table-column prop="code" align="center" label="个性化代码">
						</el-table-column>
						<el-table-column prop="bz" align="center" label="备注">
						</el-table-column>
						<el-table-column prop="open" align="center" label="是否开启">
							<template slot-scope="scope">
								<el-switch
									v-model="scope.row.open"
                                    active-value="1"
                                    inactive-value="0"
									active-color="#409EFF"
									inactive-color="#F56C6C"
									@change="changeEnabled(scope.row)"
								/>
							</template>
						</el-table-column>
                        <!-- <el-table-column width="80px" align="center" label="操作">
                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="light" content="删除" placement="top">
                                    <i class="iconfont iconshanchu1" @click="handleClick(scope.row)" style="padding:0 10px"></i>
                                </el-tooltip>
                            </template>
                        </el-table-column> -->
					</el-table>
					<div class="pagination">
						<el-pagination
							background
							layout="prev, pager, next,total"
							:total="total"
							:current-page="pageNo"
							:page-size="pageSize"
							@current-change="handleCurrentChange"
						>
						</el-pagination>
					</div>
					<el-dialog
						v-dialogDrag
						:close-on-click-modal="false"
						title="新增个性化配置"
						:visible.sync="gxhVisible"
						width="30%"
					>
						<el-form ref="form" class="addForm" :model="form" label-width="100px">
							<el-form-item label="个性化标题">
								<el-input v-model="form.title"></el-input>
							</el-form-item>
							<el-form-item label="个性化代码">
								<el-input v-model="form.code"></el-input>
							</el-form-item>
							<el-form-item label="是否开启">
								<el-switch v-model="form.open" active-value="1" inactive-value="0" ></el-switch>
							</el-form-item>
							<el-form-item label="备注">
								<el-input v-model="form.bz"></el-input>
							</el-form-item>
						</el-form>
						<div class="btnGroup">
							<el-button type="primary" @click="addGxhData">确定</el-button>
							<el-button type="primary" @click="gxhVisible = false"
								>取消</el-button>
						</div>
					</el-dialog>
				</div>
			</div>
		<!-- </el-tab-pane> -->
	<!-- </el-tabs> -->
</template>

<script>
import { getGxhList,updateGxh,insertGxh } from "@api/gxhgl";

export default {
	name: "",
	inject: ["getRightTree", "getTreeByBsm"],
	components: {},
	props: {},
	data() {
		return {
			activeName: "zhcx",
			type: "all",
			total: 0,
			pageNo: 1,
			pageSize: 15,
			tableData: [
				{
					title: "宗地坐落必填",
					code: "ZDZLBT",
					bz: "宗地坐落必填",
					open: true,
				},
				{
					title: "宗地附件材料显示",
					code: "ZDFJCLXS",
					bz: "宗地附件材料显示",
					open: false,
				},
			],
			tableHeight: 0,
			queryData: {
				title: "",
                code: "",
			},
            gxhVisible: false,
            //新增数据
            form:{
				title: "",
                code: "",
                open:false,
                bz:''
            },
            //已修改的数据
            hasChanged:[],
		};
	},
	created() {},
	mounted() {
		this.getData(this.queryData);
		this.$nextTick(() => {
			this.tableHeight =
				(document.documentElement.clientHeight || document.body.clientHeight) -
				277;
		});
	},
	methods: {
		//获取数据
		getData() {
			this.queryData.pageSize = this.pageSize;
            this.queryData.pageNo = this.pageNo;
            getGxhList(this.queryData).then((res) => {
                this.tableData = res.result.records
                this.total = res.result.total
                // 查询后重置修改项
                this.hasChanged = [];
            })
            .catch((error) => {});
			//调用查询接口 给tableData赋值 TODO
		},
		//新增个性化配置
		addGxhData() {
            //调用接口 新增个性化配置数据  传入this.form TODO 
            insertGxh(this.form).then((res) => {
                if(res.code == 200){
                    this.$message.success("添加成功")
                    this.gxhVisible = false;
                    this.getData();
                }
            })
            .catch((error) => {});
        },
		//重置查询条件
		reset() {
			this.queryData = {
				title: "",
                code: "",
                pageSize:"15",
                pageNo:"1",
			}
        },
        //翻页
		handleCurrentChange(val) {
            this.pageNo = val;
            this.getData();
        },
		// 是否开启
		changeEnabled(data) {
            if(this.hasChanged.some( i => i.bsm == data.bsm)){
                this.hasChanged.filter(i => i.bsm == data.bsm)
            }else{
                this.hasChanged.push(data);
            }
        },
        //保存修改后的数据
        save(){
            if(this.hasChanged.length < 1){
                this.$message.warning("暂无数据修改")
            }else{
                //接口调用  hasChanged为已修改数据项数组 TODO
                updateGxh(this.hasChanged).then((res) => {
                    if(res.code == 200){
                        this.$message.success("修改成功")
                    }
                    this.getData();
                })
                .catch((error) => {});
            }
        },
        //删除
        handleClick(row){
            //调用删除个性化数据接口，row是整条记录，需要id或者bsm自取 TODO
        }
	},
	computed: {},
	watch: {},
};
</script>
<style scoped lang="less">
.main {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 18px 0 0;
	display: flex;
	flex-direction: column;
	//background-color: #F4F9FF;
	background-color: #f4f9ff;

	.el-form {
		width: 100%;
		border: 1px solid #e6e6e6;
		background-color: white;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 10px 15px;
		/deep/.el-form-item {
			margin-bottom: 0;
		}
		/deep/.el-form-item__label {
			width: 100px;
		}
		/deep/ .el-form-item__content {
			width: 300px;
			.el-select {
				width: 100%;
			}
		}
    }
    .addForm{
        border: 0;
		/deep/.el-form-item {
			margin-bottom: 10px;
		}
		/deep/ .el-form-item__content {
            width: auto;
        }
    }
	.tips {
		color: #9b9b9b;
		margin-left: 2px;
		margin-bottom: 10px;
	}
	.demo-form-inline {
		margin: 0 0 18px 0;
		.moreSearchBtn {
			background-color: #1ad6e1;
			border-color: #1ad6e1;
		}
		.moreSearchBtn:focus,
		.moreSearchBtn:hover {
			background-color: rgba(28, 200, 229, 0.6);
		}
	}
	.dataGrid {
		flex: 1;
		.pagination {
			padding: 18px 0;
		}
	}
	.hbjDialog {
		/deep/ .el-dialog {
			margin-top: 10vh !important;
		}
	}
	.btnGroup {
		margin: 20px auto 0;
        width: 230px;
        .el-button+.el-button{
            margin-left: 90px;
        }
	}
	.ml20 {
		margin-left: 20px;
    }
    .iconfont{
        cursor: pointer;
    }
}
</style>