<template>
    <div class="chart-page">
        <div class="title-wrap">
            <div class="flex-start">
                <h2 class="main-title">방문자수 통계</h2>
            </div>
        </div>
        <div class="top-wrap">
            <div class="chart-top">
            <div class="flex">
                <div class="date-zone flex-start" v-if="type == 'day'">
                    <!-- <input type="date" name="" id="" min="2023-11-24" :max="visitListSearch.endDate" v-model="visitListSearch.startDate" /> -->
                    <input  type="date" name="" id="" :max="visitListSearch.endDate" v-model="visitListSearch.startDate" />
                    <span>~</span>
                    <!-- <input type="date" name="" id="" :min="visitListSearch.startDate" :max="oneMonthLater" v-model="visitListSearch.endDate" /> -->
                    <input type="date" name="" id="" :min="visitListSearch.startDate" :max="yesterDay" v-model="visitListSearch.endDate" />
                    <button class="blue-btn" @click="visitSelectList()">조회</button>
                </div>
                
                <div class="month-zone flex-start" v-else-if="type == 'month'">
                    <!-- <input type="date" name="" id="" min="2023-11-24" :max="visitListSearch.endDate" v-model="visitListSearch.startDate" /> -->
                    <input  type="month" name="" id="" :max="visitListSearchMonth.endDate" v-model="visitListSearchMonth.startDate" />
                    <span>~</span>
                    <!-- <input type="date" name="" id="" :min="visitListSearch.startDate" :max="oneMonthLater" v-model="visitListSearch.endDate" /> -->
                    <input type="month" name="" id="" :min="visitListSearchMonth.startDate" :max="month" v-model="visitListSearchMonth.endDate" />
                    <button class="blue-btn" @click="visitSelectList()">조회</button>
                </div>
                <div class="year-zone flex-start" v-else-if="type == 'year'"></div>
                <div class="date-check flex-end">
                    <div>
                        <input type="radio" name="dayCategory" id="day" style="display:none" value="day" @click="valueChange($event)" v-model="type">
                        <label for="day">일별</label>
                    </div>
                    <div>
                        <input type="radio" name="dayCategory" id="month" style="display:none" value="month" @click="valueChange($event)">
                        <label for="month">월별</label>
                    </div>
                    <div >
                        <input type="radio" name="dayCategory" id="year" style="display:none" value="year" @click="valueChange($event)">
                        <label for="year">년도별</label>
                    </div>
                </div>
            </div>
        </div>
        <LineChart :chartData="visitList" :keyMapping="keyMap" columnX="날짜" columnY="기업회원" />
        </div>
        <div class="table-zone">
            <div class="btn-wrap">
                <button class="blue-border-bnt" @click="visitLogExcel()">Excel 다운로드</button>
            </div>
            <table class="statistics-table">
                <colgroup>
                    <col style="width: 20%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 20%;"/>
                </colgroup>
                <thead>
                    <tr>
                        <th rowspan="2">일자</th>
                        <th colspan="4">방문자수</th>
                    </tr>
                    <tr>
                        <th>전체</th>
                        <th>기업회원</th>
                        <th>일반회원</th>
                        <th>비회원</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in visitList" :key="index">
                        <td>{{ item.stats_date }}</td>
                        <td>{{ item.total_cnt }}</td>
                        <td>{{ item.cpn_vst_cnt }}</td>
                        <td>{{ item.cmmn_vst_cnt }}</td>
                        <td>{{ item.non_vst_cnt }}</td>
                    </tr>
                    <tr v-if="visitListCount == 0">
                        <td style="font-size: 20px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
                    </tr>
                </tbody>
            </table>
            <table class="sum-table">
                <colgroup>
                    <col style="width: 20%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 20%;"/>
                </colgroup>
                <tbody>
                    <tr>
                        <th>합계</th>
                        <td>{{totalCount.total_cnt}}</td>
                        <td>{{ totalCount.cpn_vst_cnt }}</td>
                        <td>{{ totalCount.cmmn_vst_cnt }}</td>
                        <td>{{ totalCount.non_vst_cnt }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="bottom-wrap">
            <PaginationButton v-model:currentPage="visitListSearch.currentPage" :perPage="visitListSearch.perPage"
                :totalCount="visitListCount" :maxRange="5" :click="visitSelectList" />
        </div>
    </div>
</template>
 
<script>
import axios from 'axios';
import LineChart from '../../../component/chart/LineChart.vue';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';

const App = {

    data() {
        return {
            visitListSearch: {
                currentPage: 1,
                perPage: 7,
                startDate: null,
                endDate: null,
            },

            visitListSearchMonth: {
                currentPage: 1,
                perPage: 7,
                startDate: null,
                endDate: null,
            },
            type: 'day',
            month: null,
            // oneMonthLater: COMMON_UTIL.yesterday(),
            yesterDay: COMMON_UTIL.yesterday(),
            visitList: [],
            visitListCount: 0,
            totalCount:{},
            keyMap : {
                stats_date: '날짜',
                total_cnt: '전체',
                cpn_vst_cnt: '기업회원',
                cmmn_vst_cnt: '일반회원',
                non_vst_cnt: '비회원',
            }
        };
    },
    methods: {

        valueChange: function(event) {
            this.type = event.target.value;
            this.visitSelectList();
        },

        /** 방문자 수 날짜 별 통계 */
        visitSelectList: function () {
            const vm = this;

            let data = null;
            if(vm.type == 'day') {
                data = vm.visitListSearch;
                data.type = vm.type;
            } else {
                data = vm.visitListSearchMonth;
                data.type = vm.type;
            }
            
            axios({
                url: '/statistics/visitSelectList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: data
            }).then(function (response) {
                vm.visitList = response.data.visitList;
                vm.visitListCount = response.data.visitListCount;
                vm.totalCount = response.data.visitSelectTotal;
            }).catch(function (error) {
                console.log("error - ", error)
                alert("방문자 수 조회 오류, 관리자에게 문의하세요.");
            })
        },
        
        // /**날짜선택 유효성 검사 */
        // visitSelectListCheck: function() {
        //     if(COMMON_UTIL.isEmpty(this.visitListSearch.endDate) === false) {
        //         alert("날짜를 선택해주세요.");
        //     } else {
        //         this.visitSelectList();
        //     }
        // },

        /** 방문자 수 엑셀 다운로드 */
        visitLogExcel: function() {
            const vm = this;

            if(vm.visitListCount === 0) {
                alert("데이터가 없어 EXCEL 다운로드를 실행할 수 없습니다.")
                return
            }

            axios({
                url: "/statistics/visitLogExcel.json",
                method: "post",
                herders: {
                "Content-Type": "application/json; charset=UTF-8",
                },
                responseType: 'arraybuffer',
                data: vm.visitListSearch,
            })
            .then(function (response) {
                // console.log("userAccessLogExcel - response : ", response.data);
                const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers["content-type"] }));
                const link = document.createElement("a");
                link.href = url;
                let today = COMMON_UTIL.today();
                link.download = '[' + today + ']' + '권한 별 방문자수';
                link.click();
                window.URL.revokeObjectURL(url);
            })
                .catch(function (error) {
                console.log("userAccessLogExcel - error : ", error);
                alert("방문자 수 Excel 다운로드 오류, 관리자에게 문의해주세요.");
            });
        },
    },
    watch: {
        // 'visitListSearch.startDate': function(newValue) {
        //     let date = COMMON_UTIL.oneMonthLater(newValue);
        //     this.visitListSearch.endDate = null;
        //     if(date > COMMON_UTIL.today()) {
        //         this.oneMonthLater = COMMON_UTIL.yesterday();
        //     } else {
        //         this.oneMonthLater = date;
        //     }
        //     console.log(this.visitListSearch.endDate)
        // },

    },
    computed: {

    },
    components: {
        'LineChart': LineChart,
        PaginationButton: PaginationButton,
    },
    created() {
 
    },
    mounted() {
        this.visitSelectList();

        let today = COMMON_UTIL.today();
        this.month = today.substring(0,7);
    }
}

export default App;
</script>
 
 
 