<template>
  <div class="base-data-modal">
    <EMSTable
      ref="baseModalTable"
      :action="requestAction"
      :params="formSearch"
      :server="server"
      :columns="realColumns"
      :rowClickExpand="onExpHandler"
      :rowClickHandle="rowClickHandle"
      @on-selection-change="onSelectionChange"
    >
      <Form
        ref="itemsForm"
        slot="search-bar"
        :model="formSearch"
        inline
      >
        <FormItem
          v-for="(item, index) in formSearchConfig"
          :key="index"
          :prop="item.key"
          :label="`${item.label}`"
        >
          <Input
            v-if="item.formType === 'input'"
            v-model="formSearch[item.key]"
            :placeholder="`请输入${item.label}`"
            type="text"
            clearable
          />

          <DataSelect
            v-else-if="item.formType === 'dataSelect'"
            v-model="formSearch[item.key]"
            transfer
            clearable
            :code="item.valueCode"
            :placeholder="`请输入${item.label}`"
            @loadFinish="data =>dataSet.BU = data.valueMap"
          ></DataSelect>
          <Select
            v-if="item.formType === 'dataSet'"
            v-model="formSearch[item.key]"
            :placeholder="`请选择${item.label}`"
            transfer
            clearable
          >
            <Option
              v-for="item2 in valueSet"
              :key="item2.vsiKey"
              :title="item2.vsiValue"
              :value="ititem2em.vsiKey"
            >
              {{ item2.vsiValue }}
            </Option>
          </Select>
        </FormItem>
      </Form>

      <div slot="handle-bar">
        <Button
          type="warning"
          icon="search"
          @click.native="search"
        >
          {{ this.$t('查询') }}
        </Button>
        <Button
          v-if="ifResetBtn"
          type="info"
          icon="loop"
          @click.native="formReset"
        >
          {{ this.$t('重置') }}
        </Button>
        <Button
          v-if="isMultiple"
          type="info"
          icon="loop"
          :disabled="confirmDisabled"
          @click.native="confirm"
        >
          {{ this.$t('确认') }}
        </Button>
      </div>
      <div
        v-show="false"
        slot="search-bar"
      ></div>
    </EMSTable>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    requestAction: {
      type: String,
      default: ''
    },
    formSearchConfig: {
      type: Array,
      default: () => {
        return [];
      }
    },
    server: {
      type: Object,
      default: () => {
        return {};
      }
    },
    defaultParams: {
      type: Object,
      default: () => {
        return {};
      }
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    isMultiple: {
      type: Boolean,
      default: false
    },
    valueSet: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      formSearch: this.defaultParams,
      selectList: []
    };
  },
  computed: {
    confirmDisabled() {
      return this.selectList.length == 0;
    },
    realColumns() {
      if (this.isMultiple) {
        const item = {
          type: 'selection',
          width: 60,
          align: 'center'
        };
        this.columns.unshift(item);
      }
      return this.columns;
    },
    ifResetBtn() {
      return this.formSearchConfig.length > 0;
    }
  },
  created() {
    console.log('CommonModal');
    this.initSearchParams();
  },
  mounted() {},
  methods: {
    initSearchParams() {
      this.formSearchConfig.forEach(item => {
        this.$set(this.formSearch, item.key, '');
      });
    },
    /**
     * 查询
     */
    search() {
      this.$refs.baseModalTable.load(this.formSearch, 1);
    },
    /**
     * 重置
     */
    formReset() {
      this.$refs.itemsForm.resetFields();
      this.$refs.baseModalTable.load(this.formSearch, 1);
    },
    rowClickHandle(row) {
      if (this.isMultiple) {
        return;
      }
      console.log(row);
      if (row._blank) {
        this.$Message.warning({
          content: '请选择有内容的一行'
        });
        return;
      }
      this.$emit('Close', row);
    },
    onSelectionChange(selection) {
      this.selectList = selection;
    },
    confirm() {
      this.$emit('Close', this.selectList);
    },
    onExpHandler() {}
  }
};
</script>

<style lang="less" scoped>
</style>
