tr<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="statistics.length > 0">
              <ClusteredColumnChart :chartData="statistics" 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 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 { rvwMttrStatistics } from "../../../../../resources/api/statistics";

export default {
  mixins: [statisticsDate],
  components: {
    ClusteredColumnChart: ClusteredColumnChart,
  },
  data() {
    return {
      // 데이터 객체
      mapping: {
        type: "구분",
        count: "횟수",
        before: "접수전",
        progress: "처리중",
        complete: "완료",
      },
      thead: [],
      statistics: [],
      rvwMttrTypeList: [],
    };
  },
  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 rvwMttrStatistics(data);
        this.statistics = [];
        this.rvwMttrTypeList = response.data.data.rvwMttrTypeList;
        if (response.data.data.statisticsList.length > 0) {
          this.fnConvertData(response.data.data.statisticsList);
        } 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);
          if (key == "type") {
            newData[th] = this.fnFindType(data[key]);
          } else {
            newData[th] = data[key];
          }
        }
        newDatas.push(newData);
      }
      this.statistics = newDatas;
    },
    // 유형 찾기
    fnFindType(type) {
      let result = null;
      for (let item of this.rvwMttrTypeList) {
        if (type == item.cd) {
          result = item.cdNm;
        }
      }
      return result;
    },
  },
};
</script>