<template>
  <div class="content pt50 pb50">
    <div class="w1200 content">
      <div class="page-title point-font mb30">
        <p>상담신청 통계</p>
      </div>
      <div class="pt10 pb10">
        <div class="chart-zone mb30">
          <div class="box">
            <div class="flex justify-between aling-center no-gutters mb30">
              <div class="gd-6 flex justify-start align-center">
                <div class="gd-4 pl0">
                  <input type="date" class="full-input" v-model="searchDate.startDt"
                    @change="validateDate($event, 'startDt')" />
                </div>
                <div>-</div>
                <div class="gd-4">
                  <input type="date" class="full-input" v-model="searchDate.endDt"
                    @change="validateDate($event, 'endDt')" />
                </div>
                <div class="gd-2">
                  <button class="large-btn green-border-btn" @click="statisticsList">
                    조회
                  </button>
                </div>
              </div>
            </div>
            <div class="chart-wrap" ref="chartdiv" v-if="chartData.length > 0">
              <ClusteredColumnChart :chartData="chartData" columnX="날짜" />
            </div>
          </div>
        </div>
        <div class="statistics-table-wrap">
          <table class="form-table2 statistics-table mb10">
            <template v-if="statistics.length > 0">
              <colgroup>
                <col v-for="(key, index) of thead" :key="index" :width="100 / thead.length + '%'" />
              </colgroup>
              <thead>
                <tr>
                  <th v-for="(key, index) of thead" :key="index" class="point-font">
                    {{ key }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(tr, index) of statistics" :key="index">
                  <template v-for="(key, idx) of thead" :key="idx">
                    <th v-if="idx == 0" class="point-font">
                      {{ tr[key] }}
                    </th>
                    <td v-else-if="idx != 0 && idx < 3" class="text-ct">
                      {{ tr[key] }}
                    </td>
                    <td v-else class="text-rg">
                      {{ tr[key].toLocaleString("ko-KR") }}
                    </td>
                  </template>
                </tr>
              </tbody>
            </template>
            <template v-else>
              <tbody>
                <tr>
                  <td class="text-ct data-none">
                    등록된 정보가 존재하지 않습니다.
                  </td>
                </tr>
              </tbody>
            </template>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

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

// API
import { consultationStatistics } from "../../../../../resources/api/statistics";

export default {
  mixins: [statisticsDate],
  components: {
    ClusteredColumnChart: ClusteredColumnChart,
  },
  data() {
    return {
      // 데이터 객체
      mapping: {
        years: "연도",
        months: "월",
        days: "일",
        aply_cnt: "상담신청 건수",
        complete_cnt: "상담실시 건수",
      },
      thead: [],
      statistics: [],
      chartData: [],
    };
  },
  created() {
    this.thead = Object.values(this.mapping);

    this.statisticsList();
  },
  methods: {
    // 분류별 통계
    async statisticsList() {
      // 유효성 검사
      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;
      // 실행
      try {
        const response = await consultationStatistics(data);
        if (response.data.data.length > 0) {
          this.fnConvertData(response.data.data);
        } else {
          this.statistics = [];
          this.chartData = [];
        }
      } catch (error) {
        alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
      }
    },

    // 데이터 가공
    fnConvertData(datas) {
      const mapping = this.mapping;
      let newDatas = [];
      for (let data of datas) {
        let newData = {};
        for (let th of this.thead) {
          let key = Object.keys(mapping).find((key) => mapping[key] === th);
          newData[th] = data[key];
        }
        newDatas.push(newData);
      }
      this.statistics = newDatas;
      this.fnConvertChart(newDatas);
    },
    // 차트 데이터 가공
    fnConvertChart(datas) {
      let dataList = [];
      for (let data of datas) {
        data["날짜"] = data["연도"] + "-" + data["월"] + "-" + data["일"];
        const { 연도, 월, 일, ...chart } = data;
        dataList.push(chart);
      }
      this.chartData = dataList;
    },
  },
};
</script>