<template>
  <div class="my-diy-form">
    <el-form    :model="myFormData" v-bind="forms.formAttrs || {}" ref="refEl">
      <el-row>
        <template v-for="item in forms.formItemsArr" :key="item.label">
          <el-col  v-bind="{
          ...spanAttrsA,
          ...item.colAttrs
        }"
                   :class="item.colClass"  v-if="!item.isHide" >
            <el-form-item ref="itemRef" :class="[{'no-label':item.type === 'button' | item.isNoLabel},item.className]"   :prop="item.modelValue"  :label="item.label" v-bind="item.itemOtherAttrs"
            >
              <template #label="data" >
                <slot  :name="'label' + item.modelValue" :data="data"></slot>
              </template>
              <el-tooltip    popper-class="my-tool" :hide-after="0" placement="top"    v-bind="item.tooltip" :disabled="!item.tooltip || item.tooltip.disabled">
                <template #content> {{item.tooltip.content}}</template>
                <template v-if="item.type === 'input'">

                  <!--                @change="changeEvent($event,item)"-->
                  <el-input v-on="item.events"   @change="changeEvent($event,item)"  :validate-event="false"  v-bind="item.elInputEleAttrs" v-model="myFormData[item.modelValue]">
                    <template #append v-if="item.append">
                      <slot :name="item.modelValue +'append'" :data="item"></slot>
                    </template>
                    <template #prepend v-if="item.prepend">
                      <slot :name="item.modelValue +'prepend'" :data="item"></slot>
                    </template>

                  </el-input>
                </template>
                <template v-if="item.type === 'textarea'">
                  <el-input type="textarea"  :validate-event="false"  v-bind="item.elInputEleAttrs" v-model="myFormData[item.modelValue]"/>
                </template>
                <template v-if="item.type === 'select'">
                  <!--                "-->
                  <!--                @change="changeEvent($event,item)"-->
                  <el-select v-on="item.events"       @change="changeEvent($event,item)"    collapse-tags-tooltip collapse-tags filterable  clearable :validate-event="false"  v-bind="item.elSelectEleAttrs"  v-model="myFormData[item.modelValue]">


                    <el-option   v-bind="option.elOptionEleAttrs" v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value">
                      <template #default>

                      </template>
                    </el-option>
                  </el-select>
                </template>
                <template v-if="item.type === 'radio'">
                  <el-radio-group @change="changeEvent($event,item)" v-model="myFormData[item.modelValue]">
                    <el-radio v-for="radio in item.radioArr"  v-bind="item.elRadioEleAttrs"  :label="radio.value">{{radio.label}}</el-radio>
                  </el-radio-group>
                </template>
                <template v-if="item.type === 'date-picker'">
                  <el-date-picker
                      :validate-event="false"
                      value-format="YYYY-MM-DD"
                      format="YYYY-MM-DD"

                      type="date"
                      placeholder="选择日期"
                      v-model="myFormData[item.modelValue]"
                      style="width: 100%"
                      v-bind="item.elDatePickerAttrs"
                  ></el-date-picker>
                </template>
                <template v-if="item.type === 'button'">
                  <el-button v-on="item.events" v-bind="item.btnAttrs">{{item.btnLabel}}</el-button>
                </template>
                <template v-if="item.type === 'slot'">
                  <slot :name="item.slotName"></slot>
                </template>
                <template v-if="item.type === 'checkbox'">
                  <el-checkbox   v-model="myFormData[item.modelValue]" :label="item.checkboxLabel"/>
                </template>
                <template v-if="item.type === 'checkbox-group'">
                  <el-checkbox-group v-model="myFormData[item.modelValue]" >
                    <el-checkbox v-for="checkItem in item.checkArr"   :label="checkItem.checkboxLabel">{{checkItem.name}}</el-checkbox>

                  </el-checkbox-group>
                </template>
              </el-tooltip>

            </el-form-item>


          </el-col>
          <slot name="formItemAfter"></slot>
        </template>

      </el-row>
    </el-form>
    <slot></slot>
  </div>
</template>

<script>
import {computed, onBeforeMount, onMounted, ref, watch} from "vue";

export default {
  name: "DiyElForm",
  emits:['update:model-form','update:modelForm'],

  props:{
    spanAttrs:{

    },
    span:{
      default:7
    },
    hasSearch:{
      default() {
        return true
      }
    },
    forms:{

    },
    modelForm:{

    }
  },

  setup(props,{emit}) {
    const spanAttrsA = computed(() => {
      return props.spanAttrs || {
        span:props.span
      }
    })
    const itemRef  =ref(null)
    function changeEvent(value,item){
      item.selectEvent && item.selectEvent(value)
    }
    const refEl = ref()
    const myFormData =  ref(props.modelForm)
    function setDefaultForm() {

      props.forms.formItemsArr.forEach(i => {
        if (i.defaultValue){
          myFormData.value[i.modelValue] = i.defaultValue
        }
      })
    }
    //在拿到数据才去执行myFormData赋值
    function getMyFormData(value) {
      // console.log('拿到东西222')
      myFormData.value = {
        ...value
      }
    }
    //表单验证
    const summit = () => {
      refEl.value.validate((isValid) => {

      })
    }
    watch(()=> props.modelForm,(newVal) => {

      myFormData.value = newVal
    },{
      deep:true
    })
    onMounted(() => {
      setDefaultForm()
    })
    watch(myFormData,(newVal) => {

      emit('update:modelForm',newVal)
    },{
      deep:true
    })
    return {
      myFormData,
      summit,
      refEl,
      getMyFormData,
      changeEvent,
      spanAttrsA,
      itemRef,
      setDefaultForm
    }
  }


}
</script>

<style scoped lang="scss">
:deep{
  .no-label{
    >.el-form-item__label{
      padding: 0 !important;
      width: 0 !important;
    }
  }
}

.el-form{
  //flex: 1;
}
:deep(.my-tool.el-popper){
  width: 10em !important;
  color: #f00 !important;
}
:deep{
  .el-select__popper.el-popper{
    width: 100%;
  }
  .el-select-dropdown__item{
    line-height: 1.8;
    height: auto;
    margin: 7px 0;
    min-height: 26px;
    white-space:normal;
    overflow: visible;
  }
  .el-select-dropdown{
    //white-space:normal;
    width: 100%;
    //overflow: visible;
  }
  .el-input__wrapper{
    //margin-right: 18%;
    width: 100%;
    box-sizing: border-box;
  }

}
</style>
