<!--
 * @Description: 交易合同
 * @Autor: renchao
 * @LastEditTime: 2024-03-21 16:57:09
-->
<template>
  <div class='jyht'>
    <el-form :model="queryForm">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="合同号">
            <el-input v-model="queryForm.htbh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="买受人">
            <el-input v-model="queryForm.nsrmc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="证件号码">
            <el-input v-model="queryForm.sfzjhm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="业务号">
            <el-input v-model="queryForm.ywh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" class="btnColRight">
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </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="handleSubmit" plain>保存</el-button>
    </div>
  </div>
</template>
<script>
  import store from '@/store/index.js'
  import { loadQlrxx } from "@/api/workflow/swhtxx.js";
  export default {
    props: {
      formData: {
        type: Object,
        default: {}
      }
    },
    components: {},
    data () {
      return {
        key: 0,
        radioVal: '',
        queryForm: {
          htbh: '',
          nsrmc: '',
          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: '联系电话'
            }
          ]
        },
        queryForm: {
          hth: ''
        }
      }
    },
    mounted () {
      this.handleSearch()
    },
    methods: {
      handleRowClick (val) {
        this.radioVal = row.bsmSqr
      },
      handleSubmit () { },
      handleChange (row) {
        this.radioVal = row.bsmSqr
      },
      handleSearch () {
        function findValueByKey (array, keyToFind) {
          var foundItem = array.find(function (item) {
            return item.dcode === keyToFind;
          });

          return foundItem ? foundItem.dname : undefined;
        }

        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>