<template>
  <div class="tabs-content">
    <block-header title="基本信息">

    </block-header>
    <div class="block-box">
      <table class="table">
        <tr>
          <td>姓名:</td>
          <td>{{ basicInfo.name }}</td>
          <td>身份证号:</td>
          <td>{{ basicInfo.idCard }}</td>
          <td>手机号:</td>
          <td>{{ basicInfo.phone }}</td>
        </tr>
        <tr>
          <td>实名认证:</td>
          <td>
            <el-tag size="mini" type="danger" v-if="basicInfo.isIdentity==='未认证'"> {{ basicInfo.isIdentity }}</el-tag>
            <el-tag size="mini" type="success" v-else> {{ basicInfo.isIdentity }}</el-tag>
          </td>
          <td>基础信息认证:</td>
          <td>
            <el-tag size="mini" type="danger" v-if="basicInfo.isIdentity==='未认证'"> {{ basicInfo.isBasicInfo }}</el-tag>
            <el-tag size="mini" type="success" v-else> {{ basicInfo.isBasicInfo }}</el-tag>
          </td>
          <td>活体认证:</td>
          <td>
            <el-tag size="mini" type="danger" v-if="basicInfo.isIdentity==='未认证'"> {{ basicInfo.isFace }}</el-tag>
            <el-tag size="mini" type="success" v-else> {{ basicInfo.isFace }}</el-tag>
          </td>
        </tr>
        <tr>
          <td>客户单位名称:</td>
          <td>{{ basicInfo.companyName }}</td>
          <td>客户单位地址:</td>
          <td>{{ basicInfo.companyAddress }}</td>
          <td>住宅地址:</td>
          <td>{{ basicInfo.houseAddress }}</td>
        </tr>
        <tr>
          <td>第一联系人姓名:</td>
          <td>{{ basicInfo.firstName }}</td>
          <td>第一联系人电话:</td>
          <td colspan="3">{{ basicInfo.firstPhone }}</td>
        </tr>
      </table>
    </div>
    <block-header title="银行卡列表"/>
    <div class="block-box">
      <el-table
          :header-row-class-name="headerStyle"
          :highlight-current-row="true"
          border
          size="small"
          :data="ownerBank"
          stripe style="width: 100%;">
        <el-table-column align="center" prop="bankAccount" label="银行卡号"></el-table-column>
        <el-table-column align="center" prop="openBankName" label="银行名称"></el-table-column>
        <el-table-column align="center" prop="ownerName" label="姓名"></el-table-column>
        <el-table-column align="center" prop="payChannelApi" label="渠道名称"></el-table-column>
        <el-table-column align="center" prop="gmtCreated" label="绑定时间" :formatter="dateFormat"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="ownerBankBind(scope.row,'BindCardRecord','绑卡记录')">绑卡记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--绑卡记录-->
    <template v-if="visible">
      <component
          @handleClose="visible = false"
          :is="activeComponents"
          :dialogVisible="visible"
          :params="dParams"
          :title="dTitle"/>
    </template>
  </div>
</template>

<script>
import BlockHeader from "@/components/byh/componments/blockHeader";
import BindCardRecord from './OwnerBankBind'
import * as moment from "moment";

export default {
  name: 'AddUserServiceDialog',
  components: {
    BlockHeader,
    BindCardRecord
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      visible: false,
      activeComponents: "",
      dTitle: "",
      dParams: {},


      basicInfo: {},
      ownerBank: []
    }
  },
  filters: {
    dateFilter: function (row) {
      const exp = row;
      if (!exp || typeof (exp) === undefined || typeof (exp) === null) {
        return ''
      }
      return moment(exp).format("YYYY-MM-DD")
    },
  },
  async created() {
    if (this.params) {
      const params = this.params;
      console.log(params, '是什么');
      const {basicInfo} = params;
      this.basicInfo = basicInfo;
      if (basicInfo.cardList) this.ownerBank = basicInfo.cardList;
    }
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    /*日期*/
    dateFormat: function (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    // 查看绑卡记录
    ownerBankBind(row,com,title) {
      this.activeComponents = com;
      this.visible = true;
      this.dTitle = title;
      this.dParams = row;
    }
  }
}
</script>

<style>

</style>
