<template>
  <div>
    <title-bar title="辅助工具">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="text-content">
      <div class="text-content-left">
        <van-sidebar style="width: 100%" line-height="100px" v-model="activeKey">
          <van-sidebar-item @click="indexClick(0)" class="label" title="利率定价" />
          <van-sidebar-item @click="indexClick(1)" class="label" title="贷款测算" />
          <van-sidebar-item @click="indexClick(2)" class="label" title="随意分还款试算" />
          <van-sidebar-item @click="indexClick(3)" class="label" title="年日均计算" />
          <van-sidebar-item @click="indexClick(4)" class="label" title="财务试算" />
        </van-sidebar>
      </div>
      <div class="text-content-right">
        <interest-pricing v-if="activeKey == 0"></interest-pricing>
        <loan-calculation v-if="activeKey == 1"></loan-calculation>
        <repayment-trial v-if="activeKey == 2"></repayment-trial>
        <calculate v-if="activeKey == 3"></calculate>
        <financial-trial v-if="activeKey == 4"></financial-trial>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { Sidebar, SidebarItem } from "vant";
import FinancialTrial from "@/components/workbench/company-common-functions/auxiliary-tools/FinancialTrial.vue";
import Calculate from "@/components/workbench/company-common-functions/auxiliary-tools/Calculate.vue";
import RepaymentTrial from "@/components/workbench/company-common-functions/auxiliary-tools/RepaymentTrial.vue";
import LoanCalculation from "@/components/workbench/company-common-functions/auxiliary-tools/LoanCalculation.vue";
import InterestPricing from "@/components/workbench/company-common-functions/auxiliary-tools/InterestPricing.vue";

Vue.use(Sidebar);
Vue.use(SidebarItem);
/**
 * @Description 辅助工具
 * @Author JiangTao
 * @Date 2021-10-25 下午 08:55
 */
@Component({
  name: "AuxiliaryTools",
  components: { TitleBar, FinancialTrial, Calculate, RepaymentTrial, LoanCalculation, InterestPricing }
})
export default class AuxiliaryTools extends Vue {
  activeKey:any = 0;
  pageTitle = ""; // 页面标题


  mounted() {
    this.pageTitle = this.$route.meta?.name;
    if(this.$route.query.activeKey){
      this.activeKey = this.$route.query.activeKey;
    }
  }
  indexClick(index:any){
    this.activeKey = index;
  }

  activated() {
    this.$router.beforeEach((to, from, next) => {
      if (from.path == "/main/workbench") {
        this.activeKey = 0;
      }else if(from.path == "/TYMHView"){
        this.activeKey = to.query.activeKey;
      }

      next();
    });
  }
}
</script>

<style scoped>
.text-content {
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  justify-content: flex-start;
}

.text-content-left {
  width: 25%;
  background-color: rgba(245, 245, 245, 1);
  border: 1px solid rgba(222, 222, 222, 1);
}

.text-content-right {
  width: 75%;
}

.label {
  border-bottom: 1px solid #999999;
}

van-sidebar-item {
}

::v-deep .van-sidebar-item--select::before {
  height: 100%;
}

::v-deep .van-sidebar-item__text {
  font-size: 18px;
}
</style>
