<template>
  <div class="root" id = "HOME_PZS_All" >
    <div class="licenceAround-wrap" style=" display: block; overflow: hidden;" id="licenceAroundWrap">
      <div class="licence_first_page" style=" width: 98%; margin-right: 2%;">
        <div class="details_first_title" style=" font-size: 20px; font-weight: bold; text-align: center; line-height: 30px;">农村宅基地批准书</div>
        <div class="number-title" style="  height: 45px; line-height: 45px;">
          农宅字 <i style="text-decoration: underline">{{form.pzsbh}}</i> 号
        </div>
        <div class="licence_first_main" style="border:1px solid #000000;  padding:70px 20px;">
          <div class="content" style="  line-height: 36px; padding-top: 10px; text-align: center;">
            根据《中华人民共和国土地管理法》规定，本项农村村民宅基地用地  业经有权机关批准，特发此书。
            请严格按照本批准书要求使用宅基地。</div>
          <div class="ft_jg" style=" margin-top: 90px; text-align: center; line-height: 32px;">填发机关:   {{form.tfjg}}</div>
          <div class="ft_time" style="  text-align: center; line-height: 32px;">填发时间:   {{form.tfrq}}</div>
        </div>
      </div>
      <div class="details_first_title" style=" font-size: 20px; font-weight: bold; text-align: center; line-height: 30px;">农村宅基地批准书（存根2）</div>
      <div class="licence_two_page" style=" width: 98%; margin-right: 2%; ">
        <div class="number-title"  style="  height: 45px; line-height: 45px;">
          农宅字 <i style="text-decoration: underline">{{form.pzsbh}}</i> 号
        </div>
        <div class="licence_two_main">
          <table>
            <tr>
              <td>申请人姓名</td> <td colspan="2">{{form.hzxm}}</td>
            </tr>
            <tr>
              <td>批准用地面积</td> <td colspan="2">{{form.pzmj}} 平方米</td>
            </tr>
            <tr>
              <td>其中：房基占地</td> <td colspan="2">{{form.fjzdmj}} 平方米</td>
            </tr>
            <tr>
              <td>土地所有权人</td> <td colspan="2">{{form.tdsuyqr}}</td>
            </tr>
            <tr>
              <td>土地用途</td> <td colspan="2">{{selectDictLabel(options.land_use, form.tdyt)}}</td>
            </tr>
            <tr>
              <td>土地坐落<br/>(详见附图)</td> <td  colspan="2">{{ form.tdzl }}</td>
            </tr>
            <tr>
              <td rowspan="2">四  至</td> <td>东:{{ form.pzzjdszd }}</td><td>南:{{ form.pzzjdszs }}</td>
            </tr>
            <tr>
              <td>西:{{ form.pzzjdszx }}</td><td>北:{{ form.pzzjdszn }}</td>
            </tr>
            <tr>
              <td>批准书有效期</td><td colspan="2">{{form.pzsyxqkssj +'至'+form.pzsyxqjssj }}</td>
            </tr>
            <tr style="height: 100px" >
              <td colspan="3" style="text-align: left;">备注:</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="licence_three_page" style="width: 100%;">
        <div  class="number-title"  style="  height: 45px; line-height: 45px;">
          农宅字 <i style="text-decoration: underline">{{form.pzsbh}}</i> 号
        </div>
        <table>
          <tr>
            <td>申请人姓名</td> <td colspan="2">{{form.hzxm}}</td>
          </tr>
          <tr>
            <td>批准用地面积</td> <td colspan="2">{{form.pzmj}} 平方米</td>
          </tr>
          <tr>
            <td>房基占地面积</td> <td colspan="2">{{form.fjzdmj}} 平方米</td>
          </tr>
          <tr>
            <td>土地所有权人</td> <td colspan="2">{{form.tdsuyqr}}</td>
          </tr>
          <tr>
            <td>土地用途</td> <td colspan="2">{{selectDictLabel(options.land_use, form.tdyt)}}</td>
          </tr>
          <tr>
            <td>土地坐落<br/>(详见附图)</td> <td  colspan="2">{{ form.tdzl }}</td>
          </tr>
          <tr>
            <td rowspan="2">四  至</td> <td>东:{{ form.pzzjdszd }}</td><td>南:{{ form.pzzjdszs }}</td>
          </tr>
          <tr>
            <td>西:{{ form.pzzjdszx }}</td><td>北:{{ form.pzzjdszn }}</td>
          </tr>
          <tr>
            <td>批准书有效期</td><td colspan="2">{{form.pzsyxqkssj +'至'+form.pzsyxqjssj }}</td>
          </tr>
          <tr style="height: 100px">
            <td colspan="3" style="text-align: left;">备注2:</td>
          </tr>
        </table>
      </div>
    </div>

  </div>
</template>

