<!-- eslint-disable vue/no-mutating-props -->
<!--
 * @Author: Devin
 * @Date: 2022-11-15 11:30:12
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-17 16:25:12
 * @Description: ts工程开发
-->
<template>
  <el-form-item
    ref="ruleFormRef"
    class="aiot-el-form-item"
    :prop="formItem?.name || ''"
    :rules="formItem?.rules || []"
    :label="formItem?.label || ''"
  >
    <!-- input -->
    <el-input
      v-if="formItem.type === 'input'"
      v-bind="formItem?.attrs"
      v-model="formValues[formItem.name]"
      class="__common-form-item"
      @change="changeEvent(formItem)"
    ></el-input>
    <el-input
      v-if="formItem.type === 'textarea'"
      v-bind="formItem?.attrs"
      v-model="formValues[formItem.name]"
      type="textarea"
      class="__common-form-item"
      @change="changeEvent(formItem)"
    ></el-input>
    <!-- select -->
    <common-select
      v-if="formItem.type === 'select'"
      v-bind="formItem?.attrs"
      v-model="formValues[formItem.name]"
      class="__common-form-item"
      @change="changeEvent(formItem)"
    ></common-select>
    <!-- number -->
    <el-input-number
      v-if="formItem.type === 'input-num'"
      v-bind="formItem?.attrs"
      v-model="formValues[formItem.name]"
      class="__common-form-item"
      @change="changeEvent(formItem)"
    ></el-input-number>
    <!-- radio -->
    <el-radio
      v-if="formItem.type === 'radio'"
      v-bind="formItem?.attrs"
      v-model="formValues[formItem.name]"
      @change="changeEvent(formItem)"
    ></el-radio>

    <common-radio-group
      v-if="formItem.type === 'radio-group'"
      v-bind="formItem?.attrs"
      v-model="formValues[formItem.name]"
      @change="changeEvent(formItem)"
    ></common-radio-group>

    <!-- cascader -->
    <el-cascader
      v-if="formItem.type === 'cascader'"
      v-bind="formItem?.attrs"
      v-model="formValues[formItem.name]"
      class="__common-form-item"
      @change="changeEvent(formItem)"
    ></el-cascader>
    <!--switch-->
    <el-switch
      v-if="formItem.type === 'switch'"
      v-bind="formItem?.attrs"
      v-model="formValues[formItem.name]"
      @change="changeEvent(formItem)"
    ></el-switch>
    <!-- checkbox -->
    <el-checkbox
      v-if="formItem.type === 'checkbox'"
      v-bind="formItem?.attrs"
      v-model="formValues[formItem.name]"
      @change="changeEvent(formItem)"
    ></el-checkbox>

    <!-- chckgroup -->
    <common-check-group
      v-if="formItem.type === 'check-group'"
      v-model="formValues[formItem.name]"
      v-bind="formItem?.attrs"
      @change="changeEvent(formItem)"
    ></common-check-group>
    <!-- date-picker -->
    <el-date-picker
      v-if="formItem.type === 'date-picker'"
      v-bind="formItem?.attrs"
      v-model="formValues[formItem.name]"
      class="__common-form-item"
      @change="changeEvent(formItem)"
    ></el-date-picker>
  </el-form-item>
</template>

<script setup lang="ts">
import { defineEmits, ref } from 'vue';
import CommonCheckGroup from './CheckGroup.vue';
import CommonRadioGroup from './RadioGroup.vue';

defineProps({
  formItem: {
    type: Object,
    default: () => {}
  },
  formValues: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(['changeEvent']);

// 触发change事件
const changeEvent = (form: any) => {
  emits('changeEvent', form);
};

// 校验规则
const ruleFormRef = ref(null);

function checkRules() {
  ruleFormRef.value!.validate((valid: any) => {
    if (valid) {
      return true;
    }
    return false;
  });
}

defineExpose({
  ruleFormRef,
  checkRules
});
</script>

<style lang="scss">
.aiot-el-form-item {
  width: calc(100% - 24px);
  // margin-bottom: 10 !important;
  margin-bottom: 0 !important;
  margin-top: 18px !important;
}
.__common-form-item {
  width: 100%;
  display: block;
  .el-input__wrapper {
    width: 100%;
  }
}
</style>