<template>
  <div class="slxx swxx">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      v-Loading="loading"
      :label-position="flag ? 'top' : ''"
      :inline="flag"
      label-width="120px">
      <div class="slxx_con" :class="flag ? 'formMarginBot0' : ''">
        <div class="slxx_title title-block">
          申请信息
          <div class="triangle"></div>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="业务号：">
              <el-input disabled v-model="ruleForm.flow.ywh"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="受理人员：">
              <el-input disabled v-model="ruleForm.slsq.slry"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="受理时间：">
              <el-input disabled v-model="ruleForm.slsq.slsj"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="权利类型：" prop="qllx">
              <el-input disabled v-model="ruleForm.sldy.qllxmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记类型：" prop="djlx">
              <el-input disabled v-model="ruleForm.sldy.djlxmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记情形：" prop="djqx">
              <el-input disabled v-model="ruleForm.slsq.djqxmc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="不动产单元号：">
              <el-input disabled v-model="ruleForm.sldy.bdcdyh"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="原房产证号：">
              <el-input disabled v-model="ruleForm.sldy.ybdcqzsh"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="坐落：">
              <el-input disabled v-model="ruleForm.sldy.zl"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="slxx_title title-block">
          <el-row>
            <el-col :span="20">
             房屋合同信息
          </el-col>
          <el-col :span="4">
            <el-button @click="compare">查询房屋交易合同</el-button>
            </el-col>
         </el-row>
        <div class="triangle"></div>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="房屋类型：">
              <el-input disabled v-model="fwxx.FWLX"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="街道：">
              <el-input disabled v-model="fwxx.JD"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门牌号：">
              <el-input disabled v-model="fwxx.MPH"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="栋号：">
              <el-input disabled v-model="fwxx.DH"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单元号：">
              <el-input disabled v-model="fwxx.DYH"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="楼层：">
              <el-input disabled v-model="fwxx.LC"></el-input>
            </el-form-item>
          </el-col>          
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="房号：">
              <el-input disabled v-model="fwxx.FH"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称：">
              <el-input disabled v-model="fwxx.XMMC"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="面积：">
              <el-input disabled v-model="fwxx.MJ"></el-input>
            </el-form-item>
          </el-col>          
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="房屋性质：">
              <el-input disabled v-model="fwxx.FWXZ"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋用途：">
              <el-input disabled v-model="fwxx.FWYT"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同号：">
              <el-input disabled v-model="fwxx.HTH"></el-input>
            </el-form-item>
          </el-col>
         
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="合同签订时间：">
              <el-input disabled v-model="fwxx.HTQDSJ"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="共有方式：">
              <el-input disabled v-model="fwxx.GYFS"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋坐落：">
              <el-input disabled v-model="fwxx.TDFWZL"></el-input>
            </el-form-item>
          </el-col>          
        </el-row>
        <div class="slxx_title title-block">
          买受人信息
          <div class="triangle"></div>
        </div>
        <lb-table :column="clmSqr" :pagination="false" :heightNumSetting="true"
          :data="qlrList">
        </lb-table>
        <div class="slxx_title title-block">
          出卖人信息
          <div class="triangle"></div>
        </div>
        <lb-table :column="clmSqr" :pagination="false" :heightNumSetting="true"
          :data="ywrList">
        </lb-table>        
        <div class="slxx_title title-block">
          缴税信息
          <div class="triangle"></div>
        </div>
        <lb-table :column="clmSwxx" :pagination="false" :heightNumSetting="true"
          :data="swxxList">
        </lb-table>
      </div>      
    </el-form>
  </div>
</template>
<script>
 import { getDetail } from "@/api/workflow/swhtxx.js";
  import { mapGetters } from "vuex";
  export default {
    computed: {
      ...mapGetters(["dictData", "flag"]),
    },
    mounted () {
      let that = this;
      this.viewEdit = this.$parent.currentSelectTab.ableOperation;
      this.propsParam = this.$attrs;
      getDetail(this.propsParam.bsmSldy).then((res) => {
        if (res.code === 200 && res.result) {
          that.ruleForm = res.result;
          if(res.result.wqht==null){
            return;
          }          
          if(res.result.wqht.htnr!="" && res.result.wqht.htnr!=null){
            let htxx= JSON.parse(res.result.wqht.htnr);
            that.fwxx = htxx[0].h[0];
            that.qlrList = htxx[1].msr;
            that.ywrList = htxx[2].cmr;
          }         
          if(res.result.wqht.jsnr!="" && res.result.wqht.jsnr!=null){
            that.swxxList= JSON.parse(res.result.wqht.jsnr);
          }
        }
      });
    },
    data () {
      return {
        ruleForm: {},
        loading: false,
        //表单是否可操作
        viewEdit: false,
        clmSqr: [
          {
            prop: "NSRMC",
            label: "名称"
          },
          {
            prop: "ZJZL_DM",
            label: "证件种类"
          },
          {
            prop: "ZJHM",
            label: "证件号码"
          },
          {
            prop: "LXDH",
            label: "联系电话"
          },
        ],       
        clmSwxx: [
        {
          prop: "ywslh",
          label: "业务受理号"
        }, 
        {
          prop: "kprq",
          label: "开票日期"
        },       
        {
          prop: "sjje",
          label: "实缴金额"
        },
        {
          prop: "pzxh",
          label: "凭证序号"
        },
        {
          prop: 'skssqq',
          label: "税款所属日期起"
        },
        {
          prop: "skssqz",
          label: "税款所属日期止"
        },
        {
          prop: "zsxmdm",
          label: "征收项目代码"
        },
        {
          prop: "zsxmmc",
          label: "征收项目名称"
        },
        {
          prop: "zspmdm",
          label: "征收品目代码"
        },
        {
          prop: "zspmmc",
          label: "征收品目名称"
        },
        {
          prop: "rkrq",
          label: "入库日期"
        }     
       
        ],
        ruleForm: {
          tableDataList: []
        },
        qlrList:[],
        ywrList:[],
        fwxx:{},
        swxxList:{}
      }
    },
    methods: {
      onSubmit () { }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/public.scss";
  @import "~@/styles/slxx/slxx.scss";
</style>