<template>
  <div style="width: 100%">
    <cms-form-input
      v-if="propsConfig.componentType === 1"
      v-model="inputValue" :placeholder="placeholder"/>
    <cms-form-select
      v-if="propsConfig.componentType === 2 && !Array.isArray(this.constants)"
      v-model="inputValue"
      :placeholder="'请选择'"
      :multiple="propsConfig.multipleSelect!==0"
      :select-data="constants"
      :select-key="propsConfig.dataSource"
      :match-key="propsConfig.matchKey ? JSON.parse(propsConfig.matchKey) : undefined"
      :props="propsConfig.matchKey ? JSON.parse(propsConfig.matchKey) : undefined"
    />
    <cms-date-picker
      v-model="inputValue"
      align="right" type="date" auto-complete="off"
      format="yyyy-MM-dd" value-format="yyyy-MM-dd"
      v-if="propsConfig.componentType === 3"
      :placeholder="placeholder"
    />
    <cms-form-amount
      v-if="propsConfig.componentType === 7"
      v-model="inputValue" :placeholder="placeholder"/>
    <cms-radio-group
      v-if="propsConfig.componentType === 8 && !Array.isArray(this.constants)"
      v-model="inputValue"
      :placeholder="placeholder"
      :radio-data="constants"
      :radio-key="propsConfig.dataSource"
    />
    <cms-multiple-magnifier
      @confirm="magnifierConfirm"
      v-model="inputValue" size="small"
      v-if="propsConfig.componentType === 9"
      :placeholder="'请选择'"
      :props-config="propsConfig"
      :form-model="formModel"
    />
    <cms-form-select
      v-if="propsConfig.componentType === 10 && !Array.isArray(this.constants)"
      v-model="inputValue"
      @change="changeCustomSelect"
      :multiple="propsConfig.multipleSelect!==0"
      :select-data="constants"
      :select-key="propsConfig.dataSource"
      :placeholder="'请选择'"
      :match-key="propsConfig.matchKey ? JSON.parse(propsConfig.matchKey) : undefined"
      :props="propsConfig.propsConfig ? JSON.parse(propsConfig.propsConfig) : undefined"
    />
  </div>
</template>

<script>
import CmsCommonMagnifier from "../CmsCommonMagnifier/CmsCommonMagnifier";
import CmsMultipleMagnifier from "./CmsMultipleMagnifier";

export default {
  name: "CmsExtendFieldConfig",
  components: { CmsMultipleMagnifier, CmsCommonMagnifier },
  methods: {
    changeCustomSelect(data) {
      if (this.propsConfig.matchKey) {
        const matchKeyConfig = JSON.parse(this.propsConfig.matchKey);
        Object.keys(matchKeyConfig).forEach(field => {
          this.formModel[field] = data[matchKeyConfig[field]];
        })
      }
    },
    magnifierConfirm(item) {
      const sources = {};
      const matchKeyConfig = JSON.parse(this.propsConfig.matchKey);
      Object.keys(matchKeyConfig).forEach(field => {
        sources[field] = item[matchKeyConfig[field]];
      })
      const row = Object.assign({}, { ...this.formModel }, { ...sources })
      this.reloadTable(row, this.fieldName)
    }
  },
  created() {
  },
  computed: {
    inputValue: {
      get() {
        return this.value
      },
      set(value) {
        if (this.reloadTable) {
          const source2 = { [this.fieldName]: value };
          const row = Object.assign({}, { ...this.formModel }, source2)
          this.reloadTable(row, this.fieldName)
        }
        this.$emit('input', value);
      }
    },
  },
  props: {
    value: [ String, Number, Array ],
    constantsUrl: Function,
    reloadTable: Function,
    dictionaryConfig: [],
    fieldName: String,
    constants: {},
    placeholder: String,
    // 属性配置
    propsConfig: {
      type: Object,
      default: () => {
        return undefined
      }
    },
    // 表单对象
    formModel: {
      type: Object,
      default: () => {
        return undefined
      }
    }
  }

}
</script>

<style scoped>

</style>