<script>
import {date, date_format} from "@/utils";
import {getCertificate} from "@/api/sunVillage_info/homestead/application";
export default {
  name: "homePZSPanel",
  data() {
    return {
      loading: false,
      src:null,
      form: {},
      options: {
        land_use: [],
      },
    }
  },
  created() {
    this.id = this.$route.query.id;
    getCertificate(this.id).then((resp) => {
      this.src = resp.data.nczjdpzs;
    });
    this.InitOptions();
    this.GetData();
  },
  watch: {
    src: function(newVal) {
      this.GetData();
    },
  },
  methods: {
    InitOptions() {
      for(let k in this.options)
      {
        this.getDicts(k).then((resp) => this.options[k] = resp.data);
      }
    },
    Reset() {
      this.form = {
        id: null,
        ydjfsqId: null,
        ysdm: null,
        ywh: null,
        pzswzbh: null,
        pzsbh: null,
        tfjg: null,
        tfrq: null,
        hzxm: null,
        pzmj: null,
        fjzdmj: null,
        tdsuyqr: null,
        tdyt: null,
        tdzl: null,
        tdzlft: null,
        pzzjdszd: null,
        pzzjdszx: null,
        pzzjdszs: null,
        pzzjdszn: null,
        pzsyxqkssj: null,
        pzsyxqjssj: null,
        pzssmj: null,
        bz: null,
        deptId: null,
        deptName: null,
        bookId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
    },
    GetData() {
      this.Reset();
      if(!this.src)
        return;
      if(typeof(this.src) === 'object')
      {
        this.$nextTick(() => this.InitData(this.src));
      }
    },
    // 土地用途 字典 land_use字典翻译
    tdytFormat(row) {
      return this.selectDictLabel(this.options.land_use, row.tdyt);
    },
    InitData(data) {
      this.form = data;
      let tdytName = this.tdytFormat(this.form);
      this.$set(this.form, "tdytName", tdytName);
      if(this.villageEditable)
      {
        this.form.cjxzscsj = date_format(null, '%Y-%m-%d');
        this.form.cjxzscr = this.$store.getters.nickName;
      }
      if(this.groupEditable)
      {
        this.form.cmxzscsj = date_format(null, '%Y-%m-%d');
        this.form.cmxzscr = this.$store.getters.nickName;
      }
    },
    FormatDate(d) {
      return date(d, '%Y-%m-%d', '%Y年%m月%d日')
    },
  },
  computed: {
  },
}
</script>

<style scoped>
.cover-root {
  width: 32%;
  float: left;
}
.content-root {
  width: 68%;
  float: right;
}
.first {
  width: 50%;
  float: left;
}
.second {
  width: 50%;
  float: right;
}
.page {
  height: 100%;
  padding: 0 20px;
}
.half {
  float: left;
  width: 50%;
}
.clear-both {
  clear: both;
}
td {
  color: #000000;
/*  height: 48px;*/
  line-height: 36px;
  vertical-align: middle;
  white-space: break-spaces;
  word-break: break-all;
  font-size: 14px;
}
.ffield {
/*  background-color: #e6f0fa;*/
  font-size: 16px;
  text-align: center;
  white-space: break-spaces;
  word-break: break-all;
}
.no {
  font-style: italic;
  text-decoration: underline;
}

.right-align {
  text-align: right;
}
.center-align {
  text-align: center;
}

.title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  height: 48px;
  line-height: 48px;
}

.root {
  color: #000000;
  font-family: "方正黑体";
}

.sub-title {
  text-align: left;
  font-size: 16px;
  height: 36px;
  line-height: 36px;
}

.content {
  padding: 32px 18px 12px;
  height: 193px;
}

.cover {
  border: 1px solid #000000;
  position: relative;
}

.cover .content-text {
  line-height: 36px;
  font-size: 18px;
  margin-top: 20px;
  text-indent: 2em;
}
.cover .signature {
  position: absolute;
  right: 0;
  bottom: 64px;
}
.cover .signature .content-text {
  font-weight: bold;
  font-size: 16px;
  line-height: 32px;
  text-align: right;
  padding-right: 24px;
  margin-top: 18px;
  margin-bottom: 18px;
}
.content-table {
  height: 100%;
}
table {
  line-height: 25px;
  text-align: center;
  border-collapse: collapse;
  width:90%;
  border-collapse:collapse;
  text-align:center;
  margin:0 auto;
}
td {
  line-height: 36px;
  border: 1px solid #000000;
  border-collapse: collapse;
}

.location-plan-preview-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  opacity: 0;
}
.location-plan-preview-title:hover {
  opacity: 0.8;
}

.location-plan-preview-content {
  width: 100%;
  height: 100%;
}
.location-plan-preview {
  width: 100%;
  height: 100%;
  position: relative;
}
.list__item-content {
  font-size: 14px;
  line-height: 18px;
  word-break: break-all;
  padding: 2px;
  text-align: left;
  margin-left: 2px;
}
</style>
