<template>
  <div id="index" ref="appRef">
    <!-- <div class="bg" :style="{
      backgroundImage:
        'url(' + require(`@/assets/${backgroundPic.index}.png`) + ')',
    }"> -->
 <div class="bg">
   <iframe :src="buildUrl" ref="iframe" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
   <div class="body-left"></div>
      <div class="body-right"></div>
      <div class="body-bottom"></div>
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <HeaderIndex :cdata="{ title: '房地资源', margin: '26px auto' }" style="position: relative"/>
        <div class="main" style="margin-top:-80px">
          <div class="left">
            <h1>基础数据展示</h1>
            <BasicBox1 title="土地信息基本展示" :dataSource="dataSource1" />
            <BasicBox1 title="土地权证信息展示" :dataSource="dataSource2" />
            <BasicBox1 title="土地资产信息展示" :dataSource="dataSource3" />
          </div>

          <div class="right">
            <h1>房地项目全生命周期管理</h1>
            <!-- <BasicBox1 title="土地使用保管单位" :dataSource="dataSource4" /> -->
            <!-- <BasicBox1 title="系统填报进度" :dataSource="dataSource5">
              <template slot="top">
                <div class="progress">

                  <span>可行性研究</span>
                  <span>编制计划</span>
                  <span>初步设计</span>
                  <span>服务采购</span>
                  <span>建设手续</span>
                  <span>造价管理</span>
                  <span class="safe">安全管理</span>
                  <span>进度管理</span>
                  <span>施工图管理</span>
                  <span>竣工管理</span>
                  <span>质量管理</span>
                  <div class="safeIcon"></div>
                </div>
                <div class="rtitle">详细信息</div>
              </template>

            </BasicBox1> -->
            <BasicBox1 title="房产信息基本展示" :dataSource="dataSource4" />
            <BasicBox1 title="房产权证信息展示" :dataSource="dataSource5" />
            <BasicBox1 title="房产资产信息展示" :dataSource="dataSource6" />

          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import * as mockData from "./mock"
