<template>
    <div v-if="dgstfnExmnUseYn == 'Y'">
        <div v-if="rspnsYn == 'N'">
            <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 class="layout">
                <label class="form-title">의견</label>
                <input
                type="text"
                class="form-control sm"
                v-model="menuDgstfn.opnn"
                placeholder="의견을 남겨주세요"
                />
            </div>
            <button class="btn sm" @click="save">제출</button>
        </div>
        <div v-else-if="rspnsYn == 'Y'">
            <label class="form-title">설문에 참여해주셔서 감사합니다.</label>
        </div>
    </div>
    <div v-else>
        <label class="form-title">[만족도 조사 비활성화 상태]</label>
    </div>
</template>

<script>
import store from "../pages/AppStore";
import { menuFindByMenu } from '../../resources/api/menu.js';
import { findByMenuId, save } from '../../resources/api/menuDgstfn.js';

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

            dgstfnExmnUseYn: "N", // 메뉴 만족도 사용 여부
            rspnsYn: 'N', // 응답 여부
            checkRspns: '', // '5' ~ '1' 중 하나
            menuDgstfn: {
                rspnsFive: 'N',
                rspnsFour: 'N',
                rspnsThree: 'N',
                rspnsTwo: 'N',
                rspnsOne: 'N',
                opnn: '', // 의견
            }, // 메뉴 만족도
        }
    },
    created() {
    },
    methods: {
        // 상세 조회
        async fnView(menuId) {
            try {
                const params = { menuId: this.menuId };
                const res = await menuFindByMenu(params);
                if (res.status == 200) {
                    this.dgstfnExmnUseYn = res.data.data.dgstfnExmnUseYn;
                    if(res.data.data.dgstfnExmnUseYn == 'Y') {
                        this.fnViewByMenuId();
                    } else {
                        this.dgstfnExmnUseYn = 'N';
                    }
                }
            } catch (error) {
                alert(error.response.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.response.data.message);
            }
        },

        // 저장
        async save() {
            try {
                this.checkRspnsVal(); // 응답 값 체크
                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 () {
            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';
        }

    },
    watch: {
        'pgNm'(newValue, oldValue) {
            console.log(oldValue)
        },
        '$store.state.menu'(newValue) {
            this.pgNm = newValue.menuNm
            this.menuId = newValue.menuId
            this.fnView();
        },
    },
    computed: {

        pgNm() {
            return store.state.menu && store.state.menu.menuNm ? store.state.menu.menuNm : "홈";
        }

    },
    mounted() {

    }
}
</script>