<template>
  <div>
    <nav class="level">
      <div class="level-left" />
      <div class="level-right">
        <!-- 행 추가 사용할 때 주석 풀고 사용 -->
        <!-- <p class="level-item">
          <a class="button is-success" @click="addRow">
            &nbsp;&nbsp;Add
          </a>
        </p> -->
      </div>
    </nav>
    <b-table
      :data="gridData"
      :striped="isStriped"
    >
      <template slot-scope="props">
        <b-table-column
          v-for="(column, index) in headers"
          :key="index"
          :field="column.field"
          :label="column.label"
          :width="column.width"
        >
          <span v-if="column.editable == false">
            {{ props.row[column.field] }}
          </span>
          <span v-else>
            <span v-if="column.fieldType == 'textbox'">
              <input
                class="input"
                type="text"
                placeholder="입력해주세요."
              >
            </span>
            <span v-else-if="column.fieldType == 'datetime'">
              <b-datepicker
                placeholder="날짜를 선택해주세요"
                expanded
                editable
              />
            </span>
            <span v-else-if="column.fieldType == 'checkbox'">
              <b-checkbox expanded />
              <!-- <b-checkbox
                v-for="option in column.comboData"
                :value="option.value"
                :key="option.value"
                expanded
              ></b-checkbox> -->
            </span>
            <span v-else-if="column.fieldType == 'combobox'">
              <b-select
                placeholder="선택해 주세요."
                expanded
              >
                <option
                  v-for="option in column.comboData"
                  :key="option.value"
                  :value="option.value"
                >
                  {{ option.description }}
                </option>
              </b-select>
            </span>
          </span>
        </b-table-column>
      </template>
      <template slot="empty">
        <section class="section">
          <div class="content has-text-grey has-text-centered">
            <p>
              <b-icon
                icon="emoticon-sad"
                size="is-large"
              />
            </p>
            <p>Nothing here.</p>
          </div>
        </section>
      </template>
    </b-table>
    <b-loading
      :is-full-page="isFullPage"
      :active.sync="isLoading"
      :can-cancel="false"
    />
  </div>
</template>

<script>
const serviceUrl = '/common/selectEnum';
export default {
  props: {
    headers: Array,
    gridData: Array,
    name: String,
  },
  data: () => ({
    selected: [{}],
    // selected: {},
    gridPage: null,
    pageAble: false,
    isLoading: true,
    isStriped: true,
    isBordered: false,
    isNarrowed: false,
    isFullPage: true,
    isHoverable: false,
    isFocusable: false,
    isEmpty: true,
    grid: {
      column: [],
      data: [],
    },
    comboData: {},
  }),
  computed: {
    changeGrid: () => {
      this.selected = null;
      this.gridPage = this._props.gridPage != 10 ? this.gridPage : 10;
      this.pageAble = this._props.pageAble != false;
      this.isLoading = this._props.isLoading != false;
      this.isStriped = this._props.isStriped != false;
      this.isBordered = this._props.isBordered != false;
      this.isNarrowed = this._props.isNarrowed != false;
      this.isHoverable = this._props.isHoverable != false;
      this.isFocusable = this._props.isFocusable != false;
    },
  },
  watch: {
    selected() {
      this.$emit('checked', this.selected);
    },
  },
  mounted() {
    this.initialize();
  },
  methods: {
    initialize() {
      const promises1 = this.headers.map((unit) => {
        if (unit.fieldType == 'combobox' && unit.dataType.type == 'query') {
          return this.$service
            .read(serviceUrl, unit.dataType.param)
            .then(({ data }) => {
              unit.comboData = data;
              return unit;
            });
        }
        return unit;
      });

      Promise.all(promises1).then(() => {
        this.isLoading = false;
      });
    },
    // // 행 추가 사용할 때 주석 풀고 사용
    // addRow() {
    //   this.gridData.push({});
    // },
  },
};
</script>
