<template>
  <div class="edit">
      <div class="tab-header">
          <div class="searchContent">
            <el-radio-group v-model="radio1">
                <el-radio-button  class="radioBtn" label="1" border>实测</el-radio-button>
                <el-radio-button  class="radioBtn" label="2" border>预测</el-radio-button>
            </el-radio-group>
            <el-input v-model="bdcdyh" class="searchInput" placeholder="输入不动产单元号"></el-input>
          </div>
          <div>
                <el-button  class="radioBtn" label="1" @click="create" border>创建楼盘</el-button>
                <el-button  class="radioBtn" label="2" border>实预测转换</el-button>
                <el-button  class="radioBtn" label="3" border>批量户</el-button>
                <el-button  class="radioBtn" label="4" border>批量层</el-button>
                <el-button  class="radioBtn" label="5" border>批量室号</el-button>
                <el-button  class="radioBtn" label="6" border>批量坐落</el-button>
                <el-button  class="radioBtn" label="7" border>批量单元号</el-button>
          </div>
      </div>
      <div class="tab-content" :style="{'height':lpbContentHight+'px'}">
          <div class="lp-tree" :class="createFlag ? 'w260':'w0'">
            <LineTree :pd="pd" class="treeData" :islpb = "islpb" ></LineTree>
            <p @click="createFlag = false" style="width:20px;float:left;cursor:pointer;">X</p> 
          </div>
          <div class="lp-overview">
              楼盘单元格
          </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="dyzt">
                    <span>单元状态</span>
                </div>
                <div class="fwxz">
                    <span>房屋性质</span>
                </div>
                <div class="fwyt">
                    <span>房屋用途</span>
                </div>
              </div>
              <div class="legendTable-wrap" :style="{'width':legendToggleFlag ? '204px' : '0'}">
                <table class="legendTable" cellspacing="1" cellpadding="1" border="1">
                    <tr>
                        <th>状态</th>
                        <th>套数</th>
                        <th>面积</th>
                    </tr>
                    <tr v-for="(item,index) in legendList" :key="index">
                        <td><i class="el-icon-star-on" :style="{'color':item.color}"></i>{{item.name}}</td>
                        <td>{{item.ts}}</td>
                        <td>{{item.mj}}</td>
                    </tr>
                </table>
              </div>
          </div>
      </div>
      
		<el-dialog
			title="添加"
			:visible.sync="dialogVisible"
			width="50%"
			center
		>
        <!-- 根据菜单类型（menuType）和右键点击的楼盘类型（treeData.type）来区分弹框内容  -->
        <div class="addCh" v-show="menuType == 'ljz'">
            <addLjz ref="ljz"></addLjz>
        </div>
        <div class="addCh" v-show="menuType == 'zdy'">
            幢单元
        </div>
        <div class="addCh" v-show="menuType == 'ch'">
            层户
        </div>
        <div class="btnGroup">
            <el-button type="primary" @click="saveInfo">保存</el-button>
            <el-button type="primary" @click="resetInfo">重置</el-button>
            <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        </div>
		</el-dialog>
  </div>
</template>

