<template>
  <div class="full-height q-pa-md row bg-grey-2">
    <div class="todolist-left-box bg-white rounded-borders q-py-md q-mr-md">
      <q-tabs
        v-model="currentMenu"
        vertical
        no-caps
        inline-label
        active-color="primary"
      >
        <q-tab
          v-for="x in menulist"
          :key="x.id"
          :name="x.id.toString()"
          :icon="`iconfont ${x.icon}`"
          :label="x.name"
          content-class="todo-box-tab-class"
        >
          <div
            class="col row justify-end"
            v-if="
              childTodoTipList[`${x.value}`] &&
                childTodoTipList[`${x.value}`] != 0
            "
          >
            <q-badge
              rounded
              color="red"
              :label="childTodoTipList[`${x.value}`]"
            />
          </div>
        </q-tab>
      </q-tabs>
    </div>
    <div class="col bg-white rounded-borders full-height">
      <q-tab-panels
        v-model="currentMenu"
        animated
        swipeable
        vertical
        transition-prev="jump-up"
        transition-next="jump-up"
        class="full-height"
      >
        <q-tab-panel name="1" class="full-height">
          <todoToday :node="menulist[parseInt(currentMenu) - 1]"></todoToday>
        </q-tab-panel>
        <q-tab-panel name="2" class="full-height">
          <todoStu :node="menulist[parseInt(currentMenu) - 1]"></todoStu>
        </q-tab-panel>
        <q-tab-panel name="3" class="full-height">
          <distribution
            :node="menulist[parseInt(currentMenu) - 1]"
          ></distribution>
        </q-tab-panel>
        <q-tab-panel name="4" class="full-height">
          <students :node="menulist[parseInt(currentMenu) - 1]"></students>
        </q-tab-panel>
        <q-tab-panel name="5" class="full-height">
          <contractInfo
            :node="menulist[parseInt(currentMenu) - 1]"
          ></contractInfo>
        </q-tab-panel>
        <q-tab-panel name="6" class="full-height">
          <payee :node="menulist[parseInt(currentMenu) - 1]"></payee>
        </q-tab-panel>
        <q-tab-panel name="7" class="full-height">
          <todayFollow
            :node="menulist[parseInt(currentMenu) - 1]"
          ></todayFollow>
        </q-tab-panel>
        <q-tab-panel name="8" class="full-height">
          <graduation :node="menulist[parseInt(currentMenu) - 1]"></graduation>
        </q-tab-panel>
        <q-tab-panel name="9" class="full-height">
          <financialDocuments :isComponents="true"></financialDocuments>
        </q-tab-panel>
        <q-tab-panel name="10" class="full-height">
          <business :node="menulist[parseInt(currentMenu) - 1]"></business>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </div>
</template>

<script>
import todoToday from "./todoToday.vue";
import todoStu from "./todoStu.vue";
import distribution from "./distribution.vue";
import students from "./students.vue";
import todayFollow from "./todayFollow.vue";
import graduation from "./graduation.vue";
import contractInfo from "./contract.vue";
import payee from "./payee.vue";
import business from "./business.vue";
import financialDocuments from "../../pages/financial/financalDocument/FinancialDocuments.vue";
export default {
  inject: ["todoTipList"],
  components: {
    todoToday,
    todoStu,
    distribution,
    students,
    todayFollow,
    graduation,
    contractInfo,
    payee,
    business,
    financialDocuments
  },
  data() {
    return {
      currentMenu: null,
      currentNode: null,
      menulist: [
        {
          id: 1,
          name: "今日需联系线索",
          msg: 0,
          icon: "icon-xiansuo",
          value: "TodayClueCount"
        },
        {
          id: 2,
          name: "今日需联系学员",
          msg: 0,
          icon: "icon-xueyuan2",
          value: "TodayConnectCount"
        },
        {
          id: 3,
          name: "分配给我的线索",
          msg: 0,
          icon: "icon-fenpei",
          value: "MyClueCount"
        },
        {
          id: 4,
          name: "分配给我的学员",
          msg: 0,
          icon: "icon-fenpeijiaose",
          value: "MyStudentCount"
        },
        {
          id: 5,
          name: "待申领合同",
          msg: 0,
          icon: "icon-hetong",
          value: "MyOrderNotReceiveContractCount"
        },
        {
          id: 6,
          name: "待收款提醒",
          msg: 0,
          icon: "icon-shoukuan",
          value: "MyOrderNotBalanceCount"
        },
        {
          id: 7,
          name: "今日被跟进学员",
          msg: 0,
          icon: "icon-genjin",
          value: "TodayFollowCount"
        },
        {
          id: 8,
          name: "即将毕业学员",
          msg: 0,
          icon: "icon-biyejieye",
          value: "GraduateStudentCount"
        },
        {
          id: 9,
          name: "待审核财务单据",
          msg: 0,
          icon: "icon-caiwu1",
          value: "todoFincal"
        },
        {
          id: 10,
          name: "待审核业务单据",
          msg: 0,
          icon: "icon-yewu",
          value: "NotBusinessBillCount"
        }
      ]
    };
  },
  computed: {
    childTodoTipList() {
      return this.todoTipList.result;
    }
  },
  mounted() {
    this.currentMenu = this.menulist[0].id.toString();
  },
  methods: {}
};
</script>

<style>
.todolist-left-box {
  width: 200px;
  overflow-y: auto;
}
.q-tabs--vertical .justify-center,
.q-tabs--vertical .flex-center {
  justify-content: unset !important;
  width: 100%;
}
.todo-box-tab-class {
  width: 100%;
}
</style>
