<template>
  <el-drawer
      :title="title"
      size="70%"
      :wrapperClosable="false"
      :visible.sync="dialogVisible"
      direction="rtl"
      :before-close="handleClose">
    <div class="page">
      <div class="loan-detail">
        <el-tabs
            class="loan-tabs"
            tab-position="left"
            v-model="activeComponents"
            @tab-click="handleTabClick">
          <el-tab-pane name="ApplyInfo" label="申请信息"></el-tab-pane>
          <el-tab-pane v-if="$permissionUtils.rolePermission('customBoss')" name="ContractList"
                       label="借款合同"></el-tab-pane>
          <el-tab-pane name="BillList" label="账单详情"></el-tab-pane>
          <el-tab-pane name="RePayList" label="还款情况"></el-tab-pane>
          <el-tab-pane name="ReliefList" label="减免记录"></el-tab-pane>
        </el-tabs>
        <div class="loan-detail-content">
          <template v-if="visible">
            <component
                @handleClose="visible = false"
                :is="activeComponents"
                :params="items"
                :title="dTitle"/>
          </template>
        </div>
      </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 * as moment from "moment";

export default {
  name: 'AddUserServiceDialog',
  components: {
    BlockHeader,
    ApplyInfo,
    ContractList,
    RePayList,
    BillList,
    ReliefList
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      visible: false,
      activeComponents: '',
      dTitle: '',
      active: "",
      items: {},
      loan: {}
    }
  },
  async created() {
    if (this.params) {
      const {loanNo} = this.params;
      this.items = 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;
      if (success && result != null) {
        this.loan = result;

        this.handleTabClick({
          name: "ApplyInfo",
          label: "申请信息"
        });

      }
    },
    /*日期*/
    dateFormats: function (row, column) {
      let date = row[column.property]
      if (date === undefined) return '';
      return moment(date).format("YYYY-MM-DD")
    },
    handleClose() {
      this.$emit("handleClose");
    },
    // 切换选项卡
    handleTabClick(tab) {
      this.activeComponents = tab.name;
      this.visible = true;
      this.dTitle = tab.label;
      this.items = {
        ...this.loan,
        ...this.params
      };
    }
  }
}
</script>

<style scoped lang="less">
.page, .loan-detail {
  height: 100%;
  overflow: auto;
}
.page{
  padding-right: 0;
}

.loan-detail {
  display: flex;
  position: relative;

  .loan-tabs {
    position: sticky;
    top: 0;
    right: 0;
    width: 100px;
  }

  .loan-detail-content {
    width: calc(100% - 100px);
    box-sizing: border-box;
    padding-left: 20px;
  }
}
</style>
