<template>
    <div class="networking-wrap">
        <div class="content-box">
            <div class="title-wrap">
                <div class="flex-start">
                    <img src="../../../../resources/jpg/subscribe.png" alt="구독 아이콘" class="title-icon">
                    <h2 class="main-title">구독서비스</h2>
                </div>
            </div>
            <div class="btn-wrap">
                <div class="data-select">
                    <select v-model="subscListSearch.searchType" name="data-table-sild" id="data-table-sild"
                        class="data-table-search" @change="valueChange($event)">
                        <option v-for="(item, idx) in option" :key="idx" :value=item.value>
                            {{ item.name }}
                        </option>
                    </select>
                </div>
                <button class="blue-border-bnt" @click="subscExcel()">Excel 다운로드</button>
            </div>
            <div class="content-wrap">
                <table class="select-table">
                    <thead>
                        <tr>
                            <th style="width:10%">no</th>
                            <th style="width:30%">아이디</th>
                            <th style="width:10%">기업명</th>
                            <th style="width:20%">이름</th>
                            <th style="width:30%">이메일</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                            <td>1</td>
                            <td>기업명 들어가는 부분</td>
                            <td>담당자명</td>
                            <td>이메일</td>
                        </tr> -->
                        <tr v-for="(subsc, subIdx) in subscList" :key="subIdx">
                            <td>{{ subscIdx - subIdx }}</td>
                            <td>{{ subsc.user_id }}</td>
                            <td>{{ subsc.company_nm == null ? "-" : subsc.company_nm }}</td>
                            <td>{{ subsc.user_nm }}</td>
                            <td>{{ subsc.user_eml }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="bottom-wrap">
                <PaginationButton v-model:currentPage="subscListSearch.currentPage" :perPage="subscListSearch.perPage"
                    :totalCount="subscListCount" :maxRange="5" :click="subscSelectList" />
            </div>
        </div>
    </div>
</template>
<script>
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import axios from 'axios';

export default {

    data() {
        return {
            subscListSearch: {
                currentPage: 1,
                perPage: 10,
                searchType: 'all',
            },
            subscList: [],
            subscListCount: 0,
            subscIdx: 0,

            option: [
                { name: '전체', value: 'all'},
                { name: '일반회원', value: 'common'},
                { name: '기업회원', value: 'company'},
            ],
        };
    },
    methods: {
        subscSelectList: function () {
            const vm = this;

            axios({
                url: '/subsc/subscSelectList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.subscListSearch
            }).then(function (response) {
                vm.subscList = response.data.subscSelectList;
                vm.subscListCount = response.data.subscSelectListCount;
                vm.subscIdx = vm.subscListCount - (vm.subscListSearch.currentPage - 1) * vm.subscListSearch.perPage;
            }).catch(function (error) {
                alert('구독서비스 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        valueChange: function(event) {
            this.subscListSearch.searchType = event.target.value;
            this.subscSelectList();
        },

        subscExcel: function() {
            const vm = this;

            if(vm.subscListCount === 0) {
                alert("데이터가 없어 EXCEL 다운로드를 실행할 수 없습니다.")
                return
            }
    
            axios({
                url: "/subsc/subscExcel.json",
                method: "post",
                herders: {
                "Content-Type": "application/json; charset=UTF-8",
                },
                responseType: 'arraybuffer',
                data: vm.subscListSearch,
            })
            .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: {},
    computed: {},
    components: {
        PaginationButton: PaginationButton,
    },
    mounted() {
        console.log("subscribe mounted")
        this.subscSelectList()
    }
};
</script>

