<template>
  <Input type="text" :readonly="true" :model-value="modelValue" @click="open()">
    <template #prepend>
      <Button custom-icon="fa fa-edit" @click="open()"></Button>
    </template>
  </Input>
  <modal-table ref="table" view-code="TableDefaultFiltering" :static="true" :footer-enable="true" @edit="({ row, index }) => edit(row, index)">
    <template #footer>
      <Button type="primary" ghost custom-icon="fa fa-plus" @click="edit()">
        {{ $t('Front_Btn_Add') }}
      </Button>
      <Button type="primary" custom-icon="fa fa-check" @click="saveFiltering">{{ $t('Front_Btn_OK') }}</Button>
    </template>
  </modal-table>
  <modal-form ref="form" view-code="TableDefaultFilteringEdit">
    <template #column="{ data, code }">
      <template v-if="code == 'column'">
        <Input type="text" readonly v-model="data[code]" @on-focus="openSelect()">
          <template #prepend>
            <Button custom-icon="fa fa-search" @click="openSelect()"></Button>
          </template>
        </Input>
      </template>
    </template>
    <template #footer>
      <Button type="primary" custom-icon="fa fa-check" @click="save()">{{ $t('Front_Btn_OK') }}</Button>
    </template>
  </modal-form>
  <column-check ref="columnCheck" />
</template>

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

  export default {
    mixins: [mixinPage],
    components: { columnCheck },
    props: {
      /**
       * @model
       */
      modelValue: {
        type: String
      },
      /**
       * 是否数据源
       */
      isDataSource: {
        type: Boolean
      },
      /**
       * 模型
       */
      model: {
        type: String
      },
      /**
       * 数据源
       */
      dataSource: {
        type: String
      }
    },
    data() {
      return {
        index: null
      };
    },
    computed: {},
    async created() {},
    methods: {
      open() {
        if (this.isDataSource && !(this.dataSource || '').trim()) {
          this.error('Front_Msg_Please_Select_Model_First');
          return;
        } else if (!this.isDataSource && !(this.model || '').trim()) {
          this.error('Front_Msg_Please_Select_Model_First');
          return;
        }

        let array = [];

        if (!!(this.modelValue || '').trim()) {
          let json = JSON.parse(this.modelValue);
          for (let key in json) {
            let operatorType = null;
            let suffix = null;

            let column = key.split('_')[0];

            if (key.split('_').length > 1) {
              suffix = key.split('_')[1];
            }

            if (suffix == 'g') {
              operatorType = '大于';
            } else if (suffix == 'l') {
              operatorType = '小于';
            } else if (suffix == 'ge') {
              operatorType = '大于等于';
            } else if (suffix == 'le') {
              operatorType = '小于等于';
            } else if (suffix == 'n') {
              operatorType = '不等于';
            } else if (suffix == 'c') {
              operatorType = '文字包含';
            } else {
              operatorType = '等于';
            }

            array.push({
              column,
              operatorType,
              keyValue: json[key]
            });
          }
        }

        this.$refs.table.loadData(array);
        this.$refs.table.open();
      },
      edit(row, index) {
        this.index = index;
        this.$refs.form.open(row);
      },
      async save() {
        let isOK = await this.$refs.form.validate();

        if (!isOK) {
          this.error('Front_Msg_Form_Validate_Fail');
          return;
        }

        let array = this.$refs.table.data;
        let data = this.$refs.form.data;

        if (this.index == null) {
          // 新增
          array.push(data);
        } else {
          // 编辑
          array[this.index].column = data.column;
          array[this.index].operatorType = data.operatorType;
          array[this.index].keyValue = data.keyValue;
        }

        this.$refs.table.loadData(array);
        this.$refs.form.close();
      },
      saveFiltering() {
        let obj = {};
        let json = null;

        if (this.$refs.table.data.length > 0) {
          this.$refs.table.data.forEach(item => {
            let key = item.column;

            if ((item.operatorType == '大于')) {
              key += '_g';
            } else if ((item.operatorType == '小于')) {
              key += '_l';
            } else if ((item.operatorType == '大于等于')) {
              key += '_ge';
            } else if ((item.operatorType == '小于等于')) {
              key += '_le';
            } else if ((item.operatorType == '不等于')) {
              key += '_n';
            } else if ((item.operatorType == '文字包含')) {
              key += '_c';
            }

            obj[key] = item.keyValue;
          });

          json = JSON.stringify(obj);
        }

        this.$emit('update:modelValue', json);

        this.$refs.table.close();
      },
      // 打开字段选择界面
      openSelect() {
        if (this.isDataSource) {
          this.$refs.columnCheck.openDataSourceFilter(this.dataSource, checked => {
            this.$refs.form.data.column = checked.code;
          });
        } else {
          this.$refs.columnCheck.open(this.model, checked => {
            this.$refs.form.data.column = checked.code;
          });
        }
      }
    }
  };
</script>
