<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 class="mark">-</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 main" @click="axiosSelectList">
      조회
    </button>

    <button
      class="large-btn green-border-btn"
      v-if="pageAuth.fileDwnldAuthrt == 'Y'"
      @click="fnDownload"
    >
      다운로드
    </button>

  </div>
  <div class="content-zone sch-full">
    <div class="content">
      <div class="scroll">
        <div class="chart-zone mb30">
          <div class="chart-info">
            <p class="detail-text">
              방문자 총
              <span class="detail-bold blue">{{ totalCnt }}</span>
              명
            </p>
          </div>
          <div class="chart-wrap" ref="chartdiv">
            <ClusteredColumnChart :chartData="chartData" columnX="date" />
          </div>
        </div>
        <div class="tbl-wrap">
          <table class="tbl data mixing">
            <colgroup>
              <template v-for="(key, index) of chartData[0]" :key="index">
                <col
                  v-if="index > 1"
                  :width="100 / chartData[0].length - 2 + '%'"
                />
              </template>
            </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>
              <tr v-for="(tr, index) of chartData" :key="index">
                <td class="text-ct">{{ tr.date }}</td>
                <td class="text-rg">{{ tr["관리자"] }}</td>
                <td class="text-rg">{{ tr["사용자"] }}</td>
                <td class="text-rg">{{ tr["비로그인 사용자"] }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import defaultAxios from "../../../../resources/js/defaultAxios";
import html2canvas from "html2canvas";
import ClusteredColumnChart from "../../../component/chart/ClusteredColumnChart.vue";
import statisticsDate from "../../../../resources/js/defaultDateParams";

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

export default {
  mixins: [statisticsDate],
  components: {
    ClusteredColumnChart: ClusteredColumnChart,
  },
  data() {
    return {
      // 페이지 권한 객체
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
      // 차트 데이터
      chartData: [],
      // 전체 수
      totalCnt: 0,
    };
  },
  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["startDt"] = this.dateFormat(new Date(data["startDt"]));
      data["endDt"] = this.dateFormat(new Date(data["endDt"]));
      // 실행
      try {
        const response = await selectUserCntnStatsProc(data);
        let datas = [];
        for (let data of response.data.data.list) {
          let newData = {};
          newData["date"] = data["dates"];
          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;
      } 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.date,
            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: this.$filters.ctxPath("/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>