<template>
    <div class="w1400">
        <section class="main-sec sec1">
            <!-- <div class="main-content"> -->
            <div class="flex">
                <!-- 매칭관리 비주얼 -->
                <div class="data-b">
                    <div class="w1400">
                        <div class="data-b-b">
                            <!-- 매칭관리 텍스트 -->
                            <div class="page-logo flex-start">
                                <img src="../../../../resources/jpg/macthing-img.png" alt="">
                                <h1>매칭관리</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div style="margin-bottom: 6rem; padding: 0 0.5rem;">
            <section class="matching-wrap-sub">
                <div class="matching-box-button">
                    <div @click="selectedBox = 'inbox'">

                        <input type="radio" id="inbox" value="inbox" v-model="selectedBox" @click="pickView()">
                        <label for="inbox">Pick</label>
                    </div>
                    <div @click="selectedBox = 'outbox'">

                        <input type="radio" id="outbox" value="outbox" v-model="selectedBox" @click="matchingView()">
                        <label for="outbox">Macthing</label>
                    </div>

                </div>

            </section>
            <div>
                <!-- 상세 1-->
                <section>
                    <div v-if="selectedBox === 'inbox'" class="inbox">
                        <section class="matching-section-box">
                            <div>
                                <h2>수신함</h2>
                            </div>
                            <div v-if="pickReceptionList.length === 0" class="matching-box-text"> 수신된 Pick이 없습니다.</div>
                            <div v-else class="inbox-sub">
                                <div class="inbox-img inbox-img-blur" v-for="(item, idx) in displayedItems" :key="idx">
                                    <h4>{{ item.company_nm }}</h4>
                                    <div class="img-wrap">

                                        <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
                                            alt="명함박스">
                                    </div>
                                    <div v-if="!item.complete_yn" class="inbox-button">
                                        <button @click="pickModal(item)" class="blue-btn small-btn">수락</button>
                                        <button @click="pickRefusalModal(item)" class="gray-btn small-btn">거절</button>
                                    </div>
                                    <div v-else>
                                        <p class="blue-border-bnt small-btn">PICK 완료</p>
                                    </div>
                                </div>

                            </div>
                            <div class="mat-user-button">
                                <button v-if="pickReceptionList.length > 4 && !showMore" @click="showMore = true"
                                    class=" small-btn">
                                    더보기
                                </button>
                                <PaginationButton v-if="showMore" v-model:currentPage="pickReceptionListSearch.currentPage"
                                :perPage="pickReceptionListSearch.perPage" :totalCount="pickReceptionListCount" :maxRange="5"
                                :click="pickReceptionSelectList" />
                                <button v-if="showMore" @click="showMore = false" class="small-btn">
                                    숨기기
                                </button>
                            </div>

                        </section>
                        <section class="matching-section-box">
                            <div>
                                <h2>발신함</h2>
                            </div>
                            <div v-if="pickDispatchList.length === 0" class="matching-box-text"> 발신된 Pick이 없습니다.</div>
                            <div v-else class="inbox-sub">
                                <div class="inbox-img" v-for="(item, idx) in displayedItems2" :key="idx">
                                    <h4>{{ item.company_nm }}</h4>
                                    <div class="img-wrap">

                                        <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
                                            alt="명함박스">
                                    </div>
                                    <div v-if="item.refuse_yn === 'N'" class="inbox-button">
                                        <button class="dark-gray-btn small-btn">응답대기중</button>
                                        <button class="red-btn small-btn" @click="pickCancelModal(item)">취소</button>
                                    </div>
                                    <div v-else>
                                        <button class="dark-gray-btn small-btn">거절됨</button>
                                    </div>
                                </div>
                            </div>
                            <div class="mat-user-button">
                                <button v-if="pickDispatchList.length > 4 && !showMore2" @click="showMore2 = true"
                                    class=" small-btn">
                                    더보기
                                </button>
                                <PaginationButton v-if="showMore2" v-model:currentPage="pickDispatchListSearch.currentPage"
                                :perPage="pickDispatchListSearch.perPage" :totalCount="pickDispatchListCount" :maxRange="5"
                                :click="pickDispatchSelectList" />
                                <button v-if="showMore2" @click="showMore2 = false" class="small-btn">
                                    숨기기
                                </button>
                            </div>
                        </section>

                        <section class="matching-section-box">

                            <h2>완료</h2>
                            <div v-if="pickCompleteList.length === 0" class="matching-box-text"> 완료된 Pick이 없습니다.</div>
                            <div v-else class="inbox-sub">
                                <div class="inbox-img" v-for="(item, idx) in displayedItems3" :key="idx">
                                    <h4>{{ item.company_nm }}</h4>
                                    <div class="img-wrap">
                                        <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
                                            alt="명함박스">
                                    </div>
                                    <div class="inbox-button">
                                        <button v-if="item.matching_yn" class="gray-btn small-btn">신청 완료</button>
                                        <button v-else @click="matchingModal(item)" class="blue-btn small-btn">매칭
                                            신청</button>
                                        <button @click="cardView(item)" class="red-border-btn small-btn">명함 보기</button>
                                    </div>
                                </div>
                            </div>
                            <div class="mat-user-button">
                                <button v-if="pickCompleteList.length > 4 && !showMore3" @click="showMore3 = true"
                                    class=" small-btn">
                                    더보기
                                </button>
                                <PaginationButton v-if="showMore3" v-model:currentPage="pickCompleteListSearch.currentPage"
                                :perPage="pickCompleteListSearch.perPage" :totalCount="pickCompleteListCount" :maxRange="5"
                                :click="pickCompleteSelectList" />
                                <button v-if="showMore3" @click="showMore3 = false" class="small-btn">
                                    숨기기
                                </button>
                            </div>
                        </section>
                    </div>
                </section>

                <!-- 상세2 -->
                <section>
                    <div v-if="selectedBox === 'outbox'">
                        <section class="matching-section-box">
                            <div>
                                <h2>수신함</h2>
                            </div>
                            <div v-if="matchingReceptionList.length === 0" class="matching-box-text"> 수신된 Macthing이 없습니다.
                            </div>
                            <div v-else class="inbox-sub">
                                <div class="inbox-img" v-for="(item, idx) in displayedItems4" :key="idx">
                                    <h4>{{ item.company_nm }}</h4>
                                    <div class="img-wrap">
                                        <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
                                            alt="명함박스">
                                    </div>
                                    <div v-if="!item.complete_yn">
                                        <button @click="matchingAcceptModal(item)" class="blue-btn">수락</button>
                                        <button @click="matchingRefusalModal(item)" class="red-btn">거절</button>
                                    </div>
                                    <div v-else>
                                        <p class="blue-border-btn">매칭 완료</p>
                                    </div>
                                </div>
                            </div>
                            <div class="mat-user-button">
                                <button v-if="matchingReceptionList.length > 4 && !showMore4" @click="showMore4 = true"
                                    class=" small-btn">
                                    더보기
                                </button>
                                <PaginationButton v-if="showMore4" v-model:currentPage="matchingReceptionListSearch.currentPage"
                                :perPage="matchingReceptionListSearch.perPage" :totalCount="matchingReceptionListCount" :maxRange="5"
                                :click="matchingReceptionSelectList" />
                                <button v-if="showMore4" @click="showMore4 = false" class="small-btn">
                                    숨기기
                                </button>
                            </div>
                        </section>
                        <section class="matching-section-box">
                            <div>
                                <h2>발신함</h2>
                            </div>
                            <div v-if="matchingDispatchList.length === 0" class="matching-box-text"> 발신된 Macthing이 없습니다.
                            </div>
                            <div v-else class="inbox-sub">
                                <div class="inbox-img" v-for="(item, idx) in displayedItems5" :key="idx">
                                    <h4>{{ item.company_nm }}</h4>
                                    <div class="img-wrap">
                                        <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
                                            alt="명함박스">
                                    </div>
                                    <div v-if="item.refuse_yn === 'N'" class="inbox-button">
                                        <button class="dark-gray-btn">응답대기중</button>
                                        <button class="red-btn" @click="matchingCancelModal(item)">취소</button>
                                    </div>
                                    <div v-else>
                                        <button class="gray-btn">거절됨</button>
                                    </div>
                                </div>
                            </div>
                            <div class="mat-user-button">
                                <button v-if="matchingDispatchList.length > 4 && !showMore5" @click="showMore5 = true"
                                    class=" small-btn">
                                    더보기
                                </button>
                                <PaginationButton v-if="showMore5" v-model:currentPage="matchingDispatchListSearch.currentPage"
                                :perPage="matchingDispatchListSearch.perPage" :totalCount="matchingDispatchListCount" :maxRange="5"
                                :click="matchingDispatchSelectList" />
                                <button v-if="showMore5" @click="showMore5 = false" class="small-btn">
                                    숨기기
                                </button>
                            </div>
                        </section>
                        <section class="matching-section-box">
                            <h2>완료</h2>
                            <div v-if="matchingCompleteList.length === 0" class="matching-box-text"> 완료된 Macthing이 없습니다.
                            </div>
                            <div v-else class="inbox-sub">
                                <div class="inbox-img inbox-img-logo" v-for="(item, idx) in displayedItems6"
                                    :key="idx">
                                    <h4>{{ item.company_nm }}</h4>
                                    <div class="img-wrap">
                                        <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
                                            alt="명함박스">
                                    </div>
                                    <div>
                                        <button @click="matchingResetModal(item)" class="red-btn">매칭 취소</button>
                                        <button @click="companyOnePage(item)" class="red-border-btn red-btn">기업 정보</button>
                                    </div>
                                </div>
                            </div>
                            <div class="mat-user-button">
                                <button v-if="matchingCompleteList.length > 4 && !showMore6" @click="showMore6 = true"
                                    class=" small-btn">
                                    더보기
                                </button>
                                <PaginationButton v-if="showMore6" v-model:currentPage="matchingCompleteListSearch.currentPage"
                                :perPage="matchingCompleteListSearch.perPage" :totalCount="matchingCompleteListCount" :maxRange="5"
                                :click="matchingCompleteSelectList" />
                                <button v-if="showMore6" @click="showMore6 = false" class="small-btn">
                                    숨기기
                                </button>
                            </div>
                        </section>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <!-- ------------------------------------------------------------------------------------------------------------------- -->

    <!-- 매칭 완료시 명함 노출 모달 -->
    <div class="matchingmodal" v-if="isVisible">
        <div class="matching-modal-box">
            <div>
                <h1>{{ company_nm }}</h1>
            </div>
            <div call="inbox-img">
                <img :src="cardFullPath" alt="명함박스">
            </div>
            <div>
                <button @click="hideDiv">확인</button>
            </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 {
            pickReceptionListSearch: {
                currentPage: 1,
                perPage: 8,
                searchType: null,
                searchText: null,
            },

            pickDispatchListSearch: {
                currentPage: 1,
                perPage: 8,
                searchType: null,
                searchText: null,
            },

            pickCompleteListSearch: {
                currentPage: 1,
                perPage: 8,
                searchType: null,
                searchText: null,
            },

            matchingReceptionListSearch: {
                currentPage: 1,
                perPage: 8,
                searchType: null,
                searchText: null,
            },

            matchingDispatchListSearch: {
                currentPage: 1,
                perPage: 8,
                searchType: null,
                searchText: null,
            },

            matchingCompleteListSearch: {
                currentPage: 1, 
                perPage: 8,
                searchType: null,
                searchText: null,
            },

            // PICK 수신함
            pickReceptionList: [],
            pickReceptionListCount: 0,
            pickReceptionIdx: 0,

            // PICK 발신함
            pickDispatchList: [],
            pickDispatchListCount: 0,
            pickDispatchIdx: 0,

            // PICK 완료 리스트
            pickCompleteList: [],
            pickCompleteListCount: 0,
            pickCompleteIdx: 0,

            // MATCHING 수신함
            matchingReceptionList: [],
            matchingReceptionListCount: 0,
            matchingReceptionIdx: 0,

            // MATCHING 발신함
            matchingDispatchList: [],
            matchingDispatchListCount: 0,
            matchingDispatchIdx: 0,

            // MATCHING 완료 리스트
            matchingCompleteList: [],
            matchingCompleteListCount: 0,
            matchingCompleteIdx: 0,

            selectedBox: 'inbox',
            companyTop6List: [],
            //명함보기 모달창
            isVisible: false,
            company_nm: null,
            cardFullPath: null,
            showMore: false,
            showMore2:false,
            showMore3:false,
            showMore4:false,
            showMore5:false,
            showMore6:false
        }
    },
    methods: {
        pickView: function () {
            this.selectedBox = 'inbox';
            this.pickReceptionSelectList();
            this.pickDispatchSelectList();
            this.pickCompleteSelectList();
        },

        matchingView: function () {
            this.selectedBox = 'outbox';
            this.matchingReceptionSelectList();
            this.matchingDispatchSelectList();
            this.matchingCompleteSelectList();
        },

        pickReceptionSelectList: function () {
            const vm = this;

            axios({
                url: '/myPage/pickReceptionList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.pickReceptionListSearch
            }).then(function (response) {
                vm.pickReceptionList = response.data.pickReceptionList;
                vm.pickReceptionListCount = response.data.pickReceptionListCount;

                // vm.pickReceptionListCount = vm.pickReceptionList;
                // vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;

            }).catch(function (error) {
                console.log('error - ', error)
                alert('수신함 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        pickDispatchSelectList: function () {
            const vm = this;

            axios({
                url: '/myPage/pickDispatchList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.pickDispatchListSearch
            }).then(function (response) {
                vm.pickDispatchList = response.data.pickDispatchList;
                vm.pickDispatchListCount = response.data.pickDispatchListCount;
                // vm.pickReceptionListCount = vm.pickReceptionList;
                // vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;

            }).catch(function (error) {
                console.log('error - ', error)
                alert('발신함 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        pickCompleteSelectList: function () {
            const vm = this;

            axios({
                url: '/myPage/pickCompleteList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.pickCompleteListSearch
            }).then(function (response) {
                vm.pickCompleteList = response.data.pickCompleteList;
                vm.companyTop6List = response.data.companyTop6List;
                vm.pickCompleteListCount = response.data.pickCompleteListCount;
                // vm.pickReceptionListCount = vm.pickReceptionList;
                // vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;

            }).catch(function (error) {
                console.log('error - ', error)
                alert('완료 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        pickModal: function (item) {

            if (confirm(item.company_nm + "기업의 PICK 신청을 수락하시겠습니까?")) {
                this.pick(item)
            }
        },

        pickCancelModal: function (item) {
            if (confirm(item.company_nm + "기업에게 신청한 PICK을 취소 하시겠습니까?")) {
                this.pickCancel(item)
            }
        },

        pickRefusalModal: function (item) {
            if (confirm(item.company_nm + "기업의 PICK을 거절 하시겠습니까?")) {
                this.pickRefusal(item)
            }
        },

        pick: function (item) {
            const vm = this;

            axios({
                url: '/matching/pick.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: item
            }).then(function (response) {
                alert(response.data);
                vm.pickView();
            }).catch(function (error) {
                console.log('error - ', error)
                alert('PICK 수락 오류, 관리자에게 문의하세요.');
            })
        },

        pickCancel: function (item) {
            const vm = this;

            axios({
                url: '/matching/pickCancel.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: item
            }).then(function (response) {
                alert(response.data);
                vm.pickView();
            }).catch(function (error) {
                console.log('error - ', error)
                alert('PICK 취소 오류, 관리자에게 문의하세요.');
            })
        },

        pickRefusal: function (item) {
            const vm = this;

            axios({
                url: '/matching/pickRefusal.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: item
            }).then(function (response) {
                alert(response.data);
                vm.pickView();
            }).catch(function (error) {
                console.log('error - ', error)
                alert('PICK 거부 오류, 관리자에게 문의하세요.');
            })
        },

        cardView: function (item) {
            this.company_nm = item.company_nm;
            this.cardFullPath = 'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm;
            this.isVisible = true
        },

        matchingAcceptModal: function (item) {

            if (confirm(item.company_nm + "기업의 MATCHING 신청을 수락 하시겠습니까?")) {
                this.matching(item)
            }
        },

        matchingModal: function (item) {

            if (confirm(item.company_nm + "기업에게 MATCHING 신청을 하시겠습니까?")) {
                this.matching(item)
            }
        },

        matchingCancelModal: function (item) {
            if (confirm(item.company_nm + "기업에게 신청한 MATCHING을 취소 하시겠습니까?")) {
                this.matchingCancel(item)
            }
        },

        matchingRefusalModal: function (item) {
            if (confirm(item.company_nm + "기업의 MATCHING을 거절 하시겠습니까?")) {
                this.matchingRefusal(item)
            }
        },

        matchingResetModal: function (item) {
            if (confirm(item.company_nm + "기업과 MATCHING을 취소하시겠습니까? \n 취소 시 MATCHING은 초기화 됩니다.")) {
                this.matchingReset(item)
            }
        },

        matchingReceptionSelectList: function () {
            const vm = this;

            axios({
                url: '/myPage/matchingReceptionList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.matchingReceptionListSearch
            }).then(function (response) {
                vm.matchingReceptionList = response.data.matchingReceptionList;
                vm.matchingReceptionListCount = response.data.matchingReceptionListCount;
                // vm.pickReceptionListCount = vm.pickReceptionList;
                // vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;

            }).catch(function (error) {
                console.log('error - ', error)
                alert('수신함 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        matchingDispatchSelectList: function () {
            const vm = this;

            axios({
                url: '/myPage/matchingDispatchList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.matchingDispatchListSearch
            }).then(function (response) {
                vm.matchingDispatchList = response.data.matchingDispatchList;
                vm.matchingDispatchListCount = response.data.matchingDispatchListCount;
                // vm.pickReceptionListCount = vm.pickReceptionList;
                // vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;

            }).catch(function (error) {
                console.log('error - ', error)
                alert('발신함 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        matchingCompleteSelectList: function () {
            const vm = this;

            axios({
                url: '/myPage/matchingCompleteList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.matchingCompleteListSearch
            }).then(function (response) {
                vm.matchingCompleteList = response.data.matchingCompleteList;
                vm.matchingCompleteListCount = response.data.matchingCompleteListCount;
                // vm.pickReceptionListCount = vm.pickReceptionList;
                // vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;

            }).catch(function (error) {
                console.log('error - ', error)
                alert('완료 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        matching: function (item) {
            const vm = this;

            axios({
                url: '/matching/matching.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: item
            }).then(function (response) {
                alert(response.data);
                vm.matchingView();
            }).catch(function (error) {
                console.log('error - ', error)
                alert('MATCHING 오류, 관리자에게 문의하세요.');
            })
        },

        matchingCancel: function (item) {
            const vm = this;

            axios({
                url: '/matching/matchingCancel.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: item
            }).then(function (response) {
                alert(response.data);
                vm.matchingView();
            }).catch(function (error) {
                console.log('error - ', error)
                alert('MATCHING 취소 오류, 관리자에게 문의하세요.');
            })
        },

        matchingRefusal: function (item) {
            const vm = this;

            axios({
                url: '/matching/matchingRefusal.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: item
            }).then(function (response) {
                alert(response.data);
                vm.matchingView();
            }).catch(function (error) {
                console.log('error - ', error)
                alert('MATCHING 거절 오류, 관리자에게 문의하세요.');
            })
        },

        matchingReset: function (item) {
            const vm = this;

            axios({
                url: '/matching/matchingReset.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: item
            }).then(function (response) {
                alert(response.data);
                vm.matchingView();
            }).catch(function (error) {
                console.log('error - ', error)
                alert('MATCHING 취소 오류, 관리자에게 문의하세요.');
            })
        },

        companyOnePage: function (item) {
            const vm = this;
            let best = 'non'
            for (let i = 0; i < vm.companyTop6List.length; i++) {
                if (vm.companyTop6List[i].company_id === item.company_id) {
                    best = 'best';
                }
            }
            axios({
                url: '/matching/companyViewCountAdd.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: { 'company_id': item.company_id }
            }).then(function (response) {
                vm.$router.push({ path: '/MatchingOne.page', query: { 'company_id': item.company_id, 'best': best } });
            }).catch(function (error) {
                console.log("기업 상세조회 오류, 관리자에게 문의하세요.");
            })
        },

        hideDiv() {
            this.isVisible = false;
        }
    },
    mounted() {
        console.log('MatchingManager mounted');
        this.pickView();
    },
    components: {
        'PaginationButton': PaginationButton,
    },
    computed: {
        displayedItems() {
            if (this.showMore) {
                return this.pickReceptionList;
            } else {
                return this.pickReceptionList.slice(0, 4);
            }
        },
        displayedItems2() {
            if (this.showMore2) {
                return this.pickDispatchList;
            } else {
                return this.pickDispatchList.slice(0, 4);
            }
        },
        displayedItems3() {
            if (this.showMore3) {
                return this.pickCompleteList;
            } else {
                return this.pickCompleteList.slice(0, 4);
            }
        },
        displayedItems4() {
            if (this.showMore4) {
                return this.matchingReceptionList;
            } else {
                return this.matchingReceptionList.slice(0, 4);
            }
        },
        displayedItems5() {
            if (this.showMore5) {
                return this.matchingDispatchList;
            } else {
                return this.matchingDispatchList.slice(0, 4);
            }
        },
        displayedItems6() {
            if (this.showMore6) {
                return this.matchingCompleteList;
            } else {
                return this.matchingCompleteList.slice(0, 4);
            }
        }
    }
}
</script>

