<template>
  <div
    class="flexContainer flexColumn"
    height="100%"
  >
    <div class="flexItems flexColumn flexStretch">
      <section class="message bordered">
        <search
          :data="this.setting"
          :service-name="'noticeManagement'"
          :method-name="'search'"
          @grid-search="selectData"
        />
      </section>

      <div class="flexRow flexItems">
        <div class="flexItem is-6 noChild bordered">
          <section class="message">
            <div class="message-header level">
              <p class="level-left">
                공지 목록
              </p>
              <excel-export :grid-data="this.grid[0]" />
            </div>
            <div class="message-body">
              <common-grid
                class="grid-font-small"
                :headers="this.grid[0].headers"
                :grid-data="this.grid[0].data"
                :name="this.grid[0].name"
                @grid-click="gridClick"
              />
            </div>
          </section>
        </div>

        <div class="flexItem is-6 noChild bordered">
          <property
            ref="props"
            :data="this.setting"
            :primary-key="this.keyData"
            :service-name="'noticeManagement'"
            :method-name="'search'"
            @grid-create="createData"
            @grid-modify="modifyData"
            @grid-delete="deleteData"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import validCheck from './ValidCheck.vue';
// import commonGrid from './CommonGrid.vue';
// import property from './Property.vue';

export default {
  // components: {
  //   commonGrid, property,
  // },
  props: {
    setting: Array,
    serviceUrl: String,
    serviceName: String,
  },
  data() {
    return {
      search: {
        isNotice: '',
        noticeRange: '',
      },
      validCheck,
      keyData: [],
      grid: [
        {
          headers: this.setting,
          data: [{}],
        },
      ],
    };
  },
  mounted() {
    this.init();
    this.keySetting();
  },
  methods: {
    init() {
      this.selectData(this.search);
    },
    keySetting() {
      for (let i = 0; i < this.setting.length; i += 1) {
        if (this.setting[i].group == 'key') {
          this.keyData.push(this.setting[i].field);
        }
      }
    },
    selectData(value) {
      const basePath = this.serviceUrl;
      this.$service
        .post(`${basePath}/selectNotice`, value)
        .then(({ data }) => {
          this.grid[0].data = data;
        });
    },
    gridClick(value) {
      this.$refs.props.gridClick(value);
      this.noticeNum = value.noticeNum;
      this.txtTitle = value.title;
      this.txtCreateUser = value.createUser;
      this.chkIsTopNotice = value.isTopNotice;
      this.cboIsNotice = value.isNotice;
      this.cboNoticeRange = value.noticeRange;
      this.txtContents = value.contents;
    },
    searchData(value) {
      const fullUrl = `${this.serviceUrl}/searchNotice`;
      const params = value;
      this.$service
        .post(fullUrl, params)
        .then(({ data }) => {
          this.grid[0].data = data;
        })
        .catch((error) => {
          // console.log(error);
        });
    },
    createData(params) {
      const fullUrl = `${this.serviceUrl}/createNotice`;
      this.$service
        .post(fullUrl, params)
        .then(({ data }) => {
          if (data === 'success') {
            this.$refs.props.editSuccess();
          }
          this.validCheck.validate(data, this);
        })
        .catch((error) => {
          this.$buefy.dialog.alert({
            message: '작업에 실패하였습니다.',
            type: 'is-danger',
            detail: error,
          });
        })
        .finally(() => {
          this.init();
        });
    },
    modifyData(params) {
      const fullUrl = `${this.serviceUrl}/updateNotice`;
      this.$service
        .post(fullUrl, params)
        .then(({ data }) => {
          if (data == 'success') {
            this.$refs.props.editSuccess();
          }
          this.validCheck.validate(data, this);
        })
        .catch((error) => {
          // console.log(error);
          this.$buefy.dialog.alert({
            message: '작업에 실패하였습니다.',
            type: 'is-danger',
          });
        })
        .finally(() => {
          this.init();
        });
    },
    deleteData(params) {
      const fullUrl = `${this.serviceUrl}/deleteNotice`;
      this.$service
        .post(fullUrl, params)
        .then(({ data }) => {
          if (data == 'success') {
            this.$refs.props.editSuccess();
          }
          this.validCheck.validate(data, this);
        })
        .catch((error) => {
          // console.log(error);
          this.$buefy.dialog.alert({
            message: '작업에 실패하였습니다.',
            type: 'is-danger',
          });
        })
        .finally(() => {
          this.init();
        });
    },
  },
};
</script>
