<template>
    <div class="chart-page">
        <div class="title-wrap">
            <div class="flex-start">
                <h2 class="main-title">기업홍보관 통계</h2>
            </div>
        </div>
        <div class="chart-top">
            <div class="flex">
                <div class="date-zone flex-start">
                    <!-- <input type="date" name="" id="" min="2023-11-24" :max="companyListSearch.endDate" v-model="companyListSearch.startDate"> -->
                    <input type="date" name="" id="" :max="companyListSearch.endDate" v-model="companyListSearch.startDate">
                    <span>~</span>
                    <!-- <input type="date" name="" id="" :min="companyListSearch.startDate" :max="oneMonthLater" v-model="companyListSearch.endDate"> -->
                    <input type="date" name="" id="" :min="companyListSearch.startDate" :max="yesterDay" v-model="companyListSearch.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="companyListByDate" :mapping="keyMapping" columnX="company_nm"/>
        <div class="table-zone">
            <div class="btn-wrap">
                <button class="blue-border-bnt" @click="logExcel()">Excel 다운로드</button>
            </div>
            <table class="statistics-table">
                <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 companyListByDate" :key="index">
                        <td>{{ item.company_nm }}</td>
                        <td>{{ item.total }}</td>
                        <td>{{ item.company }}</td>
                        <td>{{ item.common }}</td>
                    </tr>
                    <tr v-if="companyListByDateCount == 0">
                        <td style="font-size: 20px;" colspan="4">검색조건에 해당하는 데이터가 없습니다.</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>{{ companyViewTotal.total }}</td>
                        <td>{{ companyViewTotal.company }}</td>
                        <td>{{ companyViewTotal.common }}</td>
                    </tr>
                </tbody>
            </table>
            <table class="sum-table" v-else>
                <colgroup>
                    <col style="width: 25%;"/>
                    <col style="width: 25%;"/>
                    <col style="width: 25%;"/>
                    <col style="width: 25%;"/>
                </colgroup>
                <tbody>
                    <tr>
                        <th>합계</th>
                        <td>{{ companyViewTotal.total }}</td>
                        <td>{{ companyViewTotal.company }}</td>
                        <td>{{ companyViewTotal.common }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="bottom-wrap">
            <PaginationButton v-model:currentPage="companyListSearch.currentPage" :perPage="companyListSearch.perPage"
                :totalCount="companyListByDateCount" :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: {
                company_nm: "기업명",
                total: "전체회원",
                company: "기업회원",
                common: "일반회원",
            },
            
            companyListSearch: {
                currentPage: 1,
                perPage: 7,
                startDate: null,
                endDate: null,
            },

            yesterDay: COMMON_UTIL.yesterday(),
            companyListByDate: [],
            companyListByDateCount: 0,
            companyViewTotal: {},
            selectType: 'view'
        };
    },
    methods: {
         /** 권한 별 로그인 수 날짜 별 통계 */
         companyLogList: function () {
            const vm = this;
            axios({
                url: '/statistics/companyViewListByDate.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.companyListSearch
            }).then(function (response) {
                vm.companyListByDate = response.data.companyViewListByDate;
                vm.companyListByDateCount = response.data.companyViewListByDateCount;
                vm.companyViewTotal = response.data.companyViewTotal;
            }).catch(function (error) {
                console.log("error - ", error)
                alert("기업 별 조회수 조회 오류, 관리자에게 문의하세요.");
            })
        },

        /** 권한 별 기업소개서 다운로드 수 날짜 별 통계 */
        profileLogList: function () {
            const vm = this;
            axios({
                url: '/statistics/profileDwldListByDate.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.companyListSearch
            }).then(function (response) {
                vm.companyListByDate = response.data.profileDwldListByDate;
                vm.companyListByDateCount = response.data.profileDwldListByDateCount;
                vm.companyViewTotal = response.data.profileDwldTotal;
            }).catch(function (error) {
                console.log("error - ", error)
                alert("기업소개서 다운로드수 조회 오류, 관리자에게 문의하세요.");
            })
        },

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

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

            if(vm.selectType == 'view') {
                axios({
                url: "/statistics/companyLogExcel.json",
                method: "post",
                herders: {
                "Content-Type": "application/json; charset=UTF-8",
                },
                responseType: 'arraybuffer',
                data: vm.companyListSearch,
                })
                .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/profileDwldLogExcel.json",
                    method: "post",
                    herders: {
                    "Content-Type": "application/json; charset=UTF-8",
                    },
                    responseType: 'arraybuffer',
                    data: vm.companyListSearch,
                })
                .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.companyLogList();
            } else {
                this.profileLogList();
            }
        },

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

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

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

export default App;
</script>
 
 
 