<template>
  <div>
    <title-bar :title="title" @click-right="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="text-content">
      <div class="text-content-left">
        <van-sidebar @change="onChange" style="width: 100%" line-height="100px" v-model="activeKey">
          <van-sidebar-item v-for="(item, index) in UpcomingTaskList" :key="index" class="label" :title="item.name" />
        </van-sidebar>
      </div>
      <div v-if="UpcomingTaskList.length!=0" class="text-content-right">
        <!--个人催收-->
        <div v-if="UpcomingTaskList[activeKey].menuId == MENUS.LOAN_COLLECTION_DB.code">
          <collection-management></collection-management>
        </div>
        <!--个人贷后检查-->
        <div v-if="UpcomingTaskList[activeKey].menuId == MENUS.PERSONAL_LOAN_CHECK.code">
          <AfterLoan></AfterLoan>
        </div>
        <!--个人电话营销-->
        <div v-if="UpcomingTaskList[activeKey].menuId == MENUS.TEL_MARKETING.code">
          <MarketingQuery></MarketingQuery>
        </div>
        <!-- 风险预警 -->
        <div v-if="UpcomingTaskList[activeKey].menuId == MENUS.RISK_WARNING.code">
          <upcoming-risk-warning></upcoming-risk-warning>
        </div>
        <!-- 贷后检查 -->
        <div v-if="UpcomingTaskList[activeKey].menuId == MENUS.COMPANY_LOAN_CHECK.code">
          <upcoming-periodic-inspection></upcoming-periodic-inspection>
        </div>
        <!-- 对公上门营销 -->
        <div v-if="UpcomingTaskList[activeKey].menuId == MENUS.COM_MARKETING.code">
          <ComMarketingView></ComMarketingView>
        </div>
        <!-- 个人上门营销 -->
        <div v-if="UpcomingTaskList[activeKey].menuId == MENUS.FTF_MARKETING.code">
          <PerMarketing></PerMarketing>
        </div>
        <!-- 中小营销 -->
        <div v-if="UpcomingTaskList[activeKey].menuId == MENUS.ZX_MARKETING.code">
          <SMEMarketingPool></SMEMarketingPool>
        </div>
        <!-- 面签 -->
        <div v-if="UpcomingTaskList[activeKey].menuId == MENUS.FACE_SIGN.code">
          <face-sign-list-view></face-sign-list-view>
        </div>
        <!-- 面签复核 -->
        <div v-if="UpcomingTaskList[activeKey].menuId == MENUS.FACE_SIGN_REVIEW.code">
          <face-sign-review-list-view></face-sign-review-list-view>
        </div>
      </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 CollectionManagement
  from "@/components/workbench/personal-common-functions/agency-task/CollectionManagement.vue";
import AfterLoan from "@/components/workbench/personal-common-functions/agency-task/AfterLoan.vue";
import MarketingQuery
  from "@/components/workbench/personal-common-functions/agency-task/telemarketing/MarketingQuery.vue";
import UpcomingRiskWarning
  from "@/components/workbench/upcoming-tasks-content/company-business/upcoming/UpcomingRiskWarning.vue";
import UpcomingMarketingTask
  from "@/components/workbench/upcoming-tasks-content/company-business/upcoming/UpcomingMarketingTask.vue";
import UpcomingPeriodicInspection
  from "@/components/workbench/upcoming-tasks-content/company-business/upcoming/UpcomingPeriodicInspection.vue";
import ComMarketingView
  from "@/components/workbench/upcoming-tasks-content/company-business/upcoming/ComMarketingView.vue";
import PerMarketing from "@/components/workbench/personal-common-functions/agency-task/PerMarketing.vue";
import SMEMarketingPool from "@/components/workbench/SME-common-functions/SMEMarketingPool.vue";
import FaceSignListView
  from "@/components/workbench/upcoming-tasks-content/personal-business/personal-upcoming/FaceSignListView.vue";
import FaceSignReviewListView
  from "@/components/workbench/upcoming-tasks-content/personal-business/personal-upcoming/FaceSignReviewListView.vue";
import { MENU } from "@/constants/enum/menu.enum";

Vue.use(Sidebar);
Vue.use(SidebarItem);
/**
 * @Description 待办任务
 * @Author JiangTao
 * @Date 2021-10-25 下午 08:55
 */
@Component({
  name: "UpcomingTask",
  components: {
    FaceSignReviewListView,
    TitleBar,
    CollectionManagement,
    AfterLoan,
    MarketingQuery,
    UpcomingRiskWarning,
    UpcomingMarketingTask,
    UpcomingPeriodicInspection,
    ComMarketingView,
    PerMarketing,
    SMEMarketingPool,
    FaceSignListView
  }
})
export default class UpcomingTask extends Vue {
  activeKey: any = 0;
  title = "待办任务"; // 页面标题

  UpcomingTaskList: any[] = [];
  MENUS = MENU;

  onClick() {
  }

  mounted() {
    this.UpcomingTaskList = (this.$route.query.menuList as any);
    this.activeKey = (this.$route.query.activeKey as any);
  }

  activated() {
    this.$router.beforeEach((to, from, next) => {
      if (from.path == "/main/workbench") {
        this.UpcomingTaskList = (to.query.menuList as any);
        this.activeKey = (to.query.activeKey as any);
      }
      next();
    });
  }

  onChange() {

  }
}
</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%;
  height: 100%;
}

.text-content-right > div {
  height: 100%;
}

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

van-sidebar-item {
}

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

::v-deep .van-sidebar-item__text {
  font-size: 18px;
}

::v-deep .text-content-left {
  z-index: 2100;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

::v-deep .van-sidebar-item__text:before {
  content: "😊";
  /*content: url("../../../../assets/images/logo.png");*/
  width: 30px;
  height: 30px;
  border-radius: 5px;
}

::v-deep .van-sidebar-item--select > div:before {
  background-color: #00a3ff;
}
</style>
