<template>
    <div class="app-container">
      <van-nav-bar
        left-arrow
        fixed
        placeholder
        @click-left="$router.back(-1)"
      >
        <template #title>
          <p style="font-weight: bold;">证书查看</p>
        </template>
      </van-nav-bar>

      <van-tabs swipeable animated sticky color="#1D6FE9" title-active-color="#1D6FE9"	>
        <van-tab title="规划许可证">
          <div class="planningPermit-wrap">
            <div class="planningPermit-first" style="display: block; overflow: hidden;" id="planningPermitFirst">
              <div class="permit-main">
                <div class="details_first_main" style="  width: 96%; padding:40px 20px; margin:0 auto; border:1px solid #000000;  height:680px">
                  <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">{{this.licenseForm.licensePermit.licenseKey}}</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;">填发机关:   {{this.licenseForm.licensePermit.issuingAuthority}}</div>
                  <div class="licence_first_time" style="font-size: 16px; text-align: right;">填发时间:   {{this.licenseForm.licensePermit.issueDate}}</div>
                </div>

              </div>
              <div class="details_page" style="margin-top: 0.4rem;">
                <div class="details_page_main" style="width: 96%; padding:40px 20px; margin:0 auto; border:1px solid #000000; font-size: 14px;  height:680px">
                  <table >
                    <tr>
                      <td width="30%">建设单位</td> <td >{{this.licenseForm.licensePermit.constructionUnit}}</td>
                    </tr>
                    <tr>
                      <td>建设项目</td> <td>{{this.licenseForm.licensePermit.constructionUnit}}</td>
                    </tr>
                    <tr>
                      <td>建设位置</td> <td>{{this.licenseForm.licensePermit.constructionLocation}}</td>
                    </tr>
                    <tr>
                      <td>建设规模</td> <td>{{ this.licenseForm.licensePermit.constructionScale }}</td>
                    </tr>
                    <tr>
                      <td>{{ this.licenseForm.licenseRatification.west }}</td><td>{{ this.licenseForm.licenseRatification.north }}</td>
                    </tr>
                  </table>
                  <ul style="padding:50px 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 class="planningPermit-two" id="planningPermitTwo">
              <table style="height:800px">
                <tr>
                  <td style="width:40px">宅<br />基<br />地<br />坐<br />落<br />平<br />面<br />位<br />置<br />图</td>
                  <td></td>
                </tr>
                <tr style="height:80px">
                  <td>备注</td>
                  <td>图中需载明宅基地的具体位置、长宽、四至，并标明与永久性参照物的具体距离。</td>
                </tr>
              </table>
              <ul style="padding:50px 5px 5px;list-style:none; font-size: 12px; line-height:24px;text-align: start; width:90%; margin:0 auto;">
                <li>填写说明：</li>
                <li>1.编号规则:编号数字共16位，前6位数字按照《中华人民共和国行政区划代码》（详见民政部网站www.mca.gov.cn）执行；7-9位数字表示街道（地区）办事处、镇、乡（苏木），按GB/T10114的规定执行；10-13位数字代表证书发放年份；14-16位数字代表证书发放序号。</li>
                <li>2.批准书有效期:指按照本省（区、市）宅基地管理有关规定，宅基地申请批准后农户必须开工建设的时间。</li>
              </ul>
            </div>
          </div>
        </van-tab>
        <van-tab title="宅基地批准书">
          <div class="licenceAround-wrap" style=" display: block; overflow: hidden;" id="licenceAroundWrap">
            <div class="licence_first_page">
              <div class="number-title" style="padding: 0 2%;  height: 45px; line-height: 45px;">
                农宅字 <i style="text-decoration: underline">{{this.licenseForm.licenseRatification.approvalNumber}}</i> 号
              </div>
              <div class="licence_first_main" style="width: 96%; margin: 0 auto; 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;">填发机关:   {{this.licenseForm.licenseRatification.issuingAuthority}}</div>
                <div class="ft_time" style="  text-align: center; line-height: 32px;">填发时间:   {{this.licenseForm.licenseRatification.issueDate}}</div>
              </div>
            </div>
            <div class="licence_two_page">
              <div class="number-title"  style="padding: 0 2%;  height: 45px; line-height: 45px;">
                农宅字 <i style="text-decoration: underline">{{this.licenseForm.licenseRatification.approvalNumber}}</i> 号
              </div>
              <div class="licence_two_main">
                <table>
                  <tr>
                    <td>申请人姓名</td> <td colspan="2">{{this.licenseForm.licenseRatification.memberName}}</td>
                  </tr>
                  <tr>
                    <td>批准用地面积</td> <td colspan="2">{{this.licenseForm.licenseRatification.landArea}} 平方米</td>
                  </tr>
                  <tr>
                    <td>土地所有权人</td> <td colspan="2">{{this.licenseForm.licenseRatification.landOwner}}</td>
                  </tr>
                  <tr>
                    <td>土地用途</td> <td colspan="2">{{ this.landUseFormat(this.licenseForm.licenseRatification.landUse) }}</td>
                  </tr>
                  <tr>
                    <td>土地坐落<br/>(详见附图)</td> <td  colspan="2">{{ this.licenseForm.licenseRatification.location }}</td>
                  </tr>
                  <tr>
                    <td rowspan="2">四  至</td> <td>{{ this.licenseForm.licenseRatification.east }}</td><td>{{ this.licenseForm.licenseRatification.south }}</td>
                  </tr>
                  <tr>
                    <td>{{ this.licenseForm.licenseRatification.west }}</td><td>{{ this.licenseForm.licenseRatification.north }}</td>
                  </tr>
                  <tr>
                    <td>批准书有效期</td><td colspan="2">{{this.licenseForm.licenseRatification.startTime +'至'+this.licenseForm.licenseRatification.endTime }}</td>
                  </tr>
                  <tr style="height: 100px">
                    <td colspan="3">备注</td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="licence_three_page">
              <div  class="number-title"  style="padding: 0 2%;  height: 45px; line-height: 45px;">
                农宅字 <i style="text-decoration: underline">{{this.licenseForm.licenseRatification.approvalNumber}}</i> 号
              </div>
              <table>
                <tr>
                  <td>申请人姓名</td> <td colspan="2">{{this.licenseForm.licenseRatification.memberName}}</td>
                </tr>
                <tr>
                  <td>批准用地面积</td> <td colspan="2">{{this.licenseForm.licenseRatification.landArea}} 平方米</td>
                </tr>
                <tr>
                  <td>土地所有权人</td> <td colspan="2">{{this.licenseForm.licenseRatification.landOwner}}</td>
                </tr>
                <tr>
                  <td>土地用途</td> <td colspan="2">{{ this.landUseFormat(this.licenseForm.licenseRatification.landUse) }}</td>
                </tr>
                <tr>
                  <td>土地坐落<br/>(详见附图)</td> <td  colspan="2">{{ this.licenseForm.licenseRatification.location }}</td>
                </tr>
                <tr>
                  <td rowspan="2">四  至</td> <td>{{ this.licenseForm.licenseRatification.east }}</td><td>{{ this.licenseForm.licenseRatification.south }}</td>
                </tr>
                <tr>
                  <td>{{ this.licenseForm.licenseRatification.west }}</td><td>{{ this.licenseForm.licenseRatification.north }}</td>
                </tr>
                <tr>
                  <td>批准书有效期</td><td colspan="2">{{this.licenseForm.licenseRatification.startTime +'至'+this.licenseForm.licenseRatification.endTime }}</td>
                </tr>
                <tr style="height: 100px">
                  <td colspan="3">备注</td>
                </tr>
              </table>
            </div>
          </div>
        </van-tab>
      </van-tabs>

    </div>
