<template>
  <el-dialog title="客户信息" :close-on-click-modal="false" :visible.sync="open" width="1200px" append-to-body>
    <el-collapse v-model="activeName" >
      <el-collapse-item title="基本信息" name="base">
        <el-descriptions class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="登陆号码">
            {{info.phoneNumber}}
          </el-descriptions-item>
          <el-descriptions-item label="昵称">
            {{info.nickName}}
          </el-descriptions-item>
          <el-descriptions-item label="是否实名">
            {{info.realNameAuth}}
          </el-descriptions-item>
          <el-descriptions-item label="是否贷款">
            {{info.loansFlag}}
          </el-descriptions-item>
          <el-descriptions-item label="是否提现">
            {{info.withdrawFlag}}
          </el-descriptions-item>
          <el-descriptions-item label="余额">
            {{yuanFormat(info.account)}}
          </el-descriptions-item>
          <el-descriptions-item label="可提现金额">
            {{yuanFormat(info.withdrawAccount)}}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <zl-dict-tag :options="stopStatusList" :value="info.status"/>
          </el-descriptions-item>
          <el-descriptions-item label="真实姓名">
            {{customerInfo.realName}}
          </el-descriptions-item>
<!--          <el-descriptions-item label="电话">
            {{customerInfo.customerPhone}}
          </el-descriptions-item>-->
          <el-descriptions-item label="身份证号码">
            {{customerInfo.cardNum}}
          </el-descriptions-item>
          <el-descriptions-item label="身份证正面">
            <image-preview :src="customerInfo.cardFrontPicture" />
          </el-descriptions-item>
          <el-descriptions-item label="身份证背面">
            <image-preview :src="customerInfo.cardBackPicture" />
          </el-descriptions-item>
          <el-descriptions-item label="手持身份证照片">
            <image-preview :src="customerInfo.handCardPicture" />
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="资料信息" name="card">
        <el-descriptions class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="单位名称">
            {{customerInfo.companyName}}
          </el-descriptions-item>
          <el-descriptions-item label="职位">
            {{customerInfo.companyTitle}}
          </el-descriptions-item>
          <el-descriptions-item label="单位电话">
            {{customerInfo.companyPhone}}
          </el-descriptions-item>
          <el-descriptions-item label="工作年龄">
            {{customerInfo.companyYear}}
          </el-descriptions-item>
          <el-descriptions-item label="月薪">
            {{customerInfo.incomeWan}}
          </el-descriptions-item>
          <el-descriptions-item label="单位地址">
            {{customerInfo.companyAddress}}
          </el-descriptions-item>
          <el-descriptions-item label="详细地址" :span="2">
            {{customerInfo.companyAddressInfo}}
          </el-descriptions-item>
          <el-descriptions-item label="现居住地址">
            {{customerInfo.customerAddress}}
          </el-descriptions-item>
          <el-descriptions-item label="详细地址" :span="2">
            {{customerInfo.customerAddressInfo}}
          </el-descriptions-item>
          <el-descriptions-item label="亲属关系">
            <zl-dict-tag :options="kinsfolkRefList" :value="customerInfo.kinsfolkRef"/>
          </el-descriptions-item>
          <el-descriptions-item label="亲属姓名">
            {{customerInfo.kinsfolkName}}
          </el-descriptions-item>
          <el-descriptions-item label="亲属电话">
            {{customerInfo.kinsfolkPhone}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="收款银行卡" name="bank">
        <el-descriptions class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="开户银行">
            {{customerInfo.bankType}}
          </el-descriptions-item>
          <el-descriptions-item label="银行卡号" :span="2">
            {{customerInfo.backCardNum}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import commonUtil from '@/mixins/common-util'
import { bankTypeList, kinsfolkRefList, stopStatusList, talentInfoTypeList } from '@/constant/module/statusMap'
import { getDkCustomer } from '@/api/dk/dkCustomer'
import { getInfoByCustomerId } from '@/api/dk/dkCustomerInfo'
import { getBorrow } from '@/api/dk/borrow'

export default {
  name: "CustomerInfo",
  mixins: [commonUtil],
  data() {
    return {
      kinsfolkRefList,bankTypeList,talentInfoTypeList,stopStatusList,
      activeName:['base','card','bank'],
      open:false,
      videoShowVisible: false,
      previewVideo:'',
      info:{},
      customerInfo:{},
      customerId: this.$route.query.id,
      loading:false,
    };
  },
  created() {

  },
  methods: {
    init(customerId,borrowId){
      this.open = true;
      this.customerId = customerId;
      getDkCustomer(this.customerId).then(response => {
        this.info = response.data;
      });
      if(borrowId){
        getBorrow(borrowId).then(response => {
          this.customerInfo = response.data
        })
      }else{
        getInfoByCustomerId({customerId: this.customerId}).then(response => {
          this.customerInfo = response.data
        })
      }
    },
    formatV2(value,option){
      let options = this[option];
      for (let k in options) {
        if (options[k].value === value) {
          return options[k].label;
        }
      }
      return '';
    },
    format(row, column, option) {
      let options = this[option];
      for (let k in options) {
        if (options[k].value === row[column.property]) {
          return options[k].label;
        }
      }
      return '';
    }
  }
};
</script>
<style lang="scss" scoped>
  .el-row {
    margin-bottom: -15px;
    display: flex;
    flex-wrap: wrap
  }
</style>
