<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>
      <div class="main_box">
        <van-field
          readonly
          v-model="circulation.zjddm"
          label="宅基地代码"
          input-align="right"
        />
        <van-field readonly v-model="circulation.sqrxm" label="申请人姓名" input-align="right" label-width="auto"/>
        <van-field
          readonly
          v-model="circulation.sqrzjlx"
          label="申请人证件类型"
          input-align="right"
          label-width="auto"
        />
        <van-field readonly v-model="circulation.sqrzjhm" label="申请人证件号码" input-align="right" label-width="auto"/>
      </div>
      <p class="main_title">退出信息</p>
      <div class="main_box">
        <van-field
          readonly
          v-model="circulation.tcqllx"
          label="退出权利类型"
          input-align="right"
          label-width="auto"
        />
        <van-field
          readonly
          v-model="circulation.tclx"
          label="退出类型"
          input-align="right"
          label-width="auto"
        />
        <van-field
          readonly
          v-model="circulation.tcfs"
          label="退出方式"
          input-align="right"
          label-width="auto"
        />
        <van-field readonly v-model="circulation.tcmj+'㎡'" label="退出面积" input-align="right" label-width="auto"/>
        <van-field readonly v-model="circulation.tcnx" label="退出年限" input-align="right" label-width="auto"/>
      </div>

      <p class="main_title">补偿信息</p>
      <div class="main_box">
        <van-field
          readonly
          v-model="circulation.bcfs"
          label="补偿方式"
          label-width="auto"
          input-align="right"
        />
        <van-field readonly v-model="circulation.bcje+'元'" label="补偿金额" input-align="right" label-width="auto"/>
        <van-field readonly v-model="circulation.zhfwmj+'㎡'" label="置换房屋面积" input-align="right" label-width="auto"/>
        <van-field readonly v-model="circulation.zhfwzl" label="置换房屋坐落" input-align="right" label-width="auto"/>
        <van-field readonly v-model="circulation.bz" label="备注" input-align="right" label-width="auto"/>
      </div>
    </div>
</template>

<script>
import { getZyyctc } from "@/api/onlineHome/homestead/paidExit";
export default {
  name: "paidExitDetail",
  data() {
    return {
      circulation:[]
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail(){
      getZyyctc(this.$route.query.id).then(response => {
        console.log(response)
        this.circulation = response.data;
        //退出权利类型
        this.houseGetDicts("tcqllx").then((res) => {
          this.circulation.tcqllx = this.selectDictLabel(res.data, response.data.tcqllx);
        });
        //退出类型
        this.houseGetDicts("tclx").then((res) => {
          this.circulation.tclx = this.selectDictLabel(res.data, response.data.tclx);
        });
        //退出方式
        this.houseGetDicts("tcfs").then((res) => {
          this.circulation.tcfs = this.selectDictLabel(res.data, response.data.tcfs);
        });
        //申请人证件类型
        this.houseGetDicts("zjlx").then((res) => {
          this.circulation.sqrzjlx = this.selectDictLabel(res.data, response.data.sqrzjlx);
        });
        //补偿方式
        this.houseGetDicts("bcfs").then((res) => {
          this.circulation.bcfs = this.selectDictLabel(res.data, response.data.bcfs);
        });
        //审核状态
        this.houseGetDicts("audit_status").then((res) => {
          this.circulation.auditStatus = this.selectDictLabel(res.data, response.data.auditStatus);
        });
      });
    }
  },
}
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;

  }
</style>
