<template>
  <div>
      <el-row :gutter="10">
        <el-col  :xs="it.cols[0]" :sm="it.cols[1]" :md="it.cols[2]" :lg="it.cols[3]" v-for="(it, ind) in componentList" :key="ind">
          <el-form-item v-if="(it.showFlag === undefined  || it.showFlag === true) ? true : false" :label="it.label" :label-width="it.labelWidth"  :prop="it.prop" :show-message="it.showMessage">
            <component class="dymForm"  :placeholder="editModel === 'V' ? '' : it.placeholder"
            :clearable="it.clearable"
            :multiple="it.multiple" :options="it.options"
            :disabled="it.disabled"
            :tags="it.collapseTags"
            :type="it.type"
            :name="it.name"
            :reload="it.reload"
            :loadApi="it.loadApi"
            :queryParas="buildQueryParas(it.queryName, it.queryValue)"
            :cascaderProps="it.cascaderProps"
            :selectedField="it.selectedField"
            v-model="newFormValue[it.value]"
            :maxlength="it.maxlength"
            :minlength="it.minlength"
            :isFestival="it.isFestival"
            :isShowbefore="it.isShowbefore"
            :value-format="it.format"
            :is="it.componentName"
            :tagId="it.tagId"
            :autosize="it.autosize"
            :dictTypeCode="it.dictTypeCode"
            :api="it.api"
            :valueKey="it.valueKey"
            :capitalSource="it.capitalSource"
            :loadList="it.loadList"
            :accountWidth="it.accountWidth"
            :timeType="it.timeType"
            :timeSize="it.timeSize"
            :interval.sync="it.interval"
            :format="it.format"
            :percent.sync="newFormValue[it.percent]"
            :digits="it.digits"
            :amount.sync="newFormValue[it.amount]"
            :drag="it.drag"
            :btnDisplay="it.btnDisplay"
            :picker-options="it.pickerOptions"
            :showFiles="it.showFiles"
            :allowCreate="it.allowCreate"
            :rowIndex="it.rowIndex"
            @selectChanged="selectChanged"
            @intervalData="intervalData"
            @otherData="otherData"
            @onbackblankaccount="onbackblankaccount"
            @checkData="checkData"
            @fileRemove="fileRemove"
            @uploadSuccess="uploadSuccess"
            @change="checkChange(it.value,newFormValue[it.value])"
            @selectedOptionsCheck="selectedOptionsCheck"
            @changeCheck="changeCheck">
            </component>
          </el-form-item>
        </el-col>
      </el-row>
  </div>
</template>
<script>
import BaseSelect from '@/components/element/BaseSelect.vue'
import dict from '@/components/element/SelectDictionary.vue'
import SelectCoreEnterprise from '@/components/element/cyjg/SelectCoreEnterprise.vue'
import SelectBigArea from '@/components/element/cyjg/SelectBigArea.vue'
import SelectSmallArea from '@/components/element/cyjg/SelectSmallArea.vue'
import SelectAreaCoordinator from '@/components/element/SelectAreaCoordinator.vue'
import SelectCommissioner from '@/components/element/SelectCommissioner.vue'
import SelectContacts from '@/components/element/SelectContacts.vue'
import SelectProduct from '@/components/element/cyjg/SelectProduct.vue'
import SelectCoordinator from '@/components/element/cyjg/SelectCoordinator.vue'
import SelectMarkter from '@/components/element/SelectMarkter.vue'
import SelectProCoreEnterprise from '@/components/element/cyjg/SelectProCoreEnterprise.vue'
import SelectContract from '@/components/element/cyjg/SelectContract.vue'
import SelectDepartment from '@/components/element/cyjg/SelectDepartment.vue'
import SelectAccount from '@/components/element/cyjg/SelectAccount.vue'
import SelectPlanManager from '@/components/element/cyjg/SelectPlanManager.vue'
import SelectPeriod from '@/components/element/cyjg/SelectPeriod.vue'
export default {
  components: {
    BaseSelect,
    dict,
    SelectCoreEnterprise,
    SelectBigArea,
    SelectSmallArea,
    SelectAreaCoordinator,
    SelectCommissioner,
    SelectContacts,
    SelectProduct,
    SelectCoordinator,
    SelectMarkter,
    SelectProCoreEnterprise,
    SelectContract,
    SelectDepartment,
    SelectAccount,
    SelectPlanManager,
    SelectPeriod
  },
  props: {
    componentList: {
      type: [Array],
      required: true
    },
    formValue: {
      type: [Object]
    },
    editModel: {
      type: [String],
      default: function () {
        return ''
      }
    }
  },
  computed: {
    newFormValue: {
      get: function () {
        return this.formValue
      },
      set: function (value) {
        this.$emit('update:formValue', value)
      }
    }
  },
  data () {
    return {
      selectObj: {}
    }
  },
  methods: {
    intervalData (value) {
      this.$emit('intervalData', value)
    },
    otherData (value) {
      this.$emit('otherData', value)
    },
    selectedOptionsCheck (value) {
      this.$emit('selectedOptionsCheck', value)
    },
    changeCheck (value) {
      this.$emit('changeCheck', value)
    },
    onbackblankaccount (value) {
      this.$emit('onbackblankaccount', value)
    },
    checkChange (valueKey, value) {
      this.$emit('checkChange', valueKey, value)
    },
    selectChanged (index, name, row) {
      this.selectObj[name + 'Info'] = row
      this.$emit('selectChanged', this.selectObj, index)
    },
    checkData (value) {
      this.$emit('checkData', value)
    },
    fileRemove (val) {
      this.$emit('fileRemove', val)
    },
    uploadSuccess (value, row, list) {
      this.$emit('uploadSuccess', value, list)
    },
    buildQueryParas (queryName, queryValue) {
      let obj = {}
      if (typeof (queryName) === 'string') {
        obj[queryName] = this.formValue[queryValue]
      } else if (queryName !== undefined) {
        queryName.forEach((item, index) => {
          let v = queryValue[index]
          if (item === 'areaType') {
            obj[item] = v
          } else {
            obj[item] = this.formValue[v]
          }
        })
      }
      return obj
    }
  }
}
</script>
