<template>
  <div class='jyht'>
    <el-form :model="queryForm">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="行政区">
            <el-input v-model="queryForm.sfzjhm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="业务号">
            <el-input v-model="queryForm.ywh"></el-input>
          </el-form-item>
        </el-col>       
        <el-col :span="8">
          <el-form-item label="用户编号">
            <el-input v-model="queryForm.ywh"></el-input>
          </el-form-item>
        </el-col>       
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="房产证编号">
            <el-input v-model="queryForm.ywh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="房屋坐落（地址）">
            <el-input v-model="queryForm.sfzjhm"></el-input>
          </el-form-item>
        </el-col>           
      </el-row>
    </el-form>
    <lb-table ref="table" @row-click="handleRowClick" :pagination="false" :key="key"
      :column="tableData.columns"
      :data="tableData.data">
    </lb-table>
    <div class="text-center">
      <el-button @click="$popupCacel">取消</el-button>
      <el-button type="primary" @click="handleSearch">保存</el-button>
    </div>
  </div>
</template>
<script>
  import store from '@/store/index.js'
  import { loadQlrxx,queryTransactionDetails } from "@/api/workflow/swhtxx.js";
  export default {
    props: {
      formData: {
        type: Object,
        default: {}
      }
    },
    components: {},
    data () {
      return {
        key: 0,
        radioVal: '',
        queryForm: {
          htbh: '',
          sfzjhm: '',
          ywh: ''
        },
        tableData: {
          data: [],
          columns: [
            {
              label: '选择',
              width: '50px',
              render: (h, scope) => {
                return (
                  <div class="orgColumn">
                    <el-radio onChange={() => { this.handleChange(scope.row) }} v-model={this.radioVal} label={scope.row.bsmSqr}>
                      &ensp;
                    </el-radio>
                  </div>
                )
              }
            },
            {
              prop: 'sqrmc',
              label: '权利人名称',
            },
            {
              prop: 'zjzlmc',
              label: '证件种类'
            },
            {
              prop: 'zjh',
              label: '证件号码'
            },
            {
              prop: 'dh',
              label: '联系电话'
            }
          ]
        }
      }
    },
    mounted () {
      this.loadData()
    },
    methods: {
      handleRowClick (val) {
        this.radioVal = row.bsmSqr;
        this.queryForm.nsrmc= row.sqrmc;
        this.queryForm.sfzjhm= row.zjh;
      },
      handleSearch () { 
        queryTransactionDetails(this.queryForm).then(res => {
          if (res.code === 200 && res.result){
            
          }
        })
      },
      handleChange (row) {
        this.radioVal = row.bsmSqr;
        this.queryForm.nsrmc= row.sqrmc;
        this.queryForm.sfzjhm= row.zjh;
      },
      loadData () {
        function findValueByKey (array, keyToFind) {
          var foundItem = array.find(function (item) {
            return item.dcode === keyToFind;
          });

          return foundItem ? foundItem.dname : undefined;
        }
        this.queryForm.htbh=this.formData.htbh;
        this.queryForm.qxdm=this.formData.qxdm;
        this.queryForm.bsmQlxx=this.formData.bsmQlxx;
        loadQlrxx(this.formData.bsmSldy).then(res => {
          let arr = store.getters.dictData['A30']
          this.tableData.data = res.result
          this.tableData.data.forEach(item => {
            if (item.zjzl) {
              item.zjzlmc = findValueByKey(arr, item.zjzl);
            }
          })
          this.key++
        })
      }
    }
  }
</script>
<style scoped lang='scss'>
  @import "~@/styles/public.scss";
</style>