<template>
  <div class="search-bar">
    <div class="form-control sm cal">
      <VueDatePicker
        InlineOptions
        placeholder="시작일"
        locale="ko"
        :enable-time-picker="false"
        :format="formatDate"
        v-model="searchDate.startDt"
          @update:model-value="validateDate($event, 'startDt')"
      />
    </div>
      <!-- <input
        type="date"
        class="form-control sm"
        v-model="searchDate.startDt"
        @change="validateDate($event, 'startDt')"
      /> -->
      <div>-</div>
      <div class="form-control sm cal">
        <VueDatePicker
        InlineOptions
        placeholder="종료일"
        locale="ko"
        :enable-time-picker="false"
        :format="formatDate"
        v-model="searchDate.endDt"
        @update:model-value="validateDate($event, 'endDt')"
      />
    </div>
      <!-- <input
        type="date"
        class="form-control sm"
        v-model="searchDate.endDt"
        @change="validateDate($event, 'endDt')"
      />       -->
      <button class="btn sm primary" @click="axiosSelectList">
        조회
      </button>
      <button
        class="large-btn green-border-btn"
        v-if="pageAuth.fileDwnldAuthrt == 'Y'"
        @click="fnDownload"
      >
        다운로드
      </button>
  </div>
  <div class="content-zone full-page">
    <div class="content">
      <div class="scroll">
        <div class="chart-zone mb30" v-show="menuCnt > 0">
          <div class="chart-info">
            <p class="detail-text">
              방문자 총
              <span class="detail-bold blue">{{ totalCnt }}</span>
              명
            </p>
          </div>
          <div class="chart-wrap" ref="chartdiv" :style="heightStyle">
            <ClusteredBarChart :chartData="chartData" columnX="menu" />
          </div>
        </div>
        <div class="tbl-wrap">
          <table class="tbl data mixing">
            <colgroup>
              <col width="25%" />
              <col width="25%" />
              <col width="25%" />
              <col width="25%" />
            </colgroup>
            <thead>
              <tr>
                <th rowspan="2">구분</th>
                <th colspan="3">사용자 구분</th>
              </tr>
              <tr>
                <th class="text-ct">관리자</th>
                <th class="text-ct">사용자</th>
                <th class="text-ct">비로그인 사용자</th>
              </tr>
            </thead>
            <tbody>
              <template v-if="menuCnt > 0">
                <tr v-for="(tr, index) of chartData" :key="index">
                  <td class="text-ct">{{ tr.menu }}</td>
                  <td class="text-rg">{{ tr["관리자"] }}</td>
                  <td class="text-rg">{{ tr["사용자"] }}</td>
                  <td class="text-rg">{{ tr["비로그인 사용자"] }}</td>
                </tr>
              </template>
              <template v-else>
                <tr>
                  <td colspan="4" class="text-ct">
                    등록된 정보가 존재하지 않습니다.
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import defaultAxios from "../../../../resources/js/defaultAxios";
import html2canvas from "html2canvas";
import ClusteredBarChart from "../../../component/chart/ClusteredBarChart.vue";
import statisticsDate from "../../../../resources/js/defaultDateParams";

// API
import { selectMenuCntnStatsProc } from "../../../../resources/api/cntnStats";

export default {
  mixins: [statisticsDate],
  components: {
    ClusteredBarChart: ClusteredBarChart,
  },
  data() {
    return {
      // 페이지 권한 객체
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
      // 차트 데이터
      chartData: [],
      // 전체 수
      totalCnt: 0,
      // 메뉴 수
      menuCnt: 0,
      // 차트 높이 스타일
      heightStyle: {},
    };
  },
  created() {
    this.axiosSelectList();
  },
  methods: {
    // 메뉴별 접속 통계
    async axiosSelectList() {
      // 유효성 검사
      if (this.searchDate.startDt == null || this.searchDate.startDt == "") {
        alert("시작일을 선택하세요.");
        this.searchDate.startDt = null;
        return;
      }
      if (this.searchDate.endDt == null || this.searchDate.endDt == "") {
        alert("종료일을 선택하세요.");
        this.searchDate.endDt = null;
        return;
      }
      // 데이터 세팅
      let data = this.searchDate;
      data["menuMainDepth"] = "MENU_000000000000002";
      data["startDt"] = this.dateFormat(new Date(data["startDt"]));
      data["endDt"] = this.dateFormat(new Date(data["endDt"]));
      // 실행
      try {
        const response = await selectMenuCntnStatsProc(data);
        let datas = [];
        for (let data of response.data.data.list) {
          let newData = {};
          newData["menu"] = data["menu_name"];
          for (let i = 0; i < data["authrt_nm"].length; i++) {
            newData[data["authrt_nm"][i]] = data["cntn_nope"][i];
          }
          datas.push(newData);
        }
        this.chartData = datas;
        this.totalCnt = response.data.data.totalCnt;
        this.heightStyle = {
          height: 100 + 100 * datas.length + "px",
        };
        this.menuCnt = response.data.data.menuCnt;
      } catch (error) {
        alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
      }
    },

    // 다운로드
    fnDownload() {
      const vm = this;
      const chartdiv = vm.$refs.chartdiv;
      html2canvas(chartdiv).then(function (canvas) {
        // 데이터 세팅
        let cntnStats = [];
        for (let item of vm.chartData) {
          cntnStats.push({
            date: item.menu,
            admin: item["관리자"],
            user: item["사용자"],
            none: item["비로그인 사용자"],
          });
        }
        // 폼데이터
        var formData = new FormData();
        const cntnStatsToBlob = new Blob([JSON.stringify(cntnStats)], {
          type: "application/json; charset=UTF-8",
        });
        formData.append("cntnStats", cntnStatsToBlob);
        let imageData = canvas.toDataURL("image/png");
        imageData.replace("data:image/png; base64, ", "");
        const chartToBlob = new Blob([imageData], {
          type: "application/json; charset=UTF-8",
        });
        formData.append("chart", chartToBlob);
        // 실행
        defaultAxios({
          url: "/sys/cntnStats/excelDownload.file",
          method: "post",
          headers: {
            "Content-Type": "multipart/form-data; charset=UTF-8",
            Authorization: vm.$store.state.authorization,
          },
          data: formData,
          responseType: "blob",
        })
          .then((response) => {
            const url = window.URL.createObjectURL(
              new Blob([response.data], {
                type: response.headers["content-type"],
              })
            );

            let today = new Date().toISOString().substring(2, 10);
            today = today.replace(/[^0-9]/g, "");

            const link = document.createElement("a");
            link.href = url;
            link.setAttribute(
              "download",
              `[${today}]메뉴별접속통계(공무원용)_${vm.searchDate.startDt}_${vm.searchDate.endDt}.xlsx`
            );
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
          })
          .catch((error) => {
            alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
          });
      });
    },
    // 날짜포맷
    formatDate(date) {
      const year = date.getFullYear();
      const month = ('00' + (date.getMonth() + 1)).slice(-2);
      const day = ('00' + date.getDate()).slice(-2);
      return `${year}-${month}-${day}`;
    }
  },
};
</script>