<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" class="btnColRight">
              <el-button type="primary" @click="handleContract">查询房屋交易合同</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"
          :key="key"
          :heightNumSetting="true" :minHeight="0" :rowStyleHeight='25'
          :data="qlrList">
        </lb-table>
        <div class="slxx_title title-block">
          出卖人信息
          <div class="triangle"></div>
        </div>
        <lb-table
          :column="clmMsr"
          :key="key1"
          :pagination="false"
          :heightNumSetting="true" :minHeight="0" :rowStyleHeight='25'
          :data="ywrList">
        </lb-table>
        <div class="slxx_title title-block">
          缴税信息
          <div class="triangle"></div>
        </div>
        <lb-table
          :column="clmSwxx"
          :pagination="false"
          :key="key2"
          :heightNumSetting="true" :minHeight="0" :rowStyleHeight='25'
          :data="swxxList">
        </lb-table>
      </div>
    </el-form>
  </div>
</template>
<script>
  import { mapGetters } from "vuex";
  import { getDetail } from "@/api/workflow/swhtxx.js";
  export default {
    computed: {
      ...mapGetters(["dictData", "flag"]),
    },
    mounted () {
      this.viewEdit = this.$parent.currentSelectTab.ableOperation;
      this.propsParam = this.$attrs;
      this.loadData();
    },
    data () {
      return {
        key: 0,
        key1: 1,
        key2: 2,
        ruleForm: {},
        loading: false,
        //表单是否可操作
        viewEdit: false,
        clmMsr: [
          {
            prop: "NSRMC",
            label: "名称",
          },
          {
            prop: "ZJZL_DM",
            label: "证件种类",
          },
          {
            prop: "ZJHM",
            label: "证件号码",
          },
          {
            prop: "LXDH",
            label: "联系电话",
          },
        ],
        clmSwxx: [
          {
            prop: "ywslh",
            label: "业务受理号",
          },
          {
            prop: "kprq",
            label: "开票日期",
          },
          {
            prop: "pzxh",
            label: "凭证序号",
          },
          {
            prop: "zsxmmc",
            label: "征收项目名称",
          },
          {
            prop: "zspmmc",
            label: "征收品目名称",
          },
          {
            prop: "sjje",
            label: "实缴金额",
          },

          {
            prop: "skssqq",
            label: "税款所属日期起",
          },
          {
            prop: "skssqz",
            label: "税款所属日期止",
          },

          {
            prop: "rkrq",
            label: "入库日期",
          },
        ],
        ruleForm: {},
        qlrList: [],
        ywrList: [],
        fwxx: {},
        swxxList: [],
      };
    },
    methods: {
      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;
              this.key++
              this.key1++
              this.key2++
            }
            if (res.result.wqht.jsnr != "" && res.result.wqht.jsnr != null) {
              this.swxxList = JSON.parse(res.result.wqht.jsnr);
            }
          }
        })
      },
      handleContract () {
        this.$popupDialog('合同信息', 'workflow/main/swxx/jyht', { bsmSldy: this.propsParam.bsmSldy }, '50%', true)
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/public.scss";
  @import "~@/styles/slxx/slxx.scss";
</style>