<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-3 pl0" style="height: 100%">
          <select name="" id="" class="full-select" v-model="search.searchCtgry">
            <option value=""> 전체 </option>
            <option v-for="(ctgry, idx) in dscsnCtgryList" :key="idx" :value=ctgry.dscsnCtgryId> {{ ctgry.dscsnCtgryNm
              }} </option>
          </select>
        </div>
        <div class="gd-3 pl0 pr0" style="height: 100%">
          <input type="date" class="full-input" v-model="search.startDt" :max="search.endDt" />
        </div>
        <div class="pd10">-</div>
        <div class="gd-3 pl0 pr0" style="height: 100%">
          <input type="date" class="full-input" v-model="search.endDt" :min="search.startDt" :max="today" />
        </div>
        <div class="gd-2">
          <button class="large-btn blue-border-btn" @click="axiosSelectList">
            조회
          </button>
        </div>
      </div>
      <!-- <div class="gd-1">
        <button
          class="large-btn green-border-btn"
          v-if="pageAuth.fileDwnldAuthrtYn == 'Y'"
          @click="fnDownload"
        >
          EXCEL 다운로드
        </button>
      </div> -->
    </div>
    <div class="chart-zone">
      <div class="mb20" style="min-height:411px">
        <div class="border radius pd20 content">
          <div class="pb10 border-b mb15">
            <p class="page-sub-title">상담 현황</p>
          </div>
          <div class="flex align-center">
            <div class="gd-6 mb15" v-for="(dscsn, idx) in dscsnStatusList" :key="idx">
              <div class="border radius pd15">
                  <label for="all" class="box-bold-title inline-block mb10">{{ dscsn.cd_nm }}</label>
                  <div class="flex align-end mb15">
                    <p class="admin-sec-title">{{ dscsn.ratio }}%</p>
                    <p class="small-text ml10">({{ dscsn.count }}/{{ dscsn.allcount }})</p>
                  </div>
                <div>
                  <div><progress id="all" max="100" :value=dscsn.ratio class="content"></progress></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mb20">
        <div class="" style="min-height:411px">
          <div class="border radius pd20 content">
            <div class="pb10 border-b mb15">
              <p class="page-sub-title ">카테고리 분류</p>
            </div>
            <div class="flex aling-center">
              <div class="gd-8 flex-column justify-center">
                <div class="pl0" ref="pieChartdiv" style="height:400px">
                  <PieChart :chartData="chartData" value="count" category="dscsn_ctgry_nm"></PieChart>
                </div>
              </div>
              <div class="gd-4 pr0">
                <table class="terms-table">
                  <colgroup>
                    <col width="10%" />
                    <col width="55%" />
                    <col width="40%" />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>순위</th>
                      <th>카테고리</th>
                      <th>건수</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(data, idx) in chartData" :key="idx">
                      <td class="text-ct pd5">{{ data.rank }}</td>
                      <td class="pd5" :title="data.dscsn_ctgry_nm">
                        <p>{{ data.dscsn_ctgry_nm }}</p>
                      </td>
                      <td class="text-rg pd5">{{ $comma(data.count) }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="border radius pd20">
          <div class="pb10 border-b mb15">
            <p class="page-sub-title ">기업 별 상담 통계</p>
          </div>
          <div class="mb30" style="height: 40rem;">
            <div class="chart-wrap" ref="singleBarchartDiv">
              <SingleBarChart :chartData="entDscsnList" xField="ent_nm" yField="count" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueDatePicker from "@vuepic/vue-datepicker";
import PieChart from "../../../component/chart/PieChart.vue";
import SingleBarChart from "../../../component/chart/SingleBarChart.vue";
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
import queryParams from "../../../../resources/js/queryParams";
import { defaultSearchParams } from "../../../../resources/js/defaultSearchParams";

// API
import { dscsnCntnStatsProc } from "../../../../resources/api/cntnStats";
import { findAllCtgry } from "../../../../resources/api/inquiry";
import { CategoryDateAxis } from "@amcharts/amcharts5/xy";

export default {
  mixins: [queryParams],
  components: {
    PaginationButton,
    VueDatePicker,
    PieChart,
    SingleBarChart
  },
  data() {
    return {
      // 페이지 권한 객체
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,

      // 검색 정보 담는 객체
      search: { ...defaultSearchParams },

      // search: {
      //   startDt: null,
      //   endDt: null,
      // },

      // 차트 데이터
      chartData: [],
      // 전체 수
      totalCnt: 0,

      //오늘날짜
      today: this.$today(),

      //상담 카테고리 목록
      dscsnCtgryList: [],

      //상담 현황 통계
      dscsnStatusList: [],

      //카테고리 별 기업 상담 수
      entDscsnList: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.resotreQueryParams("queryParams");
      this.search.startDt = this.$oneWeekAgo();
      this.search.endDt = this.$today();
      this.findAllCtgry();
      this.axiosSelectList();
    },

    // 상담 통계
    async axiosSelectList() {
      let data = this.search;

      try {
        const response = await dscsnCntnStatsProc(data);
        this.dscsnStatusList = response.data.data.status;
        this.chartData = response.data.data.classify;
        this.entDscsnList = response.data.data.entDscsn;
      } catch (error) {
        // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
        alert(this.$getCmmnMessage('err005'));
      }
    },

    async findAllCtgry() {
      try {
        const response = await findAllCtgry();
        this.dscsnCtgryList = response.data.data.categoryList;
      } catch (error) {
        // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
        alert(this.$getCmmnMessage('err005'));
      }
    },

    // 다운로드
    fnDownload() {     
    },
  },
};
</script>