<!-- <template>
  <div class="content overflow-y">
    <div class="admin-page-title point-font2 mb30">
      <p>게시판 접속 통계</p>
    </div>
    <div class="flex justify-between aling-center no-gutters mb30">
      <div class="gd-7 flex justify-start align-center">
        <div class="gd-4 pl0" style="height: 100%">
          <select  class="full-select">
            <option>공지사항</option>
          </select>
        </div>
        <div class="gd-4 pl0" style="height: 100%">
          <input type="date" class="full-input" />
        </div>
        <div>-</div>
        <div class="gd-4" style="height: 100%">
          <input type="date" class="full-input" />
        </div>
        <div class="gd-2">
          <button class="large-btn blue-border-btn" @click="axiosSelectList">
            조회
          </button>
        </div>
      </div>
      <div class="gd-5">
        <ul class="flex justify-end align-center ">
          <li v-for="(content,idx) in tabObject" :key="idx" :class="{ 'tab-toggle  pd10 detail-text':true,active: viewTab === content.id }"  @click="showTab(content.id)" >{{content.tabName}}</li>
        </ul>
      </div>
    </div>
    <div class="tab-content">
      <div v-show="viewTab === 'tab1'">
        <div class="chart-zone">
          <div class="mb30" style="height: 40rem;">
            <div class="chart-wrap" ref="chartdiv">
              <ClusteredBarChart :chartData="chartData" columnX="menu" />
            </div>
          </div>
          <div class="table-zone">
            <div class="flex justify-end align-center mb10">
              <div class="gd-2 pd0">
                <button
                  class="large-btn green-border-btn"
                  v-if="pageAuth.fileDwnldAuthrtYn == 'Y'"
                  @click="fnDownload"
                >
                  EXCEL 다운로드
                </button>
              </div>
            </div>
            <table class="list-table admin-list complex-table">
                <colgroup>
                  <col width="20%" />
                  <col width="15%" />
                  <col width="13%" />
                  <col width="13%" />
                  <col width="13%" />
                  <col width="13%" />
                  <col width="13%" />
                </colgroup>
                <thead>
                  <tr>
                    <th rowspan="2">일자</th>
                    <th colspan="6">메뉴별 접속자 수</th>
                  </tr>
                  <tr>
                    <th>전체</th>
                    <th>기술문서</th>
                    <th>공지사항</th>
                    <th>콘텐츠/뉴스룸</th>
                    <th>FAQ</th>
                    <th>연구자료/기타자료</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="text-ct"><p class="pl5 pr5">2024-05-15</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                  </tr>
                </tbody>
            </table>
          </div>
        </div>
      </div>
      <div v-show="viewTab === 'tab2'">
        <div class="chart-zone">
          <div class="chart-info">
            <p class="detail-text">
              다운로드 총 <span class="detail-bold blue">{{ totalCnt }}</span
              >건
            </p>
          </div>
          <div class="chart-wrap mb30" ref="chartdiv">
            <ClusteredBarChart :chartData="chartData" columnX="menu" />
          </div>
          <div class="table-zone">
            <div class="flex justify-end align-center mb10">
              <div class="gd-2 pd0">
                <button
                  class="large-btn green-border-btn"
                  v-if="pageAuth.fileDwnldAuthrtYn == 'Y'"
                  @click="fnDownload"
                >
                  EXCEL 다운로드
                </button>
              </div>
            </div>
            <table class="list-table admin-list complex-table">
                <colgroup>
                  <col width="20%" />
                  <col width="15%" />
                  <col width="13%" />
                  <col width="13%" />
                  <col width="13%" />
                  <col width="13%" />
                  <col width="13%" />
                </colgroup>
                <thead>
                  <tr>
                    <th rowspan="2">일자</th>
                    <th colspan="6">메뉴별 파일 다운로드 수</th>
                  </tr>
                  <tr>
                    <th>전체</th>
                    <th>기술문서</th>
                    <th>공지사항</th>
                    <th>콘텐츠/뉴스룸</th>
                    <th>FAQ</th>
                    <th>연구자료/기타자료</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="text-ct"><p class="pl5 pr5">2024-05-15</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                    <td class="text-rg"><p class="pl5 pr5">666</p></td>
                  </tr>
                </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ClusteredBarChart from "../../../component/chart/ClusteredBarChart.vue";

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

export default {
  components: {
    ClusteredBarChart,
  },
  data() {
    return {
      tabObject:[{id:'tab1',tabName:"조회수"},{id:'tab2',tabName:"다운로드수"}],
      viewTab:'tab1',
      // 페이지 권한 객체
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,

      search: {
        startDt: null,
        endDt: null,
      },
      // 차트 데이터
      chartData: [],
      // 전체 수
      totalCnt: 0,
    };
  },
  created() {
    let today = new Date();
    let date = new Date(today);
    date.setDate(today.getDate() - 10);

    this.search["startDt"] = this.dateFormat(date);
    this.search["endDt"] = this.dateFormat(today);

    this.axiosSelectList();
  },
  methods: {
    showTab(tabId){
      this.viewTab = tabId
    },

    dateFormat(date) {
      return (
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1 < 9
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) +
        "-" +
        (date.getDate() < 9 ? "0" + date.getDate() : date.getDate())
      );
    },

    // 메뉴별 접속 통계
    async axiosSelectList() {
      let data = this.search;
      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["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;
      } catch (error) {
        alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
      }
    },

    // 다운로드
    fnDownload() {
      console.log("fnDownload 실행");
    },
  },
};
</script> -->