<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">
                    <!-- <input type="date" name="" id="" min="2023-11-24" :max="postListSearch.endDate" v-model="postListSearch.startDate"> -->
                    <input type="date" name="" id="" :max="postListSearch.endDate" v-model="postListSearch.startDate">
                    <span>~</span>
                    <!-- <input type="date" name="" id="" :min="postListSearch.startDate" :max="oneMonthLater" v-model="postListSearch.endDate"> -->
                    <input type="date" name="" id="" :min="postListSearch.startDate" :max="yesterDay" v-model="postListSearch.endDate">
                    <button class="blue-btn" @click="typeCheck()">조회</button>
                </div>
                <div class="date-check flex-end">
                    <div>
                        <input type="radio" name="dayCategory" value="view" id="check" style="display:none" @change="typeCheck()" v-model="selectType">
                        <label for="check">조회수</label>
                    </div>
                    <div>
                        <input type="radio" name="dayCategory" value="dwld" id="download" style="display:none" @change="typeCheck()" v-model="selectType">
                        <label for="download">다운로드수</label>
                    </div>
                </div>
            </div>
        </div>
        <BarChart :chartData="logListByDate" :mapping="keyMapping" columnX="post_title"/>
        </div>
        <div class="table-zone">
            <div class="btn-wrap">
                <button class="blue-border-bnt" @click="logExcel()">Excel 다운로드</button>
            </div>
            <table class="statistics-view-table" v-if="selectType == 'view'">
                <colgroup>
                    <col style="width: 25%;"/>
                    <col style="width: 25%;"/>
                    <col style="width: 25%;"/>
                    <col style="width: 25%;"/>
                </colgroup>
                <thead>
                    <tr>
                        <th rowspan="2">게시글명</th>
                        <th colspan="3">전문가협의체</th>
                    </tr>
                    <tr>
                        <th>전체</th>
                        <th>기업회원</th>
                        <th>일반회원</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in logListByDate" :key="index">
                        <td>{{ item.post_title }}</td>
                        <td>{{ item.total }}</td>
                        <td>{{ item.company }}</td>
                        <td>{{ item.common }}</td>
                    </tr>
                    <tr v-if="logListByDateCount == 0">
                        <td style="font-size: 20px; text-align: center;" colspan="4">검색조건에 해당하는 데이터가 없습니다.</td>
                    </tr>
                </tbody>
            </table>
            <table class="statistics-down-table" v-else>
                <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 rowspan="2">파일명</th>
                        <th colspan="3">전문가협의체</th>
                    </tr>
                    <tr>
                        <th>전체</th>
                        <th>기업회원</th>
                        <th>일반회원</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in logListByDate" :key="index">
                        <td>{{ item.title }}</td>
                        <td>{{ item.real_file_nm }}</td>
                        <td>{{ item.total }}</td>
                        <td>{{ item.company }}</td>
                        <td>{{ item.common }}</td>
                    </tr>
                    <tr v-if="logListByDateCount == 0">
                        <td style="font-size: 20px; text-align: center;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
                    </tr>
                </tbody>
            </table>
            <table class="sum-table"  v-if="selectType == 'view'">
                <colgroup>
                    <col style="width: 25%;"/>
                    <col style="width: 25%;"/>
                    <col style="width: 25%;"/>
                    <col style="width: 25%;"/>
                </colgroup>
                <tbody>
                    <tr>
                        <th>합계</th>
                        <td>{{ logTotalCount.total }}</td>
                        <td>{{ logTotalCount.company }}</td>
                        <td>{{ logTotalCount.common }}</td>
                    </tr>
                </tbody>
            </table>
            <table class="sum-table" v-else>
                <colgroup>
                    <col style="width: 40%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 20%;"/>
                </colgroup>
                <tbody>
                    <tr>
                        <th>합계</th>
                        <td>{{ logTotalCount.total }}</td>
                        <td>{{ logTotalCount.company }}</td>
                        <td>{{ logTotalCount.common }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="bottom-wrap">
            <PaginationButton v-model:currentPage="postListSearch.currentPage" :perPage="postListSearch.perPage"
                :totalCount="logListByDateCount" :maxRange="5" :click="typeCheck" />
        </div>
    </div>
</template>
 
<script>
import axios from 'axios';
import BarChart from '../../../component/chart/BarChart.vue';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';

const App = {

    data() {
        return {
            keyMapping: {
                post_title: "제목",
                total: "전체",
                company: "기업회원",
                common: "일반회원",
            },
            postListSearch: {
                currentPage: 1,
                perPage: 7,
                startDate: null,
                endDate: null,
                bbs_id: '4'
            },

            yesterDay: COMMON_UTIL.yesterday(),
            logListByDate: [],
            logListByDateCount: 0,
            logTotalCount: {},
            selectType: 'view'
        };
    },
    methods: {
         /** 권한 별 로그인 수 날짜 별 통계 */
        postLogList: function () {
            const vm = this;
            axios({
                url: '/statistics/postLogListByDate.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.postListSearch
            }).then(function (response) {
                vm.logListByDate = response.data.postLogListByDate;
                vm.logListByDateCount = response.data.postLogListByDateCount;
                vm.logTotalCount = response.data.postLogTotal;
            }).catch(function (error) {
                console.log("error - ", error)
                alert("게시글 별 조회수 조회 오류, 관리자에게 문의하세요.");
            })
        },

        /** 권한 별 파일 다운로드 수 날짜 별 통계 */
        dwldLogList: function () {
            const vm = this;
            axios({
                url: '/statistics/postDwldLogListByDate.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.postListSearch
            }).then(function (response) {
                vm.logListByDate = response.data.postDwldLogListByDate;
                vm.logListByDateCount = response.data.postDwldLogListByDateCount;
                vm.logTotalCount = response.data.postDwldLogTotal;
            }).catch(function (error) {
                console.log("error - ", error)
                alert("게시글 별 조회수 조회 오류, 관리자에게 문의하세요.");
            })
        },

        /** 권한 별 게시글 조회수 엑셀 다운로드 */
        logExcel: function() {
            const vm = this;

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

            if(vm.selectType == 'view') {
                axios({
                url: "/statistics/postLogExcel.json",
                method: "post",
                herders: {
                "Content-Type": "application/json; charset=UTF-8",
                },
                responseType: 'arraybuffer',
                data: vm.postListSearch,
                })
                .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 다운로드 오류, 관리자에게 문의해주세요.");
                });
            } else {
                axios({
                    url: "/statistics/postDwldLogExcel.json",
                    method: "post",
                    herders: {
                    "Content-Type": "application/json; charset=UTF-8",
                    },
                    responseType: 'arraybuffer',
                    data: vm.postListSearch,
                })
                .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 다운로드 오류, 관리자에게 문의해주세요.");
                });
            }
        },

        typeCheck: function() {
            if(this.selectType == 'view') {
                    this.postLogList();
            } else {
                this.dwldLogList();
            }
        },

        dateCheck: function() {
            if(COMMON_UTIL.isEmpty(this.postListSearch.endDate) === false) {
                alert("날짜를 선택해주세요.");
            } else {

                if(this.selectType == 'view') {
                    this.postLogList();
                } else {
                    this.dwldLogList();
                }
            }
        },
    },
    watch: {
        // 'postListSearch.startDate': function(newValue) {
        //     let date = COMMON_UTIL.oneMonthLater(newValue);
        //     this.postListSearch.endDate = null;
        //     if(date > COMMON_UTIL.today()) {
        //         this.oneMonthLater = COMMON_UTIL.yesterday();
        //     } else {
        //         this.oneMonthLater = date;
        //     }
        // },
    },
    computed: {

    },
    components: {
        'BarChart': BarChart,
        PaginationButton: PaginationButton,
    },
    mounted() {
        this.postLogList();
    }
}

export default App;
</script>
 
 
 