</template>

<script>
import { selectAllLicense } from "@/api/onlineHome/homestead/circulation";
export default {
  name: "applicationList",
  data() {
    return {
      landUseOptions:[],
      licenseForm:{
        "licensePermit": {
          "searchValue": null,
          "createBy": "system",
          "createTime": "2021-06-28 14:41:49",
          "updateBy": "",
          "updateTime": null,
          "params": {},
          "id": 3,
          "applyProposerId": 27,
          "year": "2021",
          "licenseKey": "5001010062021001",
          "issuingAuthority": "system",
          "issueDate": "2021-06-28",
          "constructionUnit": "李新新",
          "constructionItem": "2",
          "constructionLocation": "1",
          "constructionScale": "建筑层数:1建筑面积:1.00建筑高度:1.00",
          "locationPlan": null
        },
        "licenseRatification": {
          "searchValue": null,
          "createBy": "",
          "createTime": "2021-06-28 14:41:49",
          "updateBy": "",
          "updateTime": null,
          "params": {},
          "id": 3,
          "applyProposerId": 27,
          "year": "2021",
          "approvalNumber": "5001010062021001",
          "issuingAuthority": "system",
          "issueDate": "2021-06-28",
          "memberName": "李新新",
          "landArea": 111.00,
          "landOwner": "李新新",
          "landUse": "072",
          "location": "1",
          "east": "11",
          "west": "11",
          "south": "1111",
          "north": "111",
          "startTime": "2021-06-28",
          "endTime": "2022-06-28",
          "remark": null
        },
      },
      activeName:"first",
    };
  },
  mounted() {
    this.getDicts("land_use").then((resp) => {
      this.landUseOptions = resp.data;
    });
    selectAllLicense(this.$route.query.id).then((response) => {
      console.log(response.data)
      this.licenseForm = response.data;
      this.updatePermitOpen = true;
      this.updatePermitTitle = "修改许可证";
    });
  },
  methods: {
    landUseFormat(key) {
      return this.selectDictLabel(this.landUseOptions,key);
    },
  }
}
</script>

<style scoped>
  .app-container {
    padding-bottom: 5%;
  }
  .main-box{
    padding: 4% 3%;
    background-color: #FFF;
    margin-top: 0.3rem;
  }

  table {
    line-height: 25px;
    text-align: center;
    border-collapse: collapse;
    width:96%;
    border-collapse:collapse;
    text-align:center;
    margin:0 auto;
  }
  td {
    line-height: 36px;
    border: 1px solid #000000;
    border-collapse: collapse;
    padding: 15px 0;
  }
  .planningPermit-two{
    margin-top: 30px;
  }
</style>
