<template>
    <div class="mainbox1">
        <template v-if="isFwsxbg">
            <!-- <p class="tips">查询条件</p> -->
            <el-row class="box">
                <el-col :span="24">
                    <el-row>
                        <el-col :span="24">
                            <el-form :inline="true" class="demo-form-inline" label-width="106px">
                                <el-form-item label="宗地编码">
                                    <el-input
                                            v-model="queryData.zddm"
                                            placeholder="输入宗地编码"
                                            @change="query"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="项目名称">
                                    <el-input
                                            placeholder="输入项目名称"
                                            v-model="queryData.xmmc"
                                            @change="query"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="不动产单元号">
                                    <el-input
                                            maxlength="28"
                                            v-model="queryData.bdcdyh"
                                            placeholder="输入不动产单元号"
                                            @change="query"
                                    ></el-input>
                                </el-form-item>
                                <el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
                                <el-button type="warning" @click="reset" icon="el-icon-refresh">重置</el-button>
                                <el-button
                                        type="primary"
                                        @click="moreSearch"
                                >更多查询
                                </el-button>
                                <!-- @click="ismore = !ismore" -->
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="row3"  v-if="ismore">
                        <el-col :span="22">
                            <el-form :inline="true" class="demo-form-inline" label-width="106px">
                                <el-form-item label="权利人名称">
                                    <el-input
                                            placeholder="输入权利人名称"
                                            v-model="queryData.qlrmc"
                                            @change="query"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="坐落">
                                    <el-input
                                            v-model="queryData.zl"
                                            placeholder="输入坐落地址"
                                            @change="query"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="不动产权证号">
                                    <el-input
                                            placeholder="输入不动产权证号"
                                            v-model="queryData.bdcqzh"
                                            @change="query"
                                    ></el-input>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="2" :offset="offset">
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <!-- <p class="tips">查询列表</p> -->
            <div class="dataGrid" ref="dataGrid">
                <el-table
                        :data="tableData"
                        :height="tableHeight"
                        :row-class-name="tableRowClassName"
                >
                    <el-table-column type="index" width="80" align="center" label="序号">
                    </el-table-column>
                    <el-table-column prop="bdcdyh" align="left" label="不动产单元号">
                    </el-table-column>
                    <el-table-column prop="xmmc" align="left" width="150" label="项目名称">
                    </el-table-column>
                    <el-table-column prop="bdcqzh" align="left" label="不动产权证号">
                    </el-table-column>
                    <!--<el-table-column prop="dylx" align="left" width="120" label="类型">
                        <template slot-scope="scope">
                            {{ scope.row.dylx | bdcLxFilter }}
                        </template>
                    </el-table-column>-->
                    <el-table-column prop="qlrmc" align="left" width="120" label="权利人">
                    </el-table-column>
                    <el-table-column prop="zl" align="left" label="坐落"></el-table-column>
                    <el-table-column
                            prop="addtime"
                            align="left"
                            width="120"
                            label="转入时间"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.addtime | timeFilter }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="cjr" align="left" width="120" label="创建人">
                    </el-table-column> -->
                    <el-table-column label="操作" align="center" width="100">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="light" content="办理" placement="top">
                                <i class="iconfont iconbanli iconfontEdit" @click="handleClick(scope.row)" style="padding:0 10px"></i>
                            </el-tooltip>
                            <el-tooltip class="item" effect="light" content="定位" placement="top">
                                <i class="iconfont icondingwei iconfontEdit"></i>
                            </el-tooltip>
                            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small"
                                >办理
                            </el-button>
                            <el-button type="text" size="small">定位</el-button> -->
                        </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>
            </div>
        </template>
        <div class="lpb"  v-if="!isFwsxbg">
            <div class="lpb-header">
                <el-radio-group  v-model="scyclx" @change="scyclxChange">
                    <el-radio-button label="0">预测</el-radio-button>
                    <el-radio-button label="1">实测</el-radio-button>
                </el-radio-group>
                <el-input
                        maxlength="28"
                        v-model="bdcdyh"
                        :style="{ width: inputWidth + 'px' }"
                        class="searchInput"
                        placeholder="输入不动产单元号或室号"
                ><i
                        slot="suffix"
                        class="el-input__icon el-icon-search"
                        @click="inputChange"
                ></i
                ></el-input>
                <el-link type="primary" style="margin-left:20px" @click="isFwsxbg=true">重新选择户</el-link>
            </div>
            <div class="lpb-content" ref="lpbContentWrap" :style="{ height: lpbContentHeight + 'px' }"  v-loading="lpbloading">
                <!-- 楼盘表主体 -->
                <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
                    <lpbContent ref="lpbContent" class="" :zrzbsm='zrzbsm' lpbParent = 'isFwsxbg'></lpbContent>
                </div>
                <!-- 右侧图例 -->
                <div class="lp-legend">
                    <div class="handleCol">
                        <div class="btn" @click="legendToggle">
                            <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
                            <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
                        </div>
                        <div
                                :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'"
                                @click="selectedZt = 'dyzt'"
                        >
                            <span>单元状态</span>
                        </div>
                        <div
                                :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'"
                                @click="selectedZt = 'fwxz'"
                        >
                            <span>房屋性质</span>
                        </div>
                        <div
                                :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'"
                                @click="selectedZt = 'fwyt'"
                        >
                            <span>房屋用途</span>
                        </div>
                    </div>
                    <div
                            class="legendTable-wrap"
                            :style="{ width: legendToggleFlag ? '204px' : '0' }"
                    >
                        <table
                                class="legendTable"
                                v-show="selectedZt == 'dyzt'"
                                cellspacing="1"
                                cellpadding="1"
                                border="1"
                        >
                            <tr>
                                <th>状态</th>
                                <th>套数</th>
                                <th>面积</th>
                            </tr>
                            <tr
                                    v-for="(item, index) in dyztList"
                                    :key="index"
                                    class="cp"
                                    @click="handleChoosedH(item.bsms,item.color)"
                            >
                                <td>
                                    <i class="fa fa-circle" :style="{ color: item.color }"></i
                                    >{{ item.name }}
                                </td>
                                <td>{{ item.ts }}</td>
                                <td>{{ item.mj }}</td>
                            </tr>
                        </table>

                        <table
                                class="legendTable"
                                v-show="selectedZt == 'fwxz'"
                                cellspacing="1"
                                cellpadding="1"
                                border="1"
                        >
                            <tr>
                                <th>性质</th>
                                <th>套数</th>
                                <th>面积</th>
                            </tr>
                            <tr
                                    v-for="(item, index) in fwxzList"
                                    :key="index"
                                    class="cp"
                                    @click="handleChoosedH(item.bsms,item.color)"
                            >
                                <td>
                                    <i class="fa fa-circle" :style="{ color: item.color }"></i
                                    >{{ item.name }}
                                </td>
                                <td>{{ item.ts }}</td>
                                <td>{{ item.mj }}</td>
                            </tr>
                            <tr v-show="fwxzList.length < 1">
                                <td colspan="3" class="tac">暂无数据</td>
                            </tr>
                        </table>

                        <table
                                class="legendTable"
                                v-show="selectedZt == 'fwyt'"
                                cellspacing="1"
                                cellpadding="1"
                                border="1"
                        >
                            <tr>
                                <th>用途</th>
                                <th>套数</th>
                                <th>面积</th>
                            </tr>
                            <tr
                                    v-for="(item, index) in fwytList"
                                    :key="index"
                                    class="cp"
                                    @click="handleChoosedH(item.bsms,item.color)"
                            >
                                <td>
                                    <i class="fa fa-circle" :style="{ color: item.color }"></i
                                    >{{ item.name }}
                                </td>
                                <td>{{ item.ts }}</td>
                                <td>{{ item.mj }}</td>
                            </tr>
                            <tr v-show="fwytList.length < 1">
                                <td colspan="3" class="tac">暂无数据</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getSearchList } from "@api/search";
    import { fwsxbgbl } from "@api/common";
    import {getQjHDetailByBsm} from "@api/h";
    import { createProcessInstance } from "@api/user";
    import {queryFwsxbg} from "@api/search"
    import lpbContent from "./../../views/zrz/lpb/bjlp/lpbContent/index"
    import { getLpbMenuTree, batchScYcChange, getLpbTj,batchGeneratorBdcdyh,getLpbFwytAndQlxz ,batchCommit} from "@api/lpb";
    export default {
        name: "fwsxbgTab",
        components: { lpbContent },
        inject:['getRightTree','getTreeByBsm'],
        props: {
            queryType:{
                type:String,
                default:'zd'
            }
        },
        data() {
            return {
                offset: 22,
                ismore: false,
                queryData: {
                    bdcdyh: "",
                    bdcqzh: "",
                    qlrmc: "",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo:this.pageNo,
                    pageSize:this.pageSize,
                    type:this.queryType
                },
                type:'fwsxbg',
                total: 0,
                pageNo: 1,
                pageSize: 15,
                tableData: [],
                tableHeight: "100",
                //queryData: {},
                isFwsxbg:true,
                zrzbsm:'',
                scyclx:'0', //实预测类型
                bdcdyh:'',//室号搜索
                inputWidth: 220,//搜索框宽度
                legendToggleFlag: false,
                selectedZt:'dyzt',
                dyztList: [
                    {
                        name: "未确权",
                        color: "#83AAFE",
                        ts: "12",
                        mj: "1633",
                    },
                    {
                        name: "已确权",
                        color: "#6EDEE1",
                        ts: "22",
                        mj: "3109",
                    },
                    {
                        name: "已备案",
                        color: "#8ADC88",
                        ts: "3",
                        mj: "409",
                    },
                    {
                        name: "预抵押",
                        color: "#F2AD67",
                        ts: "11",
                        mj: "1466",
                    },
                    {
                        name: "在建抵押",
                        color: "#F191C8",
                        ts: "13",
                        mj: "1792",
                    },
                    {
                        name: "抵押",
                        color: "#FF8282",
                        ts: "14",
                        mj: "13",
                    },
                    {
                        name: "查封",
                        color: "#D7CECF",
                        ts: "9",
                        mj: "1436",
                    },
                    {
                        name: "异议",
                        color: "#D4A3EB",
                        ts: "34",
                        mj: "4342",
                    },
                    {
                        name: "限制",
                        color: "#A5A3FB",
                        ts: "2",
                        mj: "285",
                    },
                ],
                fwxzList: [],
                fwytList: [],
                lpbContentHeight: 0,
                lpbContentwidth: 0,
                lpbloading:true,
			    hbsm:'',
                workflowName:'宗地范围属性变更'
            };
        },
        created() {},
        mounted() {
            this.queryData.pageNo = this.pageNo;
            this.queryData.pageSize = this.pageSize;
            this.queryData.type = this.queryType;
            this.getData(this.queryData);
            // console.log(document.documentElement.clientHeight || document.body.clientHeight,'document.documentElement.clientHeight || document.body.clientHeight');
            this.$nextTick(() => {
                this.tableHeight =
                    (document.documentElement.clientHeight || document.body.clientHeight) -
                    342;
                this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 262;
            });
        },
        methods: {
            // 重置
            reset(){
                this.queryData = {
                    bdcdyh: "",
                    bdcqzh: "",
                    qlrmc: "",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    type: this.queryType
                }
            },
            // 查询
            query(){
                this.queryData.pageNo = this.pageNo;
                this.queryData.pageSize = this.pageSize;
                this.queryData.type = this.queryType;
                this.getData(this.queryData)
            },
            // 更多查询
            moreSearch(){
                console.log(this.tableHeight);
                if(this.ismore === true){
                    this.ismore = false;
                    this.tableHeight+=69;
                }else {
                    this.ismore = true;
                    this.tableHeight-=69;
                }
            },
            onSubmit() {},
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex % 2 !== 0) {
                    return "even-row";
                } else {
                    return "";
                }
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNo = val;
                this.queryData.pageNo = val;
                this.getData(this.queryData);
            },
            getData(data) {
                /*data['type'] = this.type
                data["qszt"] = this.qszt;
                getSearchList(data).then((res) => {
                    this.tableData = res.result.records;
                    this.total = res.result.total;
                });*/
                queryFwsxbg(data).then(res=>{
                    if (res.success) {
                        this.tableData = res.result.records;
                        this.total = res.result.total;
                    }
                })
            },
            //获取子组件点击查询触发的事件
         /*   geQuerytData(obj) {
                this.queryData = obj;
                //将obj作为参数调用接口查询表格数据
                this.queryData["pageSize"] = this.pageSize;
                this.pageNo = 1;
                this.queryData["pageNo"] = 1;
                this.getData(this.queryData);
            },*/
            //点击办理
            handleClick(row) {
                let params = { bsm: row.bsm, type: this.queryType, ywlx:"fwsxbg"};
			    this.bdcdyh = row.bdcdyh;
                if(row.dylx == 'h0' || row.dylx == 'h1'){
				    this.hbsm = row.bsm;
                    getQjHDetailByBsm(row.bsm).then((res)=>{
                        if(res.code===200){
                            this.zrzbsm = res.result.zrzbsm;
                            this.isFwsxbg = false;
                            this.$nextTick(()=>{
                                this.scyclx = row.dylx == 'h0' ? '0':'1'
                            })
                        }
                    })
                }else{
                    this.$confirm('是否确定范围属性变更?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        vm.loadingShow('业务办理中');

                        let data = {
                            params:params,
                            workflowName:this.workflowName
                        }

                        // fwsxbgbl(params)
                        //     .then((res) => {
                        //         vm.loadingHide();
                        //         if (res.success) {
                        //             // this.$message({
                        //             // 	message: res.message,
                        //             // 	type: "变更成功",
                        //             // });
                        //             let path = "";
                        //             switch (this.queryType) {
                        //                 case "zrz":
                        //                     this.$store.state.zrzbsm = res.result;
                        //                     this.getTreeByBsm(res.result,this.queryType,'0,1,2');
                        //                     path = "/zrz";
                        //                     break;
                        //                 case "zd":
                        //                     this.$store.state.zdbsm = res.result;
                        //                     this.getRightTree(res.result,'0,1,2');
                        //                     path = "/zd";
                        //                     break;
                        //                 case "dz":
                        //                     this.$store.state.dzbsm = res.result;
                        //                     this.getTreeByBsm(res.result,this.queryType,'0,1,2');
                        //                     path = "/dz";
                        //                     break;
                        //                 default:
                        //                     break;
                        //             }
                        //             this.$router.push({
                        //                 path: path,
                        //                 query: {
                        //                     bsm: res.result,
                        //                     source: 2,
                        //                     auth:'2'
                        //                 }
                        //             });
                        //         } else {
                        //             this.$message({
                        //                 message: res.message,
                        //                 type: "warning",
                        //             });
                        //         }
                        //     })
                        //     .catch((error) => {
                        //         vm.loadingHide();
                        //         this.$message({
                        //             message: res.message,
                        //             type: "error",
                        //         });
                        //     });
                        createProcessInstance(data)
                            .then((res) => {
                                console.log(res);
                                vm.loadingHide();
                                if (res.needShow) {
                                    this.$message({
                                        message: "创建成功！",
                                        type: "success",
                                    });

                                    let path = "";
                                    switch (this.queryType) {
                                        case "zrz":
                                            this.$store.state.zrzbsm = res.processInstance.title;
                                            this.getTreeByBsm(res.processInstance.title,this.queryType,'0,1,2');
                                            path = "/zrz";
                                            break;
                                        case "zd":
                                            this.$store.state.zdbsm = res.processInstance.title;
                                            this.getRightTree(res.processInstance.title,'0,1,2');
                                            path = "/zd";
                                            break;
                                        case "dz":
                                            this.$store.state.dzbsm = res.processInstance.title;
                                            this.getTreeByBsm(res.processInstance.title,this.queryType,'0,1,2');
                                            path = "/dz";
                                            break;
                                        default:
                                            break;
                                    }

                                    this.$router.push({
                                        path: path,
                                        query: {
                                            bsm: res.processInstance.title,
                                            source: 2,
                                            auth:'2',
                                            workitemInstanceId:res.workitemInstance.id
                                        }
                                    });
                                } else {
                                    this.$message({
                                        message: res.message,
                                        type: "warning",
                                    });
                                }
                            })
                            .catch((error) => {
                                vm.loadingHide();
                                this.$message({
                                    message: res.message,
                                    type: "error",
                                });
                            });
                    }).catch(() => {

                    });
                }
            },

            //实预测转换
            scyclxChange(){
                //清空已选中层户
                // this.bsms = [];
                this.$refs.lpbContent.hbsmList = [];
                this.$nextTick(()=>{
                    //户
                    this.$refs.lpbContent.$refs.hBsm.forEach(item=>{
                        item.style.borderColor = 'rgb(230, 230, 230)';
                        if (item.className == "tdSelect") {
                            item.className = "";
                        }
                    });
                    //层
                    this.$refs.lpbContent.$refs.cBsm.forEach(item=>{
                        console.log(item.className,'item.className');
                        item.className = "floor";
                    });
                })
                //获取图例数据
                this.getDyztBsmList();
                this.getLpbFwytAndQlxz();
				//重新渲染楼盘表
				this.$refs.lpbContent.dataChange();
            },
            inputChange() {
                // console.log(this.bdcdyh,'this.bdcdyh');
                if (this.bdcdyh != "") {
                    // console.log("查询" + this.bdcdyh);
                    this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
                } else {
                    this.$message({
                        message: "请输入内容后查询",
                        type: "warning",
                    });
                }
            },
            //图例的展开收起
            legendToggle() {
                this.legendToggleFlag = !this.legendToggleFlag;
            },
            //获取各项单元状态统计数据
            getDyztBsmList() {
                let data = {
                    zrzbsm: this.$store.state.zrzbsm,
                    scyclx: this.scyclx,
                };
                getLpbTj(data).then((res) => {
                    if (res.code === 200) {
                        this.dyztList = res.result;
                        this.dyztList.splice(1,0,this.dyztList[8]);
                        this.dyztList.pop();
                        this.dyztList.forEach(item=>{
                            item.ts = item.bsms.length;
                            switch (item.name) {
                                case 'Qqzt':
                                    item.color = "#6EDEE1";
                                    item.name = "已确权"
                                    break;
                                case 'Wqqzt':
                                    item.color = "#83AAFE";
                                    item.name = "未确权"
                                    break;
                                case 'Bazt':
                                    item.color = "#8ADC88";
                                    item.name = "已备案"
                                    break;
                                case 'Ydyzt':
                                    item.color = "#F2AD67";
                                    item.name = "预抵押"
                                    break;
                                case 'Zjgcdyzt':
                                    item.color = "#F191C8";
                                    item.name = "在建抵押"
                                    break;
                                case 'Dyzt':
                                    item.color = "#FF8282";
                                    item.name = "抵押"
                                    break;
                                case 'Cfzt':
                                    item.color = "#D7CECF";
                                    item.name = "查封"
                                    break;
                                case 'Yyzt':
                                    item.color = "#D4A3EB";
                                    item.name = "异议"
                                    break;
                                case 'Xzzt':
                                    item.color = "#A5A3FB";
                                    item.name = "限制"
                                    break;
                                default:
                                    break;
                            }
                        })
                    }
                });
            },
            // 获取房屋用途和房屋性质统计数据
            getLpbFwytAndQlxz(){
                let data = {
                    zrzbsm: this.$store.state.zrzbsm,
                    scyclx: this.scyclx,
                };
                getLpbFwytAndQlxz(data).then((res) => {
                    if (res.code === 200) {
                        // this.fwytList = res.result
                        this.fwytList = res.result.fwyt;
                        this.fwxzList = res.result.qlxz;
                        if(this.fwytList.length>0){
                            this.fwytList.forEach(item=>{
                                item.color = "#2591FD";
                                item.ts = item.bsms.length
                            })
                        }
                        if(this.fwxzList.length>0){
                            this.fwxzList.forEach(item=>{
                                item.color = "#2591FD";
                                item.ts = item.bsms.length
                            })
                        }
                    }
                });
            },
            //切换房屋状态
            handleChoosedH(bsms,color) {
                //每次切换房屋状态，将之前高亮的户边框颜色重置为默认
                this.$refs.lpbContent.choosedList = [];
                this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
                    item.style.border = '';
                });
                // console.log(bsms,'bsms');
                // console.log(color,'color');
                // Dyzt:{list:[],mj:''}
                //清除选中户
                // this.$refs.lpbContent.clearChoosedH();
                this.$nextTick(()=>{
                    //给hBsmList传值
                    // console.log(bsms,'bsms');
                    this.$refs.lpbContent.choosedList = bsms;
                    this.$refs.lpbContent.borderColor = color;
                })
            },
        },
        computed: {},
        watch: {
            ismore: function(val) {
                if (val) {
                    this.offset = 0;
                } else {
                    this.offset = 22;
                    this.queryData.qlrmc = "";
                    this.queryData.xmmc = "";
                    this.queryData.bdcqzh = "";
                }
            },
            //树结构和图例伸缩时修改楼盘表主要内容区宽度
            legendToggleFlag(n) {
                if (n) {
                    this.lpbContentwidth -= 204;
                } else {
                    this.lpbContentwidth += 204;
                }
            },
            //选择自然幢展示楼盘表后，查询右侧图例数据
            isFwsxbg(n){
                if (!n) {
                    this.getDyztBsmList();
                    this.getLpbFwytAndQlxz();
                    this.$nextTick(()=>{
					    this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 54;
                        this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
                        this.$refs.lpbContent.hbsmList.push(this.hbsm)
                    })
                }
            },
            //改变syclx，更新楼盘表数据
            scyclx(n){
                this.$refs.lpbContent.lpbData = n == 0 ? this.$refs.lpbContent.yclpbData : this.$refs.lpbContent.sclpbData
            },
            selectedZt(n){
                this.legendToggleFlag = true;
            },
            queryType(val){
                console.log(val,"范围属性变更,tab")
                this.queryData.type=val;
                switch (val) {
                    case "zrz":
                        this.workflowName = "自然幢范围属性变更";
                        break;
                    case "zd":
                        this.workflowName = "宗地范围属性变更";
                        break;
                    case "dz":
                        this.workflowName = "多幢范围属性变更";
                        break;
                    default:
                        break;
                }
            }
        },
    };
