<template>
  <div class="zdxx" id="printMe">
    <div class="tablebox">
      <div class="print-title">不动产登记申请书</div>
      <div style="display:flex">
        <div>
          <table cellpadding="0" cellspacing="0" class="printTable">
            <col width="60" />
            <col width="80" />
            <col width="200" />
            <col width="100" />
            <col width="160" />     
            <tr>
              <td rowspan="2">收件</td>
              <td>编号</td>
              <td>1111</td>
              <td rowspan="2">收件人</td>
              <td rowspan="2">123</td>            
            </tr>
            <tr>
              <td>日期</td>
              <td></td>
            </tr>
          </table>
        </div>
        <div class="print-unit">
          单位：
          <i class="el-icon-check" style="color:red;font-size:16px"></i>平方米  
          <span class="check-box"></span>公顷（<span class="check-box"></span>亩）、万元  
        </div>
      </div>
      <div style="margin-top:20px"></div>
      <table cellpadding="0" cellspacing="0" class="printTable">
        <col width="80" />
        <col width="140" />
        <col width="200" />
        <col width="80" />
        <col width="60" />
        <col width="20" />
        <col width="200" />    
        <tr>
          <td rowspan="2" class="left-title">申请登记事由</td>
          <td colspan="6" class="text-left">
            <span v-for="item in ywlxList" :key="item.value" style="margin:0px 8px">
              <i class="el-icon-check" style="color:red;font-size:16px" v-if="item.checked"></i>
              <span class="check-box" v-else></span>
              {{item.name}}
            </span>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="text-left">
            <span v-for="item in djlxList" :key="item.value" style="margin:0px 8px">
              <i class="el-icon-check" style="color:red;font-size:16px" v-if="item.checked"></i>
              <span class="check-box" v-else></span>
              {{item.name}}
            </span>
          </td>
        </tr>
        <tr>
          <td rowspan="14" class="left-title">申请人情况</td>
          <td colspan="6"  class="inline-title">登记申请人</td>
        </tr>
        <tr>
          <td>权利人姓名（名称）</td>
          <td colspan="5">张三</td>
        </tr>
        <tr>
          <td>身份证件种类</td>
          <td>身份证</td>
          <td>证件号</td>
          <td colspan="3">3438475835XXXXXXX</td>
        </tr>
        <tr>
          <td>通讯地址</td>
          <td colspan="2">山西省系撒大大</td>
          <td colspan="1">邮编</td>
          <td colspan="2">A700001</td>
        </tr>
        <tr>
          <td>法定代表人或负责人</td>
          <td>张三</td>
          <td>联系电话</td>
          <td colspan="3">134548543</td>
        </tr>
        <tr>
          <td>代理人姓名</td>
          <td>里斯</td>
          <td>联系电话</td>
          <td colspan="3">134548543</td>
        </tr>
        <tr>
          <td>代理机构名称</td>
          <td colspan="5">buzhdiao</td>
        </tr>
        <tr>
          <td colspan="7" class="inline-title">登记申请人</td>
        </tr>
        <tr>
          <td>义务人姓名（名称）</td>
          <td colspan="5">张三</td>
        </tr>
        <tr>
          <td>身份证件种类</td>
          <td>身份证</td>
          <td>证件号</td>
          <td colspan="3">3438475835XXXXXXX</td>
        </tr>
        <tr>
          <td>通讯地址</td>
          <td colspan="2">山西省系撒大大</td>
          <td colspan="1">邮编</td>
          <td colspan="2">A700001</td>
        </tr>
        <tr>
          <td>法定代表人或负责人</td>
          <td>张三</td>
          <td>联系电话</td>
          <td colspan="3">134548543</td>
        </tr>
        <tr>
          <td>代理人姓名</td>
          <td>里斯</td>
          <td>联系电话</td>
          <td colspan="3">134548543</td>
        </tr>
        <tr>
          <td>代理机构名称</td>
          <td colspan="5">buzhdiao</td>
        </tr>
        <tr>
          <td rowspan="6" class="left-title">不动产情况</td>
        </tr>
        <tr>
          <td>坐落</td>
          <td colspan="5">buzhdixxxxo</td>
        </tr>
        <tr>
          <td>不动产单元号</td>
          <td>000001号</td>
          <td>不动产类型</td>
          <td colspan="3">房屋</td>
        </tr>
        <tr>
          <td>面积</td>
          <td>111.3㎡</td>
          <td>用途</td>
          <td colspan="3">城镇住宅用地</td>
        </tr>
        <tr>
          <td>原不动产权属证书号</td>
          <td>xxxx号</td>
          <td>用海类型</td>
          <td colspan="3"></td>
        </tr>
        <tr>
          <td>构筑物类型</td>
          <td></td>
          <td>林种</td>
          <td colspan="3"></td>
        </tr>
        <tr>
          <td class="left-title">抵押情况</td>
          <td>被担保债权数额（最高债权数额）</td>
          <td></td>
          <td colspan="2">债务履行期限（债权确定期间）</td>
          <td colspan="2"></td>
        </tr>
      </table>
      <button type="primary" @click="test()"> test</button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getLodop } from "@/utils/LodopFuncs";
