<template>
  <div class="content">
    <div class="admin-page-title point-font2 mb30">
      <p>메뉴별 만족도</p>
    </div>
    <ListTable
      :className="'admin-list'"
      :colgroup="colgroup"
      :thead="thead"
      :tbody="tbody"
    >
      <template v-slot:button>
        <button
          class="large-btn blue-border-btn"
          @click.stop="modalOpen"
          v-if="pageAuth.inqAuthrt == 'Y'"
        >
          보기
        </button>
      </template>
    </ListTable>
    <div class="flex justify-between align-center no-gutters">
      <div class="gd-1"></div>
      <div class="gd-10">
        <PaginationButton :className="'admin-pagination'" />
      </div>
      <div class="gd-1"></div>
    </div>
  </div>
  <Modal :showModal="satisfaction" :className="'large-modal'">
    <template v-slot:header>
      <div class="box-title point-font2">
        <p>해당메뉴명</p>
      </div>
      <button class="close-btn" @click="modalClose">X</button>
    </template>
    <ListTable
      :colgroup="colgroup2"
      :thead="thead2"
      :tbody="tbody"
      :className="'admin-list'"
    />
    <!-- <template v-slot:footer></template> -->
  </Modal>
</template>

<script>
import ListTable from "../../../../component/table/ListTable.vue";
import PaginationButton from "../../../../component/pagination/PaginationButton.vue";
import Modal from "../../../../component/modal/Modal.vue";

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

      satisfaction: false,
      colgroup: ["23%", "12%", "12%", "12%", "12%", "12%", "12%", "5%"],
      colgroup2: ["12%", "12%", "12%", "12%", "12%", "12%", "28%"],
      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>