</script>

<style scoped lang="less">
    .mainbox1{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding:20px;
        //background-color: #F4F9FF;
        background-color: #F4F9FF;
        .box{
            background-color: white;
            padding: 10px 0;
            margin-bottom: 10px;
            border: 1px solid #E6E6E6;
        }
         .tips{
            color: #9B9B9B;
            margin-left: 2px;
            margin-bottom: 10px;
        }
        .demo-form-inline {
            margin-top: 18px;
            .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 0 0;
            }
        }

        .lpb{
            box-sizing: border-box;
            padding-left: 2px;
            .searchInput {
                transition: 0.5s;
                margin-left: 20px;
                display: inline-block;
            }
            .lpb-content{
                margin-top: 20px;
                background-color: #ffffff;
                display: flex;
                border: 1px solid #E6E6E6;
                .lp-overview {
                    transition: 0.5s;
                    flex: 1;
                    margin-right: 20px;
                    box-sizing: border-box;
                    border: 1px solid rgb(236, 236, 236);
                    border-top: 0;
                    border-bottom: 0;
                }
                .lp-legend {
                    transition: 0.5s;
                    height: 100%;
                    font-size: 14px;
                    .handleCol {
                        width: 34px;
                        float: right;
                        height: 100%;
                        .btn {
                            cursor: pointer;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            background-color: #0091ff;
                            color: #fff;
                            border-bottom: 1px solid #e6e6e6;
                        }
                        .dyzt,
                        .fwxz,
                        .fwyt {
                            height: 122px;
                        }
                        .dyzt,
                        .fwxz,
                        .fwyt {
                            cursor: pointer;
                            border-bottom: 1px solid #e6e6e6;
              		        border-left: 1px solid #e6e6e6;
                            span {
                                text-align: center;
                                height: 100%;
                                -webkit-writing-mode: vertical-rl;
                                writing-mode: vertical-rl;
                                line-height: 34px;
                                letter-spacing: 2px;
                            }
                        }
                        .selectedZt {
                            background-color: #0091ff;
                            color: #fff;
                        }
                    }
                    .legendTable-wrap {
                        transition: 0.5s;
                        float: right;
                        overflow: hidden;
                        .legendTable {
                            margin-top: -1px;
                            tr {
                                height: 40px;
                                line-height: 40px;
                                th:first-child {
                                    width: 80px;
                                }
                                th {
                                    width: 60px;
                                    height: 40px;
                                    white-space: nowrap;
                                }
                                td {
                                    height: 40px;
                                    text-align: center;
                                    white-space: nowrap;
                                }
                                td:first-child {
                                    text-align: left;
                                    text-indent: 2px;
                                }
                            }
                        }
                    }
                }
            }

        }
    }
    /*.main {
        background-color: #F4F9FF;
       
    }*/
</style>