<template>
  <!-- 修改内容 -->
  <el-drawer
    :title="title"
    size="80%"
    :wrapperClosable="false"
    :visible.sync="dialogVisible"
    direction="rtl"
    :before-close="handleClose"
  >
    <div class="page">
      <div class="loan-detail">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="申请信息" name="1">
            <!-- <ApplyInfo :params="applyInfo"></ApplyInfo> -->
            <div class="page-com">
              <!-- <block-header :title="title"></block-header> -->
              <table class="table">
                <tr>
                  <td>申请日期</td>
                  <td>{{ loanModel.gmtCreated | dateFilter }}</td>
                  <td>放款日期</td>
                  <td>{{ loanModel.raiseDate | dateFilter }}</td>
                  <td>项目名称</td>
                  <td>{{ loanModel.productNameStr }}</td>
                  <!-- <el-table-column align="center" prop="productName" label="产品名称" :formatter="productNameFormat"></el-table-column> -->
                </tr>
                <tr>
                  <td>总应还金额</td>
                  <td>{{ loanModel.loanAmt }}</td>
                  <td>申请期数:</td>
                  <td>{{ loanModel.loanLimit }}</td>
                  <td>
                    <span v-if="loanModel.cardBankAccount"
                      >放款银行卡（所属银行）</span
                    >
                    <span v-else>放款银行卡（所属银行）</span>
                  </td>
                  <td>
                    <span v-if="loanModel.cardBankAccount"
                      >{{ loanModel.cardBankAccount }}（{{
                        loanModel.cardBankCodeStr
                      }}）</span
                    >
                    <span v-else>{{ loanModel.bankAccount }}</span>
                  </td>
                </tr>
                <tr>
                  <td>本金</td>
                  <td>{{ loanModel.raiseAmt }}</td>
                  <td>总服务费</td>
                  <td>{{ loanModel.serviceAmt }}</td>
                  <td>总利息</td>
                  <td>{{ loanModel.rateAmt }}</td>
                </tr>
                <tr>
                  <td>总手续费</td>
                  <td >{{ loanModel.accountAmt }}</td>
                   <td>项目编号</td>
                  <td>{{ loanModel.projectName }}</td>
                  <td>BD</td>
                  <td>{{ loanModel.bdName }}</td>
                </tr>

              </table>
            </div>
          </el-collapse-item>
          <!-- 组件 -->
          <el-collapse-item title="借款合同" name="2">
            <ContractList :params="applyInfo" v-if="$permissionUtils.rolePermission('lookAgreement')"></ContractList>
          </el-collapse-item>
          <el-collapse-item title="账单详情" name="3">
            <BillList  :params="applyInfo"></BillList>
          </el-collapse-item>
          <el-collapse-item title="还款情况" name="4">
            <RePayList :params="applyInfo"></RePayList>
          </el-collapse-item>
          <el-collapse-item title="减免记录" name="5">
            <ReliefList :params="applyInfo"></ReliefList>
          </el-collapse-item>
           <el-collapse-item title="退款记录" name="6">
            <ServiceRefund :params="applyInfo"></ServiceRefund>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import BlockHeader from "@/components/byh/componments/blockHeader";
import ApplyInfo from "./ApplyInfo";
import ContractList from "./ContractList";
import RePayList from "./RePayList";
import BillList from "./BillList";
import ReliefList from "./ReliefList";
import ServiceRefund from "./ServiceRefund";
import * as moment from "moment";

export default {
  name: "AddUserServiceDialog",
  components: {
    BlockHeader,
    ApplyInfo,
    ContractList,
    RePayList,
    BillList,
    ReliefList,
    ServiceRefund
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      visible: false,
      active: "",
      items: {},
      loanModel: {},
      applyInfo: {},
      loan: {},
      activeNames: ["1",'2','3','4','5','6'],
    };
  },
  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) {
      // console.log(this.params,'自营');
      const { loanNo } = this.params;
      this.applyInfo = this.params;
      await this.initLoanInfo(loanNo);
    }
  },

  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    //根据借款信息查借款所有信息
    async initLoanInfo(loanNo) {
      const res = await this.$$get("/detail/customer/" + loanNo);
      const { success, result } = res.data;
      console.log(res.data, "222");
      if (success && result != null) {
        this.loan = result;
        this.loanModel = result.applyVo;
      }
    },
    /*日期*/
    dateFormats: function (row, column) {
      let date = row[column.property];
      if (date === undefined) return "";
      return moment(date).format("YYYY-MM-DD");
    },
    handleClose() {
      this.$emit("handleClose");
    },
    // 切换选项卡
    handleChange(val) {
      console.log(val);
      this.applyInfo = {
        ...this.loan,
        ...this.params,
      };
    },
  },
};
</script>

<style scoped lang="less">
.page,
.loan-detail {
  height: 100%;
  overflow: auto;
}
.page {
  padding-right: 0;
}
.el-collapse {
  width: 100%;
}
.loan-detail {
  display: flex;
  position: relative;

  .el-collapse-item {
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
  }
}
</style>
