<!--
  @description: 选择收款单弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2021-3-11-16:41
-->
<template>
  <el-dialog
    :visible.sync="visibleDialog"
    :close-on-click-modal="false"
    :lock-scroll="false"
    title="选择收款单"
    width="1080px"
    append-to-body
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <el-table
      ref="smallTable"
      :data="tableData"
      highlight-current-row
      @row-click="singleElection"
      @current-change="currentChange"
    >
      <el-table-column label="" width="65" align="center">
        <template slot-scope="scope">
          <el-radio v-model="templateSelection" :label="scope.$index">
            &nbsp;
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60"
      />
      <el-table-column
        prop="voucherCode"
        label="收款单号"
        align="center"
        width="160"
      />
      <el-table-column
        prop="bankno"
        label="收款账号"
        min-width="160"
        header-align="center"
      />
      <el-table-column
        prop="bankName"
        label="收款账户名"
        min-width="180"
        header-align="center"
      />
      <el-table-column
        prop="accountOpeningBank"
        label="收款人开户行"
        header-align="center"
        min-width="180"
      />
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="determineReceipt('formData')">
        确 定
      </el-button>
      <el-button @click="visibleDialog=false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getBanknoServiceListInfo } from '@/api/procurement/procurementOrder'
export default {
  name: 'SelectBillDialog',
  props: {
    dialogData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      templateSelection: '', // 单选按钮
      tableData: [],
      visibleDialog: false // 是否打开弹框
    }
  },
  methods: {
    openDialog(supplierId) {
      this.visibleDialog = true
      this.templateSelection = ''
      this.getBanknoService(supplierId)
      this.$nextTick(() => {
        this.$refs.smallTable.setCurrentRow()
      })
    },
    getBanknoService(supplierId) {
      getBanknoServiceListInfo(supplierId).then(res => {
        this.tableData = res.data
      }).catch(() => {
      })
    },
    // 当前选择的信息
    currentChange(val) {
      this.currentData = val
    },
    // 确定收款单
    determineReceipt() {
      if (this.currentData && JSON.stringify(this.currentData) !== '{}') {
        this.$emit('selectBillData', this.currentData)
        this.visibleDialog = false
      } else {
        this.$message({
          message: '请选择收费单',
          type: 'warning'
        })
      }
    },
    // 点击行设置单选按钮选中
    singleElection(row) {
      this.templateSelection = this.tableData.indexOf(row)
    }
  }
}
</script>

<style scoped lang="less">
  /deep/.el-radio__label {
    display: none;
  }
</style>
