<template>
  <div class="dashboard-formitem">
    <template v-for="(item, index) in formData">
      <el-form-item :key="index" :label-width="labelWidth" :label="item.formLabel || item.label" :rules="item.rules" :prop="item.key" :class="item.formLabel || item.label ? 'dee-form-item' : 'dee-all-row'">
        <component
          :is="item.component"
          v-model="form[item.key]"
          :form-key="item.key"
          :mul-form="form"
          v-bind="item"
          :config="item"
          @change="change($event, item.key, formData)"
          @handleClick="click($event, item.key)"
          @mulClick="mulClick(...arguments, index)"
          @toolsClick="toolsClick(...arguments, index)"
        />
      </el-form-item>
    </template>
  </div>
</template>

<script>
import DeeRadioImageGroup from '@/components/Dashboard/DeeRadioImageGroup.vue'
import DeeDashboardRadioImageGroup from '@/components/Dashboard/DeeDashboardRadioImageGroup.vue'
import DeeBackgroundImage from '@/components/Dashboard/DeeBackgroundImage.vue'
import DeeBtnTools from '@/components/Dashboard/DeeBtnTools.vue'
import DeeSelect from '@/components/Dashboard/DeeSelect.vue'
import DeeMultipleList from '@/components/Dashboard/DeeMultipleList.vue'
import DeeText from '@/components/Dashboard/DeeText.vue'
import DeeTreeFormItem from '@/components/Dashboard/DeeTreeFormItem.vue'
import DeeNestingFormItem from '@/components/Dashboard/DeeNestingFormItem.vue'
import DeeThemeStyle from '@/components/Dashboard/DeeThemeStyle.vue'
//
export default {
  name: 'DeeFormItem',
  components: { DeeBtnTools, DeeBackgroundImage, DeeRadioImageGroup, DeeSelect, DeeMultipleList, DeeText, DeeTreeFormItem, DeeNestingFormItem, DeeThemeStyle, DeeDashboardRadioImageGroup },
  props: {
    formData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    labelWidth: {
      type: String,
      default: ''
    },
    form: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    change(val, key, formData) {
      this.$emit('change', val, key, formData)
    },
    click(val, key) {
      this.$emit('mulClick', val, key)
    },
    mulClick(method, index, list, curIndex) {
      this.$emit('mulClick', method, index, list, curIndex)
    },
    toolsClick(method, index, list, curIndex) {
      this.$emit('toolsClick', method, index, list, curIndex)
    }
  }
}
</script>

<style lang="scss">
  .dashboard-formitem{
  .dee-form-item {
    width: 100%;
    display: flex !important;
  }
  .dee-form-item .el-form-item__content {
    display: flex !important;
    /* width: calc(100% - 100px) !important; */
    flex: 1;
  }
  .dee-form-item .el-select {
    /* width: 100%; */
    flex: 1;
  }
  .dee-form-item .dee-text {
    /* width: 100%; */
    flex: 1;
  }
  .dee-all-row, .dee-all-row .el-form-item__content {
    display: grid !important;
    width: 100%;
    flex: 1;
  }
  }

</style>