import drawMixin from "@/utils/drawMixin";
import headerIndex from "@/components/layout/header.vue";
import BasicBox1 from "@/components/BasicBox1"
import router from "@/router";
export default {
  mixins: [drawMixin],
  data() {
    return {
      buildUrl:this.$route.params.url,
      buildingData:this.$route.params.id,
      backgroundPic: {
        index: "landRes2/bg",
      },
      loading: false,
      ...mockData.default,
      dataSource1:[],
      dataSource2:[],
      dataSource3:[],
      dataSource4:[],
      dataSource5:[],
      dataSource6:[],
      shengdalouData:[
          {
            dataSource1: [
              {
                key: "宗地实物ID",
                value: "010070000000000001182512"
              },
              {
                key: "宗地地址信息",
                value: "江苏省南京市鼓楼区上海路215号"
              },
              {
                key: "宗地取得时间",
                value: "2004年11月01日 "
              },
              {
                key: "宗地规划用途",
                value: "商业服务业设施用地"
              },
              {
                key: "土地性质",
                value: "自有"
              },
              {
                key: "土地使用权类型",
                value: "出让"
              },
              {
                key: "土地实际用途",
                value: "办公用房占地"
              },
              {
                key: "土地等级",
                value: "四级土地"
              },
              {
                key: "获得价格",
                value: "57575万元"
              },
              {
                key: "土地面积",
                value: "6611.1"
              },
              {
                key: "已使用面积",
                value: "6611.1"
              },
              {
                key: "闲置面积",
                value: "0"
              },
            ],
      },
        {
          dataSource2: [
            {
              key: "是否有证",
              value: "是"
            },
            {
              key: "土地不动产证号",
              value: "宁鼓国用（2006）第03345号"
            },
            {
              key: "不动产单元号",
              value: "无"
            },
            {
              key: "土地所有权人",
              value: "国网江苏省电力有限公司"
            },
            {
              key: "宗地地号",
              value: "无"
            },
            {
              key: "宗地图",
              value: "无"
            },
            {
              key: "权证图",
              value: "无"
            },
            {
              key: "使用终止日期",
              value: "无"
            },
            {
              key: "土地实际持有人",
              value: "无"
            },
            {
              key: "附着建筑物数量",
              value: "1"
            },
            {
              key: "无证原因",
              value: "有证"
            },
          ],
        },{
          dataSource3: [
            {
              key: "资产编码",
              value: "270100001441"
            },
            {
              key: "资产原值",
              value: "575750000元"
            },
            {
              key: "资产净值",
              value: "365760000元"
            },
            {
              key: "净值增加方式",
              value: "固定资产增加-基本建设"
            },
          ],
        },{
          dataSource4: [
            {
              key: '实物管理部门',
              value: '后勤部'
            },{
              key: '总(分)部/各单位本部',
              value: '国网江苏电力'
            },
            {
              key: '地市公司/分支机构',
              value: '国网江苏电力本部'
            },
            {
              key: '县级电力公司/其他县级单位',
              value: '无'
            },
            {
              key: '使用保管部门',
              value: '后勤部'
            },
            {
              key: "地址信息",
              value: "江苏省南京市鼓楼区上海路215号"
            },

          ],
        },{
          dataSource5: [
            {
              key: "房产编号",
              value: "1300025762"
            },
            {
              key: "来源",
              value: "自建"
            },
            {
              key: "房产分类",
              value: "调度控制用房"
            },
            {
              key: "房产类型",
              value: "运行调度控制楼"
            },
            {
              key: "建筑面积",
              value: "71177.16"
            },{
              key: "可使用面积",
              value: "71177.16"
            },
            {
              key: "总建筑层数",
              value: "38"
            },
            {
              key: "地上层数",
              value: "35"
            },
            {
              key: "地下层数",
              value: "3"
            },
            {
              key: "建成年份",
              value: "2004"
            },{
              key: "是否有证",
              value: "是"
            },{
              key: "房产（不动产）权证号",
              value: "宁房权证鼓初字第310990号"
            },{
              key: "房产证载人名称",
              value: "国网江苏省电力有限公司"
            },

          ],
        },{
          dataSource6: [
            {
              key: "已使用面积",
              value: "71177.16"
            },
            {
              key: "自用面积",
              value: "71177.16"
            },
            {
              key: "出租面积",
              value: "0"
            },
            {
              key: "被占用面积",
              value: "0"
            },
            {
              key: "闲置面积",
              value: "0"
            },
            {
              key: "资产编码",
              value: "270100001441"
            },
            {
              key: "资产原值",
              value: "575750000元"
            },
            {
              key: "资产净值",
              value: "365760000元"
            },
            {
              key: "资产增加方式",
              value: "固定资产增加-基本建设"
            },
          ],
        }
      ],
      shidalouData:[
        {
          dataSource1: [
            {
              key: "宗地实物ID",
              value: "010070000000000001182512"
            },
            {
              key: "宗地地址信息",
              value: "南京市建邺区奥体大街1号"
            },
            {
              key: "宗地取得时间",
              value: " "
            },
            {
              key: "宗地规划用途",
              value: "科教用地"
            },
            {
              key: "土地性质",
              value: "自有"
            },
            {
              key: "土地使用权类型",
              value: "出让"
            },
            {
              key: "土地实际用途",
              value: "科教用地"
            },
            {
              key: "土地等级",
              value: ""
            },
            {
              key: "获得价格",
              value: ""
            },
            {
              key: "土地面积",
              value: "37272.58"
            },
            {
              key: "已使用面积",
              value: "37272.58"
            },
            {
              key: "闲置面积",
              value: "0"
            },
          ],
        },
        {
          dataSource2: [
            {
              key: "是否有证",
              value: "是"
            },
            {
              key: "土地不动产证号",
              value: "宁雨国用（2006）第00923号"
            },
            {
              key: "不动产单元号",
              value: "无"
            },
            {
              key: "土地所有权人",
              value: "国网江苏省电力有限公司"
            },
            {
              key: "宗地地号",
              value: "无"
            },
            {
              key: "宗地图",
              value: "无"
            },
            {
              key: "权证图",
              value: "无"
            },
            {
              key: "使用终止日期",
              value: "无"
            },
            {
              key: "土地实际持有人",
              value: "无"
            },
            {
              key: "附着建筑物数量",
              value: "1"
            },
            {
              key: "无证原因",
              value: "有证"
            },
          ],
        },{
          dataSource3: [
            {
              key: "资产编码",
              value: ""
            },
            {
              key: "资产原值",
              value: ""
            },
            {
              key: "资产净值",
              value: ""
            },
            {
              key: "净值增加方式",
              value: "固定资产增加-基本建设"
            },
          ],
        },{
          dataSource4: [
            {
              key: '实物管理部门',
              value: ''
            },{
              key: '总(分)部/各单位本部',
              value: '国网江苏电力'
            },
            {
              key: '地市公司/分支机构',
              value: '国网江苏电力本部'
            },
            {
              key: '县级电力公司/其他县级单位',
              value: '无'
            },
            {
              key: '使用保管部门',
              value: '后勤部'
            },
            {
              key: "地址信息",
              value: "南京市建邺区奥体大街1号"
            },

          ],
        },{
          dataSource5: [
            {
              key: "房产编号",
              value: ""
            },
            {
              key: "来源",
              value: "自建"
            },
            {
              key: "房产分类",
              value: ""
            },
            {
              key: "房产类型",
              value: ""
            },
            {
              key: "建筑面积",
              value: "5689.53"
            },{
              key: "可使用面积",
              value: "5689.53"
            },
            {
              key: "总建筑层数",
              value: ""
            },
            {
              key: "地上层数",
              value: ""
            },
            {
              key: "地下层数",
              value: ""
            },
            {
              key: "建成年份",
              value: ""
            },{
              key: "是否有证",
              value: "是"
            },{
              key: "房产（不动产）权证号",
              value: "宁房权证建初字第421579号"
            },{
              key: "房产证载人名称",
              value: "国网江苏省电力有限公司"
            },

          ],
        },{
          dataSource6: [
            {
              key: "已使用面积",
              value: "56879.53"
            },
            {
              key: "自用面积",
              value: "56879.53"
            },
            {
              key: "出租面积",
              value: "0"
            },
            {
              key: "被占用面积",
              value: "0"
            },
            {
              key: "闲置面积",
              value: "0"
            },
            {
              key: "资产编码",
              value: ""
            },
            {
              key: "资产原值",
              value: ""
            },
            {
              key: "资产净值",
              value: ""
            },
            {
              key: "资产增加方式",
              value: "固定资产增加-基本建设"
            },
          ],
        }
      ],
      fuwudashaData:[
        {
          dataSource1: [
            {
              key: "宗地实物ID",
              value: ""
            },
            {
              key: "宗地地址信息",
              value: "南京市建邺区奥体大街9号"
            },
            {
              key: "宗地取得时间",
              value: " "
            },
            {
              key: "宗地规划用途",
              value: "商业服务业设施用地"
            },
            {
              key: "土地性质",
              value: "自有"
            },
            {
              key: "土地使用权类型",
              value: "出让"
            },
            {
              key: "土地实际用途",
              value: "办公用房占地"
            },
            {
              key: "土地等级",
              value: "四级土地"
            },
            {
              key: "获得价格",
              value: ""
            },
            {
              key: "土地面积",
              value: ""
            },
            {
              key: "已使用面积",
              value: ""
            },
            {
              key: "闲置面积",
              value: "0"
            },
          ],
        },
        {
          dataSource2: [
            {
              key: "是否有证",
              value: "是"
            },
            {
              key: "土地不动产证号",
              value: ""
            },
            {
              key: "不动产单元号",
              value: "无"
            },
            {
              key: "土地所有权人",
              value: "国网江苏省电力有限公司"
            },
            {
              key: "宗地地号",
              value: "无"
            },
            {
              key: "宗地图",
              value: "无"
            },
            {
              key: "权证图",
              value: "无"
            },
            {
              key: "使用终止日期",
              value: "无"
            },
            {
              key: "土地实际持有人",
              value: "无"
            },
            {
              key: "附着建筑物数量",
              value: "1"
            },
            {
              key: "无证原因",
              value: "有证"
            },
          ],
        },{
          dataSource3: [
            {
              key: "资产编码",
              value: ""
            },
            {
              key: "资产原值",
              value: ""
            },
            {
              key: "资产净值",
              value: ""
            },
            {
              key: "净值增加方式",
              value: "固定资产增加-基本建设"
            },
          ],
        },{
          dataSource4: [
            {
              key: '实物管理部门',
              value: '后勤部'
            },{
              key: '总(分)部/各单位本部',
              value: '国网江苏电力'
            },
            {
              key: '地市公司/分支机构',
              value: '国网江苏电力本部'
            },
            {
              key: '县级电力公司/其他县级单位',
              value: '无'
            },
            {
              key: '使用保管部门',
              value: '后勤部'
            },
            {
              key: "地址信息",
              value: "南京市建邺区奥体大街9号"
            },

          ],
        },{
          dataSource5: [
            {
              key: "房产编号",
              value: ""
            },
            {
              key: "来源",
              value: "自建"
            },
            {
              key: "房产分类",
              value: ""
            },
            {
              key: "房产类型",
              value: ""
            },
            {
              key: "建筑面积",
              value: ""
            },{
              key: "可使用面积",
              value: ""
            },
            {
              key: "总建筑层数",
              value: ""
            },
            {
              key: "地上层数",
              value: ""
            },
            {
              key: "地下层数",
              value: ""
            },
            {
              key: "建成年份",
              value: ""
            },{
              key: "是否有证",
              value: "是"
            },{
              key: "房产（不动产）权证号",
              value: ""
            },{
              key: "房产证载人名称",
              value: "国网江苏省电力有限公司"
            },

          ],
        },{
          dataSource6: [
            {
              key: "已使用面积",
              value: ""
            },
            {
              key: "自用面积",
              value: ""
            },
            {
              key: "出租面积",
              value: "0"
            },
            {
              key: "被占用面积",
              value: "0"
            },
            {
              key: "闲置面积",
              value: "0"
            },
            {
              key: "资产编码",
              value: ""
            },
            {
              key: "资产原值",
              value: ""
            },
            {
              key: "资产净值",
              value: ""
            },
            {
              key: "资产增加方式",
              value: "固定资产增加-基本建设"
            },
          ],
        }
      ],
    };
  },
  components: {
    HeaderIndex: headerIndex,
    BasicBox1
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
    this.buildData();
    console.log(this.$route.params.id +'2222')
    console.log(this.shengdalouData[0].dataSource1[0] +'9999')
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    timeFn() {
      // this.timing = setInterval(() => {
      //   this.dateDay = formatTime(new Date(), "HH: mm: ss");
      //   this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
      //   this.dateWeek = this.weekday[new Date().getDay()];
      // }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    /**
     * 切换数据
     */
    buildData(){
      if (this.buildingData == '省大楼'){
        this.dataSource1 = this.shengdalouData[0].dataSource1
        this.dataSource2 = this.shengdalouData[1].dataSource2
        this.dataSource3 = this.shengdalouData[2].dataSource3
        this.dataSource4 = this.shengdalouData[3].dataSource4
        this.dataSource5 = this.shengdalouData[4].dataSource5
        this.dataSource6 = this.shengdalouData[5].dataSource6
      }else if (this.buildingData == '市大楼'){
        this.dataSource1 = this.shidalouData[0].dataSource1
        this.dataSource2 = this.shidalouData[1].dataSource2
        this.dataSource3 = this.shidalouData[2].dataSource3
        this.dataSource4 = this.shidalouData[3].dataSource4
        this.dataSource5 = this.shidalouData[4].dataSource5
        this.dataSource6 = this.shidalouData[5].dataSource6
      }else if (this.buildingData === '服务大厦'){
        this.dataSource1 = this.fuwudashaData[0].dataSource1
        this.dataSource2 = this.fuwudashaData[1].dataSource2
        this.dataSource3 = this.fuwudashaData[2].dataSource3
        this.dataSource4 = this.fuwudashaData[3].dataSource4
        this.dataSource5 = this.fuwudashaData[4].dataSource5
        this.dataSource6 = this.fuwudashaData[5].dataSource6
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/index.scss";
 .body-left{
    background: url('../../../assets/left.png') no-repeat!important;
}
.body-right{
    background: url('../../../assets/right.png') no-repeat!important;
}

.body-bottom{
    background: url('../../../assets/down.png') no-repeat!important;
}
.main {
  display: flex;
  justify-content: space-between;
  .left,
  .right {
    width: 23%;
    padding-right: 20px;
    position: relative;
  }
  .left{
    left: 1%;
  }
  .right {
    //right: 2%;
    h1 {
      left: 25%;

    }

    text-align: left;

    .rtitle {
      font-size: 20px;
      padding-left: 20px;
      height: 40px;
      line-height: 40px;
      background: url("~@/assets/landRes2/mask.png") no-repeat;
      color: #B4E9FF;
      background-size: cover;
    }
  }

  .progress {
    background: url("~@/assets/landRes2/process.png") no-repeat top;
    margin: 20px 0 65px 0;
    height: 165px;
    width: 100%;
    position: relative;

    .safe {
      color: #FECB12;
    }

    .safeIcon {
      width: 20px;
      height: 20px;
      position: absolute;
      display: inline-block;
      left: 110px;
      top: 99px;
      background: url("~@/assets/landRes2/process-step.png") no-repeat center;
    }



    span {
      color: #B3E8FE;
      font-size: 13px;
      position: absolute;
      left: 85px;
      top: 15px;

      &:nth-child(6),
      &:nth-child(2),
      &:nth-child(9) {
        left: 285px;
      }

      &:nth-child(1),
      &:nth-child(5),
      &:nth-child(8) {
        left: 185px;
      }

      &:nth-child(n+4) {
        top: 75px;
      }

      &:nth-child(n+7) {
        top: 120px;
      }

      &:nth-child(n+10) {
        top: 165px;
        left: 185px
      }

      &:nth-child(11) {
        top: 165px;
        left: 285px
      }
    }
  }
}

h1 {
  text-align: center;
  position: absolute;
  top: -40px;
  left: 35%;
  font-size: 22px;
  color: #A5E7ED;
  font-weight: bolder;
  mask-image: -webkit-gradient(linear, top, bottom, from(#ecf9fa), to(#ACF2F8));

}
</style>