export default {
  components: {},
  computed: {
    ...mapGetters(['dictData'])
  },
  mounted() {
    console.log(this.dictData['A8']);
    
  },
  data () {
    return {
      ywlxList: [
        {name: '国有建设用地使用权',value: 'A03',checked:true},
        {name: '国有建设用地使用权/房屋所有权',value: 'A04',checked:false},
      ],
      djlxList: [
        {name: '首次登记',value: '100',checked:true},
        {name: '转移登记',value: '200',checked:false},
        {name: '变更登记',value: '300',checked:false},
        {name: '注销登记',value: '400',checked:false},
        {name: '更正登记',value: '901',checked:false},
        {name: '异议登记',value: 'B',checked:false},
        {name: '预告登记',value: '902',checked:false},
        {name: '查封登记',value: 'B39',checked:false},
        {name: '其他___________',value: '99',checked:false},
      ]
    }
  },
  methods: {
    test(){
      let lodop = getLodop();
      lodop.PRINT_INIT("测试");
      lodop.ADD_PRINT_HTM(88,200,350,600,document.getElementById("printMe").innerHTML);
      lodop.PREVIEW();
    }

  }
}
</script>
<style scoped lang='scss'>
.zdxx {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding: 5px;
}

.print-title{
  font-size: 24px;
  font-weight: bolder;
  margin: 20px 0px;
}

.print-unit{
  line-height: 60px;
  margin-left: 20px;
  font-size: 14px;
}

.left-title{
  font-size: 16px
}

.inline-title{
  font-size:16px;
  font-weight: bolder;
}

.text-left {
  text-align: left;
}

.check-box {
  display: inline-block;
  border: 1px solid rgb(114, 113, 113);
  border-radius: 2px;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
}


.tablebox {
  overflow-x: auto;
  width: 100%;
  height: 100%;
  background: #fff;
  text-align: center;
  padding: 4px;
  overflow-y: scroll;

  .printTable {
    width: 100%;
    color: #333;

    td {
      border: 1px solid rgb(194, 191, 191);
      line-height: 30px;
      padding: 0 4px;
    }

    .title {
      line-height: 68px;
      font-size: 20px;
    }

    .unit {
      text-align: right;
    }

    .title2 {
      writing-mode: vertical-lr;
      letter-spacing: 6px;
    }

    .bhqk {
      padding: 0;

      .box {
        width: 745px;
        overflow: auto;
      }

      .test {
      }

      table {
        .bhqkTh {
          width: 110px;
          line-height: 40px;
          background-color: #f5f5f5;
          border: 1px solid rgb(228, 228, 228);
          font-weight: bold;
        }

        td {
          width: 180px;
        }
      }
    }
  }
}
</style>