<template>
  <div class="content-zone sch-full">
    <div class="content">
      <div class="scroll">
        <div class="tbl-wrap">
          <ListTable
            :className="'data'"
            :colgroup="colgroup"
            :thead="thead"
            :tbody="tbody"
          >
            <template v-slot:button="{ row, idx }">
              <button
                class="btn btn-chip-outline sm main ico-view "
                @click.stop="modalOpen(row, idx)"
                v-if="pageAuth.inqAuthrt == 'Y'"
              >
                보기
              </button>
            </template>
          </ListTable>
        </div>
      </div>
    </div>

  </div>
  <div class="btn-wrap">
      <div></div>
      <PaginationButton
              :className="'pagination'"
              v-model:currentPage="search.currentPage"
              :pagination="search"
              :click="findAll"
            />
      <div></div>
    </div>
  <Modal :showModal="satisfaction" :className="'large-modal'">
    <template v-slot:header>
        <div class="modal-title">
          <p>해당메뉴명</p>
        </div>
        <button class="btn-close" @click="modalClose"></button>
    </template>
    <div class="tbl-wrap">
      <ListTable
        :colgroup="colgroup2"
        :thead="thead2"
        :tbody="stfndgTbody"
        :className="'data'"
      />
    </div>
  </Modal>
</template>

<script>
import ListTable from "../../../../component/table/ListTable.vue";
import PaginationButton from "../../../../component/pagination/PaginationButton.vue";
import Modal from "../../../../component/modal/Modal.vue";
import { defaultSearchParams } from "../../../../../resources/js/defaultSearchParams";
import pageAuthMixin from "../../../../common/pageAuthMixin.js";
import { findAll, findAllByMenuId } from "../../../../../resources/api/menuDgstfn";

export default {
  components: {
    ListTable: ListTable,
    PaginationButton: PaginationButton,
    Modal: Modal,
  },
  
  mixins: [pageAuthMixin],
  data() {
    return {
      // 페이지 권한 객체
      // pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
      search: { ...defaultSearchParams },
      satisfaction: false,
      colgroup: ["30%", "10%", "10%", "10%", "10%", "10%", "10%", "10%"],
      colgroup2: ["8%", "12%", "12%", "12%", "12%", "12%", "32%"],
      thead: [
        "메뉴명",
        "매우 만족",
        "만족",
        "보통",
        "불만족",
        "매우 불만족",
        "평균 점수",
        "상세보기",
      ],
      thead2: [
        "NO",
        // "IP",
        "매우 만족",
        "만족",
        "보통",
        "불만족",
        "매우 불만족",
        "의견",
      ],
      tbody: [],
      stfndgTbody: [], // 만족도 목록
      menuList: [], // 메뉴 목록
      menuStfndgList: [], // 메뉴별 만족도 목록
    };
  },
  created() {
    this.findAll();
  },
  methods: {
    modalOpen: function (row, idx) {
      this.findAllByMenuId(this.menuList[idx]);
      this.satisfaction = true;
    },
    modalClose: function () {
      this.satisfaction = false;
    },

    // 목록 조회
    async findAll() {
      try {
        const res = await findAll();
        if (res.status == 200) {
          console.log("res.data.data : ", res.data.data);
          this.menuList = res.data.data; // 메뉴 목록
          this.makeTbody();
        }
      } catch (error) {
        alert(error.response.data.message);
      }
    },

    // 메뉴별 만족도 조회
    async findAllByMenuId(menu) {
      try {
        const params = { menuId: menu.menuId };
        const res = await findAllByMenuId(params);
        if (res.status == 200) {
          this.menuStfndgList = res.data.data; // 메뉴별 만족도 목록
          this.makeStfndgTbody();
        }
      } catch (error) {
        alert(error.response.data.message);
      }
    },

    // tbody 생성
    makeTbody() {
      this.tbody = [];
      this.tbody = this.menuList.map((menu) => ({
        menuNm: menu.menuNm, // 메뉴명
        rspnsFiveCnt: menu.rspnsFiveCnt, // 매우만족
        rspnsFourCnt: menu.rspnsFourCnt, // 만족
        rspnsThreeCnt: menu.rspnsThreeCnt, // 보통
        rspnsTwoCnt: menu.rspnsTwoCnt, // 불만족
        rspnsOneCnt: menu.rspnsOneCnt, // 매우불만족
        avrgRspnsScore: menu.avrgRspnsScore, // 점수 평균
      }));
    },

    // 만족도 tbody 생성
    makeStfndgTbody() {
      this.stfndgTbody = [];
      this.stfndgTbody = this.menuStfndgList.map((menuStfndg, index) => ({
        no: index + 1, // 번호
        // regIp: menuStfndg.regIp, // 등록IP
        rspnsFive: menuStfndg.rspnsFive, // 매우만족
        rspnsFour: menuStfndg.rspnsFour, // 만족
        rspnsThree: menuStfndg.rspnsThree, // 보통
        rspnsTwo: menuStfndg.rspnsTwo, // 불만족
        rspnsOne: menuStfndg.rspnsOne, // 매우불만족
        opnn: menuStfndg.opnn, // 의견
      }));
    },
  },
  watch: {},
  computed: {},
  mounted() {},
};
</script>