<template>
  <div class="main">
      <el-row v-show="isSearch">
          <el-col :span="24">
              <el-form :inline="true" class="demo-form-inline">
                  <el-form-item label="宗地编码">
                      <el-input
                              v-model="queryData.zddm"
                              placeholder="输入宗地编码"
                      ></el-input>
                  </el-form-item>
                  <el-form-item label="不动产权证号">
                      <el-input
                              v-model="queryData.bdcqzh"
                              placeholder="输入不动产权证号"
                      ></el-input>
                  </el-form-item>
                  <el-form-item label="不动产单元号">
                      <el-input
                              maxlength="28"
                              v-model="queryData.bdcdyh"
                              placeholder="输入不动产单元号"
                      ></el-input>
                  </el-form-item>
                  <el-button type="primary" style="margin-left:30px" @click="search">查询</el-button>
                  <el-button type="warning" @click="reset">重置</el-button>
              </el-form>
          </el-col>
      </el-row>
      <div class="dataGrid" v-show="isSearch" 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" label="项目名称">
                </el-table-column>
                <el-table-column prop="bdcqzh" align="left" label="不动产权证号">
                </el-table-column>
                <el-table-column prop="dylx" align="left"  label="类型">
                    <template slot-scope="scope">
                        {{scope.row.dylx | bdcLxFilter}}
                    </template>
                </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>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next,total" :total="total"
                    :current-page="queryData.pageNo"       :page-size="queryData.pageSize"    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
      </div>
      <div class="lpb" v-if="!isSearch">
        <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' }"
						@change="inputChange"
						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="isSearch=true">重新选择自然幢</el-link>
        </div>
        <div class="lpb-content" ref="lpbContentWrap" :style="{ height: lpbContentHeight + 'px' }">
          <!-- 楼盘表主体 -->
          <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
            <lpbContent ref="lpbContent" :zrzbsm='zrzbsm' :isHbfg = true></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 lpbContent from "../../../zrz/lpb/bjlp/lpbContent/index";
import { getLpbMenuTree, batchScYcChange, getLpbTj,batchGeneratorBdcdyh,getLpbFwytAndQlxz ,batchCommit} from "@api/lpb";
export default {
  name:"",
  components:{lpbContent},
  props:{},
  data(){
    return {
      queryData:{
        zddm:'',
        bdcdyh:'',
        bdcqzh:'',
        pageNo:1,
        pageSize:10
      },
      tableData:[],
      total:0,
      tableHeight:0,
      isSearch:true,//办理前/后
      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,
    }
  },
  created(){},
  mounted(){ 
      this.$nextTick(()=>{
          this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 360;
          this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 320;
			    this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6;
      })
  },
  methods:{
    //查询
    search(){
      this.tableData = [
        {
          bdcdyh:'00111111111111111',
          xmmc:'测试自然幢',
          bdcqzh:'A12111111111111111',
          dylx:'zrz',
          zrzbsm:'18cea8b4438ebf838ac86f4ceff90a6b'
        }
      ]
    },
    //重置
    reset(){
      this.queryData = {
        zddm:'',
        bdcdyh:'',
        bdcqzh:'',
        pageNo:1,
        pageSize:10
      };
      this.search()
    },
    //办理
    handleClick(row){
      this.isSearch = false;
      this.zrzbsm = row.zrzbsm;
    },
    //分页
    handleCurrentChange(val) {
        this.pageNo = val;
        this.queryData.pageNo = val;
        this.search();
    },
    //表格行背景色
    tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 !== 0) {
            return "even-row";
        } else {
            return "";
        }
    },
    //实预测转换
    scyclxChange(){

    },
		inputChange() {
			if (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
						})
					}
				}
			});
		}
  },
  computed: {},
  watch: {
		//树结构和图例伸缩时修改楼盘表主要内容区宽度
		legendToggleFlag(n) {
			if (n) {
				this.lpbContentwidth -= 204;
			} else {
				this.lpbContentwidth += 204;
			}
    },
    //选择自然幢展示楼盘表后，查询右侧图例数据
    isSearch(n){
      if (!n) {
        this.getDyztBsmList();
        this.getLpbFwytAndQlxz();
      }
    },
    //改变syclx，更新楼盘表数据
    scyclx(n){
		  this.$refs.lpbContent.lpbData = n == 0 ? this.$refs.lpbContent.yclpbData : this.$refs.lpbContent.sclpbData
    }
  },
}
</script>
<style scoped  lang="less">
.main{
    margin-bottom: 14px;
    .el-row{
      box-sizing: border-box;
      padding-left: 2px;
      margin-bottom: 6px;
    }
    .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;
        overflow-y: scroll;
        .lp-overview {
          transition: 0.5s;
          flex: 1;
          padding-right: 20px;
          box-sizing: border-box;
        }
        .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 {
              height: 81px;
              line-height: 81px;
            }
            .fwxz,
            .fwyt {
              height: 122px;
            }
            .dyzt,
            .fwxz,
            .fwyt {
              cursor: pointer;
              border-bottom: 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;
                }
              }
            }
          }
        }
      }
      
    }
}
</style>