<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>
              <button
                class="btn btn-chip-outline sm main ico-view "
                @click.stop="modalOpen"
                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="tbody"
        :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";

export default {
  components: {
    ListTable: ListTable,
    PaginationButton: PaginationButton,
    Modal: Modal,
  },
  data() {
    return {
      // 페이지 권한 객체
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
      search: { ...defaultSearchParams },

      satisfaction: false,
      colgroup: ["30%", "10%", "10%", "10%", "10%", "10%", "10%", "10%"],
      colgroup2: ["13%", "13%", "13%", "13%", "13%", "13%", "22%"],
      thead: [
        "메뉴명",
        "매우만족",
        "만족",
        "보통",
        "불만족",
        "매우 불만족",
        "점수 합계",
        "의견",
      ],
      thead2: [
        "매우만족",
        "만족",
        "보통",
        "불만족",
        "매우 불만족",
        "합계",
        "의견",
      ],
      tbody: [
        {
          id: 1,
          1: "a기업",
          2: "홍길동",
          3: "정상",
          4: "정상",
          5: "정상",
          6: "정상",
        },
        {
          id: 2,
          1: "a기업",
          2: "홍길동",
          3: "정상",
          4: "정상",
          5: "정상",
          6: "정상",
        },
        {
          id: 3,
          1: "a기업",
          2: "홍길동",
          3: "정상",
          4: "정상",
          5: "정상",
          6: "정상",
        },
        {
          id: 4,
          1: "a기업",
          2: "홍길동",
          3: "정상",
          4: "정상",
          5: "정상",
          6: "정상",
        },
        {
          id: 5,
          1: "a기업",
          2: "홍길동",
          3: "정상",
          4: "정상",
          5: "정상",
          6: "정상",
        },
      ],
    };
  },
  created() {},
  methods: {
    modalOpen: function () {
      this.satisfaction = true;
    },
    modalClose: function () {
      this.satisfaction = false;
    },
  },
  watch: {},
  computed: {},
  mounted() {},
};
</script>