<template>
    <div v-if="dgstfnExmnUseYn == 'Y'" class="menu-satisfaction">
        <div v-if="rspnsYn == 'N'" class="satisfaction-wrap">
            <div class="layout">
                <div class="check-list">
                    <label class="form-title">{{ pgNm }} 만족도 조사</label>
                    <div class="check-area">
                        <div class="form-check">
                            <input type="radio" name="rspns" id="rspnsFive" class="mr5" v-model="checkRspns"
                                value="5" />
                            <label for="rspnsFive">매우 만족</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="rspns" id="rspnsFour" class="mr5" v-model="checkRspns"
                                value="4" />
                            <label for="rspnsFour">만족</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="rspns" id="rspnsThree" class="mr5" v-model="checkRspns"
                                value="3" />
                            <label for="rspnsThree">보통</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="rspns" id="rspnsTwo" class="mr5" v-model="checkRspns" value="2" />
                            <label for="rspnsTwo">불만족</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="rspns" id="rspnsOne" class="mr5" v-model="checkRspns" value="1" />
                            <label for="rspnsOne">매우 불만족</label>
                        </div>
                    </div>
                </div>
                <div class="layout write-zone">
                    <input type="text" class="form-control sm" v-model="menuDgstfn.opnn" placeholder="의견을 남겨주세요" maxlength="50"/>
                    <button class="btn sm" @click="save">제출</button>
                </div>
            </div>
        </div>
        <div v-else-if="rspnsYn == 'Y'" class="satisfaction-wrap">
            <label class="form-title">설문에 참여해주셔서 감사합니다.</label>
        </div>
    </div>
    <div v-else>
    </div>
</template>

<script>
import { defaultMenuDgstfnParams } from '../../resources/js/defaultMenuSatisfactionParams.js';
import { menuFindByMenu } from '../../resources/api/menu.js';
import { findByMenuId, save } from '../../resources/api/menuDgstfn.js';

export default {
    data() {
        return {
            mbrNm: this.$store.state.mbrNm,
            pgNm: this.$store.state.menu && this.$store.state.menu.menuNm ? this.$store.state.menu.menuNm : "홈",
            menuId: null,

            dgstfnExmnUseYn: "N", // 메뉴 만족도 사용 여부
            rspnsYn: 'N', // 응답 여부
            checkRspns: '', // '5' ~ '1' 중 하나
            menuDgstfn: { ...defaultMenuDgstfnParams }, // 메뉴 만족도
        }
    },
    created() {
    },
    methods: {
        // 상세 조회
        async fnView() {
            try {
                this.checkRspns = ''; // 응답 초기화
                this.menuDgstfn = { ...defaultMenuDgstfnParams }; // 응답 초기화
                const params = { menuId: this.menuId };
                const res = await menuFindByMenu(params);
                if (res.status == 200) {
                    this.dgstfnExmnUseYn = res.data.data.dgstfnExmnUseYn;

                    this.$emit('menuChecck', this.dgstfnExmnUseYn);
                    if (res.data.data.dgstfnExmnUseYn == 'Y') {
                        this.fnViewByMenuId();
                    }
                }
                // 부모에게 전달
            } catch (error) {
                alert(error.res.data.message);
            }
        },

        // 만족도 응답 이력 조회
        async fnViewByMenuId() {
            try {
                const params = { menuId: this.menuId };
                const res = await findByMenuId(params);
                if (res.status == 200) {
                    if (res.data.data != null) {
                        this.rspnsYn = 'Y'; // 응답
                    } else {
                        this.rspnsYn = 'N'; // 미응답
                    }
                }
            } catch (error) {
                alert(error.res.data.message);
            }
        },

        // 저장
        async save() {
            try {
                // 응답 값 체크
                if (!this.checkRspnsVal()) {
                    return;
                }
                this.menuDgstfn.menuId = this.menuId; // 메뉴 ID
                const res = await save(this.menuDgstfn);
                if (res.status == 200) {
                    alert("설문에 참여해주셔서 감사합니다.");
                    this.fnView(); // 메뉴 상세 조회
                }
            } catch (error) {
                alert(error.response.data.message);
            }
        },

        // 선택 응답값 체크
        checkRspnsVal() {
            if (this.checkRspns == null || this.checkRspns == '') {
                alert("응답을 선택해주세요.");
                return false;
            }

            if (this.menuDgstfn.opnn != null && this.menuDgstfn.opnn != '') {
                if(this.menuDgstfn.opnn.length > 50) {
                    alert("의견은 50자 이내로 입력해주세요.");
                    return false;
                }
            }
            const rspnsVal = this.checkRspns;
            this.menuDgstfn.rspnsFive = rspnsVal === '5' ? 'Y' : 'N';
            this.menuDgstfn.rspnsFour = rspnsVal === '4' ? 'Y' : 'N';
            this.menuDgstfn.rspnsThree = rspnsVal === '3' ? 'Y' : 'N';
            this.menuDgstfn.rspnsTwo = rspnsVal === '2' ? 'Y' : 'N';
            this.menuDgstfn.rspnsOne = rspnsVal === '1' ? 'Y' : 'N';
            return true;
        }

    },
    watch: {
        $route: {
            immediate: true,
            handler(to) {
                if (this.$store.state.menu && to.path !== this.$filters.ctxPath('/adm/main.page') && !to.path.includes('/view.page') && !to.path.includes('/insert.page')) {
                    this.pgNm = this.$store.state.menu.menuNm;
                    this.menuId = this.$store.state.menu.menuId;
                    this.fnView();
                } else {
                    this.dgstfnExmnUseYn = 'N'; // 초기화
                }
            }
        },

        '$store.state.menu'(newValue) {
            if (newValue && (newValue.isOwnPath === undefined || newValue.isOwnPath === true)) {
                this.pgNm = newValue.menuNm;
                this.menuId = newValue.menuId;
                this.fnView();
            } else {
                this.$emit('menuChecck', 'N');
            }
        },
    },
    computed: {
        pgNm() {
            return this.$store.state.menu && this.$store.state.menu.menuNm ? this.$store.state.menu.menuNm : "홈";
        }
    },
    mounted() {

    }
}
</script>