<script>
import LineTree from "../../../../components/lineTree/lineTree";
import addLjz from "../../ljz/index"
import {getLpbMenuTree} from "../../../../api/lpb"
export default {
  name:"",
  components:{LineTree,addLjz},
  props:{},
  data(){
    return {
        radio1:'',
        radio2:'',
        createFlag:false,
        bdcdyh:'',
        islpb:true,
        pd:[], //创建楼盘的树结构数据
        dialogVisible:false,
        menuType:'',
        treeData:{},
        legendList:[
            {
                name:'未确权',
                color:'#2591FD',
                ts:'12',
                mj:'1633'
            },
            {
                name:'已确权',
                color:'#2591FD',
                ts:'22',
                mj:'3109'
            },
            {
                name:'已注销',
                color:'#2591FD',
                ts:'13',
                mj:'1457'
            },
            {
                name:'已备案',
                color:'#2591FD',
                ts:'3',
                mj:'409'
            },
            {
                name:'预抵押',
                color:'#2591FD',
                ts:'11',
                mj:'1466'
            },
            {
                name:'在建抵押',
                color:'#2591FD',
                ts:'13',
                mj:'1792'
            },
            {
                name:'抵押',
                color:'#2591FD',
                ts:'14',
                mj:'13'
            },
            {
                name:'查封',
                color:'#2591FD',
                ts:'9',
                mj:'1436'
            },
            {
                name:'异议',
                color:'#2591FD',
                ts:'34',
                mj:'4342'
            },
            {
                name:'限制',
                color:'#2591FD',
                ts:'2',
                mj:'285'
            },
        ],
        legendToggleFlag:false,
        lpbContentHight:''
    }
  },
  created(){
      window.addEventListener('resize', this.getHeight);
      this.getHeight()
  },
  mounted(){
      this.getLpbMenuTree('d1b82b27f2a6ab7bf3f0e7708c96e46f')
  },
  methods:{
      //获取高度计算lpb内容区高度
      getHeight(){
          this.lpbContentHight = window.innerHeight - 340
      },
      //创建楼盘
      create(){
        this.createFlag = true
      },
      //获取自然幢树结构数据
      getLpbMenuTree(zrzbsm){
          getLpbMenuTree(zrzbsm)
          	.then((res) => {
					this.pd = res.result;
				})
				.catch((error) => {});
      },
      //打开新建楼盘树结构右键菜单唤起的弹框
      openLpbDialog(data,type){
          console.log(data,'data');
          this.treeData = data;
          this.menuType = type;
          this.dialogVisible = true
      },
      //弹框中的保存按钮
      saveInfo(){
          switch (this.menuType) {
              case 'ljz':
                  this.$refs.ljz.onSave(this.$refs.ljz.form,this.treeData.bsm)
                  break;
              case 'zdy':
                  
                  break;
              case 'ch':
                  
                  break;
          
              default:
                  break;
          }
      },
      //弹框中的重置按钮
      resetInfo(){
          switch (this.menuType) {
              case 'ljz':
                  this.$refs.ljz.reset()
                  break;
              case 'zdy':
                  
                  break;
              case 'ch':
                  
                  break;
          
              default:
                  break;
          }
      },
      //关闭弹框
      closeDaialog(){
          this.dialogVisible = false
      },
      //图例的展开收起
      legendToggle(){
          this.legendToggleFlag = !this.legendToggleFlag;
      }
  },
  computed: {},
  destroyed(){
    window.removeEventListener('resize', this.getHeight)
  },
  watch: {
  },
}
</script>
<style scoped  lang="less">
.edit{
    height: 100%;
    background-color: #EAEDF5;
    .tab-header{
        border: 1px solid #DEDEDE;
        border-top: 0;
        box-sizing: border-box;
        padding: 20px 0;
        background-color: #ffffff;
        margin-bottom: 20px;
        .searchContent{
            margin-bottom: 20px;
            .searchInput{
                width: 300px;
                margin-left: 20px;
                display: inline-block;
            }
        }
        .radioBtn{
            margin-left: 20px;
            /deep/.el-radio-button__inner{
                border: 1px solid #DCDFE6;
                border-radius:4px;
                box-shadow: 0 0 0 0 #409EFF!important;
            }
        }
    }
    .tab-content{
        background-color: #ffffff;
        display: flex;
        overflow-y: scroll;
        .lp-tree{
            height: 100%;
            overflow: hidden;
            transition: .5s;
            .treeData{
                margin-top: 20px;
                margin-left: 20px;
                float: left;
            }
        }
        .w0{
            width: 0;
        }
        .w260{
            width: 260px;
        }
        .lp-overview{
            flex: 1;
        }
        .lp-legend{
            transition: .5s;
            height: 100%;
            font-size: 14px;
            .handleCol{
                width: 34px;
                float: right;
                height: 100%;
                .btn{
                    cursor: pointer;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    border-bottom: 1px solid #E6E6E6 ;
                }
                .dyzt{
                    height: 81px;
                    line-height: 81px;
                }
                .fwxz,.fwyt{
                    height: 122px;
                }
                .dyzt,.fwxz,.fwyt{
                    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;
                    }
                }
            }
            .legendTable-wrap{
                transition: .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;
                        }
                    }
                }
            }
        }
    }
    .btnGroup{
        margin: 20px auto 0;
        width: 230px;
    }
}
</style>