<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="clmMsr"
          :pagination="false"
          :heightNumSetting="true"
          :data="qlrList"
        >
        </lb-table>
        <div class="slxx_title title-block">
          出卖人信息
          <div class="triangle"></div>
        </div>
        <lb-table
          :column="clmCmr"
          :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() {
    this.viewEdit = this.$parent.currentSelectTab.ableOperation;
    this.propsParam = this.$attrs;
    this.loadData();
  },
  data() {
    return {
      ruleForm: {},
      loading: false,
      //表单是否可操作
      viewEdit: false,
      clmMsr: [
        {
          prop: "NSRMC",
          label: "名称",
        },
        {
          prop: "ZJZL_DM",
          label: "证件种类",
        },
        {
          prop: "ZJHM",
          label: "证件号码",
        },
        {
          prop: "LXDH",
          label: "联系电话",
        },
      ],
      clmCmr: [
        {
          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: {},
      qlrList: [],
      ywrList: [],
      fwxx: {},
      swxxList: [],
    };
  },
  methods: {
    onSubmit() {},
    loadData() {
      getDetail(this.propsParam.bsmSldy).then((res) => {
        if (res.code === 200 && res.result) {
          this.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);
            this.fwxx = htxx[0].h[0];
            this.qlrList = htxx[1].msr;
            this.ywrList = htxx[2].cmr;
          }
          if (res.result.wqht.jsnr != "" && res.result.wqht.jsnr != null) {
            this.swxxList = JSON.parse(res.result.wqht.jsnr);
          }
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
@import "~@/styles/slxx/slxx.scss";
</style>