<template>
    <div class="notice-wrap">
        <div class="content-box">
            <div class="title-wrap">
                <div class="flex-start">
                    <img src="../../../../resources/jpg/popup.png" alt="팝업 아이콘" class="title-icon">
                    <h2 class="main-title">팝업관리</h2>
                </div>
            </div>
            <div class="content-wrap NoticeSelectList">
                <div class="btn-wrap">
                    <div class="data-select">
                        <select v-model="popupListSearch.searchType" name="data-table-sild" id="data-table-sild">
                            <!-- <option :value=null selected>전체</option>
                            <option value="title">제목</option>
                            <option value="user">작성자</option>
                            <option value="조회순">조회순</option> -->
                            <option v-for="(item, idx) in option" :key="idx" :value=item.value>
                                {{ item.name }}
                            </option>    
                        </select>
                        <div class="input-group">
                            <input type="text" class="input" placeholder="검색어를 입력해주세요."
                                v-model="popupListSearch.searchText" @keyup.enter="popupSelectList()">
                            <input class="button--submit" value="검색" type="submit" @click="popupSelectList()">
                        </div>
                    </div>
                </div>
                <div class="sort-wrap" style="grid-column: 1 / span 2;">
                    <ul class="flex-end">
                        <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
                            @click="changeColor(index)">
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
                <table class="select-table">
                    <colgroup>
                    <col style="width:10%"/>
                    <col style="width:27%"/>
                    <col style="width:10%"/>
                    <col style="width:10%"/>
                    <col style="width:20%"/>
                    <col style="width:7%"/>
                    <col style="width:16%"/>
                    </colgroup>
                    <thead>
                        <tr>
                            <th>no</th>
                            <th>제목</th>
                            <th>작성자</th>
                            <th>등록일</th>
                            <th>게시기간</th>
                            <th>공지여부</th>
                            <th>기능</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, idx) in popupList" :key="idx" @click="popupSelectOnePage(item)">
                            <td>{{ popupIdx - idx }}</td>
                            <td><p class="popup-title">{{ item.popup_title }}</p></td>
                            <td>{{ item.rgtr_id }}</td>
                            <td>{{ yyyymmdd(item.reg_dt) }}</td>
                            <td>{{ item.start_dt }} ~ {{ item.end_dt }}</td>
                            <td>{{ item.notice_yn == 'Y' ? "Y" : "N" }}</td>
                            <td><button class="blue-btn" @click.stop="popupUpdatePage(item)">수정</button><button class="red-btn" @click.stop="popupDelete(item)">삭제</button></td>
                        </tr>
                        <tr v-if="popupListCount == 0">
                            <td style="font-size: 20px;" colspan="7">검색조건에 해당하는 데이터가 없습니다.</td>
                        </tr>
                    </tbody>
                </table>
                <div class="btn-wrap">
                    <button class="blue-btn" @click="popupInsertPage()">글쓰기</button>
                </div>
            </div>
            <div class="bottom-wrap">
                <PaginationButton v-model:currentPage="popupListSearch.currentPage" :perPage="popupListSearch.perPage"
                    :totalCount="popupListCount" :maxRange="5" :click="popupSelectListPage" />
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';

export default {

    data() {
        return {
            popupListSearch: {
                currentPage: 0,
                perPage: 10,
                searchType: 'all',
                searchText: null,
                sort: 'desc'
            },
            popupListCount: 0,
            popupIdx: 0,
            popupList: [],
            // 최신순 조회순
            sorts: [{ name: '최신순', value: 'desc' },
                    { name: '등록순', value: 'asc' }],
            activeIndex:0,
            option: [
                { name: '전체', value: 'all'},
                { name: '제목', value: 'title'},
                { name: '작성자', value: 'writer'},
            ]
        };
    },
    methods: {
        changeColor(index) {
            this.activeIndex = index;
            this.popupListSearch.sort = this.sorts[index].value;
            this.popupSelectList();
        },
        //날짜 시,분,초 자르기
        yyyymmdd: function (date) {
            return COMMON_UTIL.yyyymmdd(date);
        },
        //게시글 상세조회 페이지로 이동
        popupSelectOnePage: function (item) {
            this.$router.push({ path: '/adm/popupSelectOne.page', query: { "post_id" : item.post_id, "file_id": item.file_id, 'page': this.popupListSearch.currentPage } });
        },
        
        popupInsertPage: function () {
            this.$router.push({ path: '/adm/popupInsert.page', query: {} })
        },

        popupUpdatePage: function (item) {
            this.$router.push({ path: '/adm/popupUpdate.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
        },

        popupSelectListPage: function() {
            this.$router.push({ path: '/adm/popupSelectList.page', query: { 'page': this.popupListSearch.currentPage} });
        },

        popupSelectList: function () {
            const vm = this;

            axios({
                url: '/popup/popupSelectList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.popupListSearch
            }).then(function (response) {
                vm.popupList = response.data.popupSelectList;
                vm.popupListCount = response.data.popupSelectListCount;
                vm.popupIdx = vm.popupListCount - (vm.popupListSearch.currentPage - 1) * vm.popupListSearch.perPage;
            }).catch(function (error) {
                alert('팝업 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        popupDelete: function (item) {
            if(!confirm("해당 팝업을 삭제하시겠습니까?")){
                return;
            }

            const vm = this;

            axios({
                url: "/popup/popupDelete.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: item
            }).then(function (response) {
                let result = response.data;
                if (result > 0) {
                    alert("삭제가 완료 되었습니다.");
                    vm.popupSelectListPage();
                } else {
                    alert("삭제실패, 다시 시도 해주세요.");
                }
            }).catch(function (error) {
                console.log("postDelete - error : ", error);
                alert("삭제 오류, 관리자에게 문의해주세요.");
            });
        },


    },
    watch: {
        'popupListSearch.currentPage': function () {
            this.popupSelectList();
        },
    },
    computed: {},
    components: {
        PaginationButton: PaginationButton,
    },
    created() {
        if(this.$route.query.page) {
            this.popupListSearch.currentPage = Number(this.$route.query.page);
        } else {
            this.popupListSearch.currentPage = 1;
        }
    },
    mounted() {
        if(!this.$route.query.page) {
            this.popupSelectList();
        }
    }
};
</script>

