
<template>
  <div class="run-mod-box">
    <EMSTable
      ref="popupGrid"
      :server="server"
      :action="grid.action"
      :params="initParams"
      :columns="grid.columns"
      :highlight-row="true"
      @on-selection-change="onSelectionChange"
    >
      <Form
        ref="searchForm"
        slot="search-bar"
        :model="searchForm"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item
          v-for="(item2,index2) in condition"
          :key="index2"
          :label="item2.label"
          :prop="item2.prop"
          :rules="item2.rules"
        >
          <template v-if="item2.type == 'input'">
            <Input
              :ref="item2.ref"
              v-model="searchForm[item2.name]"
              :type="item2.type"
              :size="item2.size"
              :placeholder="item2.placeholder"
              :clearable="item2.clearable"
              :icon="item2.icon"
              :rows="item2.rows"
              :autosize="item2.autosize"
              :number="item2.number"
              :enter="item2.enter"
            ></Input>
          </template>
          <template v-if="item2.type == 'checkbox'">
            <Checkbox
              :ref="item2.ref"
              v-model="searchForm[item2.name]"
              :size="item2.size"
              :true-value="item2.trueValue"
              :false-value="item2.falseValue"
            >
              {{ item2.text }}
            </Checkbox>
          </template>
          <template v-if="item2.type == 'checkboxGroup'">
            <CheckboxGroup
              :ref="item2.ref"
              v-model="searchForm[item2.model]"
              :size="item2.size"
            >
              <Checkbox
                v-for="(option, index) in item2.groupList"
                :key="index"
                :label="option.value"
                :disabled="isLabel(item2.key)"
              >
                {{ option.name }}
              </Checkbox>
            </CheckboxGroup>
          </template>
          <template v-if="item2.type == 'radio'">
            <Radio
              :ref="item2.ref"
              v-model="searchForm[item2.name]"
              :size="item2.size"
              :true-value="item2.trueValue"
              :false-value="item2.falseValue"
            >
              {{ item2.text }}
            </Radio>
          </template>
          <template v-if="item2.type == 'radioGroup'">
            <RadioGroup
              :ref="item2.ref"
              v-model="searchForm[item2.name]"
              :type="item2.type"
              :size="item2.size"
              :vertical="item2.vertical"
            >
              <Radio
                v-for="(option, index) in item2.groupList"
                :key="index"
                :label="option.value"
              >
                {{ option.name }}
              </Radio>
            </RadioGroup>
          </template>
          <template v-if="item2.type == 'select'">
            <Select
              :ref="item2.ref"
              v-model="searchForm[item2.name]"
              :multiple="item2.multiple"
              :filterable="item2.filterable"
              :placeholder="item2.placeholder"
              :placement="item2.placement"
              :size="item2.size"
              :clearable="item2.clearable"
            >
              <Option
                v-for="(option, index) in item2.optionListName"
                :key="index"
                :value="option.value"
              >
                {{ option.label }}
              </Option>
            </Select>
          </template>
          <template v-if="item2.type == 'datePicker'">
            <DatePicker
              :ref="item2.ref"
              v-model="searchForm[item2.name]"
              :type="item2.type"
              :format="item2.format"
              :placeholder="item2.placeholder"
              :size="item2.size"
              :clearable="item2.clearable"
              :editable="item2.editable"
            ></DatePicker>
          </template>
        </Form-item>
      </Form>
      <div slot="handle-bar">
        <Button
          type="warning"
          icon="search"
          @click.native="search"
        >
          {{ $t('查询') }}
        </Button>
        <Button
          type="info"
          icon="loop"
          @click.native="reset"
        >
          {{ $t('重置') }}
        </Button>
      </div>
    </EMSTable>
    <div v-if="isMultiple">
      <Button
        type="warning"
        @click="onOk"
      >
        确认
      </Button>
      <Button
        type="info"
        @click="clear"
      >
        取消
      </Button>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  directives: {},
  props: {
    condition: {
      type: Array,
      default() {
        return [];
      }
    },
    grid: {
      type: Object,
      default() {
        return {};
      }
    },
    server: {
      type: Object,
      default() {
        return {};
      }
    },
    title: {
      type: String,
      default: ''
    },
    pageSize: {
      type: Number,
      default: 780
    },
    isMultiple: {
      // 是否多选
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchForm: {}
    };
  },
  computed: {
    initParams() {
      return Object.assign(this.grid.params, this.searchForm);
    }
  },
  watch: {},
  created: function() {
    this.$emit('SetTitle', this.title);
    this.$emit('SetPageSize', this.pageSize);
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    search(page = 1) {
      this.$refs.popupGrid.load(this.searchForm, page);
    },
    reset() {
      var params = this.searchForm;
      for (const name in params) {
        params[name] = '';
      }
      this.$refs.popupGrid.load(params, 1);
    },
    // 确定
    onOk() {
      const selected = this.$refs.popupGrid.getSelectioned() || [];
      this.$emit('Close', selected);
    },
    // 清空
    clear() {
      this.$emit('Close', []);
    },
    onSelectionChange(selection) {
      if (!this.isMultiple && selection && selection[0]) {
        this.$emit('Close', selection[0]);
      }
    }
  }
};
</script>
<style scoped>
/* .run-search-bar > div:first-child {
  float: right;
  margin: 1px 110px 1px 1px;
} */
</style>
