<template>
  <ag-grid-vue
    :key="GridKey"
    style="height: 100%"
    class="ag-grid-card"
    :class="themeClass"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :gridOptions="GridOptions"
  ></ag-grid-vue>
</template>

<script lang="ts">
import { GridOptions } from 'ag-grid-community';
import { LicenseManager } from 'ag-grid-enterprise';
import { AgGridVue } from 'ag-grid-vue';
import CryptoJSMD5 from 'crypto-js/md5';
import lodash from 'lodash';
import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
// 'CompanyName=CROPLAND,LicensedGroup=Cropland,LicenseType=MultipleApplications,LicensedConcurrentDeveloperCount=1,LicensedProductionInstancesCount=1,AssetReference=AG-016521,ExpiryDate=15_June_2022_[v2]_MTY1NTI0NzYwMDAwMA==a2408a3e80d1e62fc6a847821ffef8e4';
LicenseManager.setLicenseKey(
  // "ag-Grid_Evaluation_License_Not_for_Production_100Devs30_August_2037__MjU4ODczMzg3NzkyMg==9e93ed5f03b0620b142770f2594a23a2"
  'CompanyName=CROPLAND,LicensedGroup=Cropland,LicenseType=MultipleApplications,LicensedConcurrentDeveloperCount=1,LicensedProductionInstancesCount=1,AssetReference=AG-016521,ExpiryDate=15_June_2022_[v2]_MTY1NTI0NzYwMDAwMA==a2408a3e80d1e62fc6a847821ffef8e4',
);
@Component({
  components: {
    AgGridVue,
  },
})
export default class AgGrid extends Vue {
  @Prop({ default: false }) loading;
  @Prop({ default: 'material' }) theme;
  @Prop({ default: () => [] }) columnDefs;
  @Prop({}) rowData;
  @Prop({ default: () => ({}) }) GridOptions: GridOptions;
  // option = {
  //   columnDefs: [],
  //   gridOptions: {}
  // };
  get themeClass() {
    return `ag-theme-${this.theme}`;
  }
  get GridKey() {
    return CryptoJSMD5(
      JSON.stringify(lodash.concat([], this.columnDefs, this.GridOptions.columnDefs)),
    ).toString();
  }
  @Watch('loading')
  @Emit('loading')
  onLoading(val, old) {
    return val;
  }
  created() {
    // this.option.columnDefs = lodash.cloneDeep(this.columnDefs);
    // this.option.gridOptions = lodash.cloneDeep(this.gridOptions);
  }
}
</script>
<style lang="less"></style>
