<template>
  <div class="btn-container">
    <div class="btn-box flexItem">
      <b-tooltip
        v-if="!notPrevPage"
        label="이전 페이지"
        position="is-bottom"
      >
        <b-button
          class="btn arrowLeft"
          @click="prevPage"
        />
      </b-tooltip>
      <b-tooltip
        v-if="!notAdd"
        label="행추가"
        position="is-bottom"
      >
        <b-button
          class="btn add"
          @click="eventTrigger('add')"
        />
      </b-tooltip>
      <b-tooltip
        v-if="!notDiscard"
        label="행삭제"
        position="is-bottom"
      >
        <b-button
          class="btn discard"
          @click="eventTrigger('discard')"
        />
      </b-tooltip>
      <b-tooltip
        v-if="write"
        label="글쓰기"
        position="is-bottom"
      >
        <b-button
          class="btn write"
          @click="eventTrigger('write')"
        />
      </b-tooltip>
      <b-tooltip
        v-if="!notInsert"
        :label="insertTooltip"
        position="is-bottom"
      >
        <b-button
          class="btn save"
          @click="eventTrigger('insert')"
        />
      </b-tooltip>
      <b-tooltip
        v-if="confirm"
        label="확정"
        position="is-bottom"
      >
        <b-button
          class="btn save"
          @click="eventTrigger('confirm')"
        />
      </b-tooltip>
      <b-tooltip
        v-if="!notUpdate"
        label="수정"
        position="is-bottom"
      >
        <b-button
          class="btn modify"
          @click="eventTrigger('update')"
        />
      </b-tooltip>
      <b-tooltip
        v-if="!notDelete"
        label="삭제"
        position="is-bottom"
      >
        <b-button
          class="btn del"
          @click="eventTrigger('delete')"
        />
      </b-tooltip>
      <b-tooltip
        v-if="!notSearch"
        label="검색"
        position="is-bottom"
      >
        <b-button
          class="btn search"
          @click="eventTrigger('search')"
        />
      </b-tooltip>
      <b-tooltip
        v-if="excelDown"
        label="엑셀 다운로드"
        position="is-bottom"
      >
        <vue-excel-xlsx
          :data="excelDown.data"
          :columns="column"
          :filename="filename"
          :sheetname="sheetname"
          class="button btn excelDown"
          type="button"
        />
      </b-tooltip>
      <b-tooltip
        v-if="startProcess"
        label="작업시작"
        position="is-bottom"
      >
        <b-button
          class="btn startProcess"
          type="is-black"
          style="width: fit-content; margin: 0 3px 0 3px; padding: 0 3px 0 3px;"
          @click="eventTrigger('startProcess')"
        >
          작업시작
        </b-button>
      </b-tooltip>
      <b-tooltip
        v-if="holdProcess"
        label="작업중지"
        position="is-bottom"
      >
        <b-button
          class="btn holdProcess"
          type="is-black"
          style="width: fit-content; margin: 0 3px 0 3px; padding: 0 3px 0 3px;"
          @click="eventTrigger('holdProcess')"
        >
          작업중지
        </b-button>
      </b-tooltip>
      <b-tooltip
        v-if="finishProcess"
        label="작업완료"
        position="is-bottom"
      >
        <b-button
          class="btn finishProcess"
          type="is-black"
          style="width: fit-content; margin: 0 3px 0 3px; padding: 0 3px 0 3px;"
          @click="eventTrigger('finishProcess')"
        >
          작업완료
        </b-button>
      </b-tooltip>
    </div>
  </div>
</template>

<script>
import VueExcelXlsx from 'vue-excel-xlsx/VueExcelXlsx.vue';

export default {
  components: {
    'vue-excel-xlsx': VueExcelXlsx,
  },
  props: {
    notPrevPage: Boolean,
    notAdd: Boolean,
    notDiscard: Boolean,
    notInsert: Boolean,
    notUpdate: Boolean,
    notDelete: Boolean,
    notSearch: Boolean,
    confirm: Boolean,
    excelDown: Object,
    startProcess: Boolean,
    holdProcess: Boolean,
    finishProcess: Boolean,
    write: Boolean,
    insertTooltip: {
      type: String,
      default: '저장',
    },
    insertMsg: String,
  },
  data() {
    return {
      column: [],
      filename: '',
      sheetname: '',
    };
  },
  mounted() {
    this.excelData();
  },
  methods: {
    eventTrigger(value) {
      let message = '';
      switch (value) {
        case 'update':
          message = '선택한 Row를 수정하시겠습니까?';
          break;
        case 'delete':
          message = '선택한 Row를 삭제하시겠습니까?';
          break;
        case 'insert':
          message = this._props.insertMsg ? this._props.insertMsg : '선택한 Row를 입력하시겠습니까?';
          break;
        case 'startProcess':
          message = '작업을 시작하시겠습니까?';
          break;
        case 'holdProcess':
          message = '작업을 중지하시겠습니까?';
          break;
        case 'finishProcess':
          message = '작업을 완료하시겠습니까?';
          break;
        default:
          break;
      }
      if (message !== '') {
        this.eventConfirm(value, message);
      } else {
        this.$emit(value, value);
      }
    },
    eventConfirm(value, msg) {
      this.$buefy.dialog.confirm({
        message: msg,
        onConfirm: () => {
          this.$emit(value, value);
        },
      });
    },
    excelData() {
      if (this._props.excelDown === undefined) {
        return;
      }
      this._props.excelDown.headers.filter((header) => header.visible).forEach((header) => {
        this.column.push({
          label: header.label,
          field: header.field,
        });
      });

      const date = new Date();
      const yy = date.getFullYear().toString();
      const m = date.getMonth() + 1;
      const mm = m.toString();
      const dd = date.getDate().toString();
      const today = yy + mm + dd;
      this.sheetname = this._props.excelDown.name;
      this.filename = this._props.excelDown.name + today;
    },
    prevPage() {
      this.$router.go(-1);
    },
  },
};
</script>

<style>
.btn-container {
  margin-bottom: 0.25rem;
}
.btn-box {
  height: 32px;
}
.btn {
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: unset;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f5f5f5;
}
.btn:hover {
  background-color: hsl(0, 0%, 75%, 0.8);
}
.btn:focus:not(:active), .btn.is-focused:not(:active) {
  box-shadow: none;
}
.btn.add {
  background-image: url("../assets/icon/ico_line_add.png");
}
.btn.discard {
  background-image: url("../assets/icon/ico_line_delete.png");
}
.btn.save {
  background-image: url("../assets/icon/ico_save.png");
}
.btn.modify {
  background-image: url("../assets/icon/ico_modify.png");
}
.btn.del {
  background-image: url("../assets/icon/ico_delete.png");
}
.btn.search {
  background-image: url("../assets/icon/ico_search.png");
}
.btn.excelDown {
  background-image: url("../assets/icon/icon_excel.png");
}
.btn.startProcess {
  /* background-image: url("../assets/icon/icon_process_start.png"); */
}
.btn.holdProcess {
  /* background-image: url("../assets/icon/icon_process_hold.png"); */
}
.btn.finishProcess {
  /* background-image: url("../assets/icon/icon_process_finish.png"); */
}
.btn.write {
  background-image: url("../assets/icon/icon_add.png");
}
.btn.arrowLeft {
  background-image: url("../assets/icon/ico_arrow_left.png");
}
</style>
