<template>
  <div class="root" id = "HOME_XKZ_ALL" >
    <div class="planningPermit-wrap">
      <div class="planningPermit-first" style="display: block; overflow: hidden;" id="planningPermitFirst">
        <div class="permit-main" style="width: 100%;">
          <div class="details_first_main" style="  width: 80%; padding:40px 20px; margin:0 auto; border:1px solid #000000;  height:500px">
            <div class="details_first_title" style=" font-size: 20px; font-weight: bold; text-align: center; line-height: 30px;">中华人民共和国</div>
            <div class="details_first_title" style=" font-size: 20px; font-weight: bold; text-align: center; line-height: 30px;">乡村建设规划许可证</div>
            <div class="details_first_page" style="text-align: right; font-size: 16px; padding: 10px 0 50px;">乡字第 <i style="text-decoration: underline">{{form.xkzbh}}</i> 号</div>
            <div class="details_first_cont" style=" font-size: 16px; line-height: 32px;">根据《中华人民共和国土地管理法》《中华人民共和国城乡规划法》和国家有关规定，经审核，本建设工程符合国土空间规划和用途管制要求，颁发此证。</div>
            <div class="licence_first_jg" style="padding-top: 100px; font-size: 16px; text-align: right;">填发机关:   {{form.fzjg}}</div>
            <div class="licence_first_time" style="font-size: 16px; text-align: right;">日 期:   {{form.fzrq}}</div>
          </div>

        </div>
        <br/>
        <div class="details_page" style=" width: 100%; ">
          <div class="details_page_main" style="width: 80%; padding:40px 20px; margin:0 auto; border:1px solid #000000; font-size: 14px;  height:680px">
            <table >
              <tr>
                <td>建设单位(个人)</td> <td >{{form.jsdw}}</td>
              </tr>
              <tr>
                <td>建设项目名称</td> <td>{{form.jsxmmc}}</td>
              </tr>
              <tr>
                <td>建设位置</td> <td>{{form.jswz}}</td>
              </tr>
              <tr>
                <td>建设规模</td> <td>{{ form.jsgm }}</td>
              </tr>
              <!--                <tr>
                                <td>{{ this.licenseForm.licenseRatification.west }}</td><td>{{ this.licenseForm.licenseRatification.north }}</td>
                              </tr>-->
              <tr>
                <td>附图及附件名称</td>
                <td>
                  <div v-html="'附图及附件名称&emsp;' + form.fjjftmc"></div>
                  <div style="height: 128px;">
                    <img v-if="!!form.xkzsmj" :src="$store.getters.baseRoutingUrl + form.xkzsmj" width="100%" height="100%" style="object-fit: scale-down;" :alt="form.fjjftm"/>
                  </div>
                </td>
              </tr>
            </table>
            <div class="details_first_title" style=" font-size: 20px; font-weight: bold; text-align: left; line-height: 30px;">遵守事项</div>
            <ul style="padding:5px 5px 5px;list-style:none; font-size: 12px; line-height:24px;text-align: start">
              <li style="text-align: start">一、 本证是经自然资源主管部门依法审核，在乡、村庄规划区内有关建设工程符合国土空间规划和用途管制要求的法律凭证。</li>
              <li>二、 依法应当取得本证，但未取得本证或违反本证规定的，均属违法行为。</li>
              <li>三、 未经发证机关审核同意，本证的各项规定不得随意变更。</li>
              <li>四、 自然资源主管部门依法有权查验本证，建设单位（个人）有责任提交查验。</li>
              <li>五、 本证所需附图及附件由发证机关依法确定，与本证具有同等法律效力。</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {date_format} from "@/utils";
import {getCertificate} from "@/api/sunVillage_info/homestead/application";
export default {
  name: "homeXKZPanel",
  data() {
    return {
      id:null,
      src:null,
      loading: false,
      form: {},
      options: {
        land_use: [],
      },
    }
  },
  created() {
    this.id = this.$route.query.id;
    getCertificate(this.id).then((resp) => {
    this.src = resp.data.xcjsghxkz;
    });
    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,
        xkzwzbh: null,
        xkzbh: null,
        fzjg: null,
        fzrq: null,
        jsdw: null,
        jsxmmc: null,
        jswz: null,
        jsgm: null,
        fjjftmc: null,
        xkzsmj: 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));
      }
    },
    InitData(data) {
      this.form = data;
      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;
      }
    },
  },
  computed: {
  },
}
</script>

<style scoped>
.cover-root {
  width: 50%;
  float: left;
}
.content-root {
  width: 50%;
  float: right;
}
.page {
  height: 100%;
  padding: 0 32px;
}
.half {
  float: left;
  width: 50%;
}
.clear-both {
  clear: both;
}
.root >>> td {
  color: #000000;
/*  height: 48px;*/
  line-height: 32px;
  vertical-align: middle;
  white-space: break-spaces;
  word-break: break-all;
  font-size: 14px;
}
.ffield {
/*  background-color: #e6f0fa;*/
  font-size: 14px;
  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: 26px;
  font-weight: bold;
  height: 36px;
  line-height: 36px;
}

.main-title {
  text-align: center;
  font-size: 24px;
  height: 36px;
  line-height: 36px;
}

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

.sub-title {
  text-align: right;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
}

.content {
  padding: 48px 36px 12px;
  height: 600px;
  border: 1px solid #000000;
}

.cover {
  position: relative;
}

.cover .content-text {
  font-weight: bold;
  line-height: 36px;
  font-size: 18px;
  margin-top: 32px;
  text-indent: 2em;
}
.cover .signature {
  position: absolute;
  right: 0;
  bottom: 64px;
}
.cover .signature .content-text {
  font-size: 16px;
  line-height: 32px;
  text-align: left;
  padding-right: 36px;
  margin-top: 18px;
  margin-bottom: 18px;
}
.content-table {
}
.other-content {
  position: absolute;
  bottom: 18px;
  right: 36px;
  left: 36px;
}
.other-content .title {
  font-weight: bold;
  font-size: 18px;
  text-align: left;
  line-height: 48px;
  height: 48px;
}
.other-content .item {
  font-size: 12px;
  line-height: 24px;
}
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;
}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>
