<template>
  <section style="width: 100%;">
    <Navbar class="task-navbar"> </Navbar>
    <main
      class="task-dashboard main-page__content"
      :class="{ expanded: !isSidebarCollapsed }"
    >
      <div class="flex-grow-1">
        <div class="position-relative d-flex justify-content-center"></div>
        <section class="container-fluid">
          <div class="row">
            <div class="col-sm-12 col-md-6 mt-3">
              <div class="my-card DonutChart">
                <!-- <h2 class="title">Tasks by status</h2> -->
                <pie-donut
                  :dataPie="dataPie"
                  :PieOptions="PieOptions"
                  width="90%"
                  height="300px"
                  ref="donutchart"
                ></pie-donut>
                <div class="content"></div>
              </div>
            </div>
            <div class="col-sm-12 col-md-3 mt-3">
              <div class="my-card">
                <h2 class="title">Completed tasks</h2>
                <div class="content">
                  <span class="value">28</span
                  ><span class="subtitle">tasks completed</span>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-3 mt-3">
              <div class="my-card">
                <h2 class="title">Incomplete tasks</h2>
                <div class="content">
                  <span class="value">14</span
                  ><span class="subtitle">to be done</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-4">
              <div class="my-card total-tasks">
                <h2 class="title">Total tasks by assignee</h2>
                <div class="content"></div>
              </div>
            </div>
            <div class="col-sm-12 col-md-8">
              <div class="my-card Gantt">
                <h2 class="title">Timeline</h2>
                <div class="content">
                  <Gantt class="Gantt"></Gantt>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="my-card">
                <h2 class="title">Cumulative flow</h2>
                <div class="content"></div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </main>
  </section>
</template>

<script>
import { mapState, mapActions } from "pinia";

import { useCommonStore } from "~/stores/commonStore";
import { useSearchStore } from "@search/stores/searchStore";
import { useAuthStore } from "~/stores/authStore";
import taskApi from "@task/apis/taskApi";

export default {
  // mixins: [commentMixin],
  mounted() {
    this.httpService = useNuxtApp()["$http"];
    this.TOGGLE_PANEL(false);
    this.getvalueChartDonut();
  },
  watch: {
    getPanelStatus(status) {
      if (status) this.openForm();
      else this.closeModal();
    },
    $route: {
      handler: function () {
        this.sidebarCollapsedSetter(true);
      },
      deep: true,
      immediate: true,
    },
    // listIdGetter(newId) {
    //   this.filterBy(this.selectedFilter);
    // },
  },
  data() {
    return {
      PieOptions: {
        radius: ["40%", "70%"],
        selectedMode: "single",
      },
      // #region mehdi
      nomber: 0,
      statusPagHedear: 1,
      dataPie: [],
      httpService: {},
      // #endregion
      rerenderChatList: 1,
      showListPanel: false,
    };
  },
  computed: {
    ...mapState(useAuthStore, ["currentUser"]),
    ...mapState(useCommonStore, [
      "getPanelStatus",
      "isSidebarCollapsed",
      "sidebarListStatusGetter",
    ]),
    ...mapState(useSearchStore, [
      "listComponentNameGetter",
      "selectedProjectGetter",
      "listIdGetter",
      "selectedItemGetter",
      "listGetter",
    ]),
    // taskUrl() {
    //   return import.meta.env.VITE_TASK;
    // },
  },
  methods: {
    ...mapActions(useCommonStore, [
      "TOGGLE_PANEL",
      "sidebarCollapsedSetter",
      "SET_SIDEBAR_LIST_STATUS",
      "checkPermissions",
      "storeState",
      "getState",
    ]),
    ...mapActions(useSearchStore, [
      "SET_LIST_COMPONENT_NAME",
      "SET_SELECTED_ITEM",
      "SET_SELECTED_PROJECT",
      "SET_LIST_ID",
      "SET_LIST",
      "SET_LIST_ID",
    ]),

    selectedListBackTitle(name) {
      if (name == "groups") return "دانشتو با بقیه به اشتراک بزار.";
      if (name == "privates") return "به هر کی دوست داری، پیام بده.";
      if (name == "lobbies") return "به تالار گفتگو خوش اومدی";
    },
    // showSearch() {
    // search in current group, not all groups.
    // this.$refs["chat-list-panel"].showSearchs(true);
    // },

    // #region mehdi
    statusPage($event) {
      const number = $event;

      if (number == 1) {
        if (this.$refs["chat-list-panel"].showMainpag == false) {
          this.$refs["chat-list-panel"].showMainpag = true;
        }
      } else {
        if (this.$refs["chat-list-panel"].showMainpag == false) {
          this.$refs["chat-list-panel"].showMainpag = true;
        }
      }
    },
    // #endregion

    toggleSidebarMenu() {
      this.TOGGLE_SIDEBAR_MENU();
    },
    showToggleListPanel() {
      this.showListPanel = !this.showListPanel;
      this.$refs["chat-list-panel"].showMainpag = true;
    },

    // #region mehdi
    openPagGrup(data) {
      this.enablePanelToggling = data;
      if (this.enablePanelToggling == 1) {
        this.showToggleListPanel();
      }
    },
    // #endregion
    getvalueChartDonut() {
      let payload = {
        user_id: this.currentUser.user_id,
      };
      let url = taskUrl() + taskApi.taskChart.donut;
      var vm = this;
      this.httpService.postRequest(url, payload).then((res) => {
        vm.dataPie = [];
        res.data.forEach((element) => {
          vm.dataPie.push({
            y: element.Percent,
            name: element.category,
            // color: colors[5],
            drilldown: {
              categories: [element.category],
              data: [element.Total],
            },
          });
        });
      });
    },
  },
  components: {
    // MainSection: () => import("@task/components/MainSection"),H:\new-folder\base_ui\components\charts\PieDonut.vue
    PieDonut: defineAsyncComponent(() =>
      import("~/components/charts/PieDonut.vue")
    ),
  },
};
</script>

<style scoped lang="scss">
.task-dashboard {
  .row {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
  }
  .my-card {
    // &.DonutChart{
    //     width: 54em;
    //   }
    // &.Gantt{
    //     width: 72.5em;
    //   }
    // &.total-tasks{
    //     width: unset;
    //   }
    // &.ComparetasksChart{
    //     width: 100%;
    //   }
    // width: 26em;
    height: 18em;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 0 0.4688rem 2.1875rem rgba(4, 9, 20, 0.03),
      0 0.9375rem 1.4063rem rgba(4, 9, 20, 0.03),
      0 0.25rem 0.5313rem rgba(4, 9, 20, 0.03),
      0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
    .title {
      font-size: 1.2em;
      text-align: left;
      margin: 1em;
    }
    .content {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>