<template>
  <div>
    <modal-table ref="table" view-code="GroupMethod" :static="true" :footer-enable="true" @create="editItem()" @edit="({ row, index }) => editItem(row, index)">
      <template #command="{ row, index }">
        <Button size="small" :title="$t('Front_Btn_Remove')" type="warning" custom-icon="fa fa-trash-alt" @click="removeItem(row, index)"></Button>
      </template>
      <template #footer>
        <Button type="primary" custom-icon="fa fa-save" @click="save">{{ $t('Front_Btn_Save') }}</Button>
      </template>
    </modal-table>
    <modal-form ref="form" view-code="GroupMethodEdit">
      <template #column="{ data, code }">
        <div v-if="code == 'columnExp'">
          <Input type="text" v-model="data.columnExp" :readonly="true" @click="columnCheck(model, data)">
            <template #prepend>
              <Button custom-icon="fa fa-search" @click="columnCheck(model, data)"></Button>
            </template>
          </Input>
        </div>
      </template>
      <template #footer>
        <Button type="primary" custom-icon="fa fa-save" @click="saveItem">{{ $t('Front_Btn_Save') }}</Button>
      </template>
    </modal-form>
    <column-check ref="columnCheck" />
  </div>
</template>

<script>
  import mixinPage from '../../mixins/page';
  import columnCheck from './column-check.vue';

  export default {
    mixins: [mixinPage],
    components: { columnCheck },
    props: {},
    computed: {},
    data() {
      return {
        model: null,
        data: [],
        editIndex: null,
        callback: null
      };
    },
    async created() {},
    methods: {
      open(model, json, callback) {
        if (!(model || '').trim()) {
          this.error('Front_Msg_Please_Select_Model_First');
          return;
        }

        this.model = model;
        this.callback = callback;

        if (json) {
          this.data = JSON.parse(json);
        } else {
          this.data = [];
        }
        this.$refs.table.loadData(this.data);
        this.$refs.table.open();
      },
      editItem(row, index) {
        this.editIndex = index;
        this.$refs.form.open(row);
      },
      async saveItem() {
        let isOK = await this.$refs.form.validate();

        if (!isOK) {
          this.error('Front_Msg_Form_Validate_Fail');
        } else {
          if (this.editIndex == null) {
            this.data.push(this.$refs.form.data);
          } else {
            this.data.splice(this.editIndex, 1, this.$refs.form.data);
          }
          this.$refs.table.loadData(this.data);
          this.$refs.form.close();
        }
      },
      removeItem(row, index) {
        this.data.splice(index, 1);
        this.$refs.table.loadData(this.data);
      },
      save() {
        let json = this.data.length > 0 ? JSON.stringify(this.data) : null;
        this.callback(json);
        this.$refs.table.close();
      },
      columnCheck(model, data) {
        this.$refs.columnCheck.open(model, column => {
          data.columnExp = column.code;
          data.property = column.code.split('.').pop();

          if (this.$refs.form.data.aggregateType == 'Avg') {
            data.dataType = 'Double';
          } else {
            data.dataType = column.dataType;
          }

          //this.$forceUpdate();
        });
      }
    }
  };
</script>
