<template>
  <cms-common-magnifier
    ref="magnifierRef"
    @searchMethod="search"
    @confirm="confirm"
    @show="show"
    :magnifier-title="'请选择数据'"
    :column-config="columns"
    :placeholder="placeholder"
    :query-params="queryForm"
    :dictionary-config="dictionaryConfig"
    :form-model="formModel"
    :match-key="matchKey"
    :show-footer="true"
    :immediate-load="true"
    :init-load-table-data="false"
    :disabled="disabled"
    :value="inputValue"
    :form-items="formItems"
    :modal-width="'60%'"
    :modal-height="'80%'"
    :request-call="dataSourceUrl">
    <template v-for="item in searchFormItem" :slot="item.field">
      <cms-form-input autocomplete="off" v-model="defaultQueryForm[[item.field]]" :placeholder="item.prompt"/>
    </template>
  </cms-common-magnifier>
</template>

<script>
import CmsCommonMagnifier from "../CmsCommonMagnifier/CmsCommonMagnifier";
import { CmsMultipleMagnifierMinix } from "./CmsMultipleMagnifierMinix";

export default {
  name: "CmsMultipleMagnifier",
  components: { CmsCommonMagnifier },
  mixins: [ CmsMultipleMagnifierMinix ],
  data() {
    return {
      columns: [],
      matchKey: {},
      formItems: [],
      searchFormItem: [], // 表单搜索条件
      defaultQueryForm: {}, // 查询对象
      dataSourceUrl: undefined, // 请求地址
    }
  },
  created() {
    this.columns = JSON.parse(this.propsConfig.columns);
    this.matchKey = JSON.parse(this.propsConfig.matchKey);
    const searchFormItem = JSON.parse(this.propsConfig.searchFormItem);
    this.searchFormItem = searchFormItem;
    searchFormItem.forEach(item => {
      this.$set(this.defaultQueryForm, [ item.field ], '');
      const keys = Object.keys(this.queryForm);
      this.formItems.push({
        prop: item.field,
        label: item.label
      })
    });
  },
  methods: {
    show() {
      this.dataSourceUrl = this.propsConfig.dataSource;
      setTimeout(() => {
        this.$refs.magnifierRef.reload();
      }, 20)
    },
    confirm(row) {
      this.$emit('confirm', row);
    },
  },
  computed: {
    queryForm: {
      get() {
        return this.defaultQueryForm;
      },
      set(newVal) {
        this.defaultQueryForm = Object.assign({}, { ...this.defaultQueryForm }, { ...newVal })
      }
    }
  },
  props: {
    // 属性配置
    propsConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表单对象
    formModel: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
}
</script>

<style scoped>

</style>
