<template>
  <el-row class="define-row" :style="`--row-mg-right: ${itemMgRight}px`">
    <template v-for="schema in schemas" :key="schema.field">
      <el-col v-bind="schema.propsCol">
        <el-form-item :prop="schema.field" :label-width="schema.labelWidth" :label="schema.label"
          :style="setFormItemWidth">
          <!-- 下拉框选择 -->
          <template v-if="schema.component === 'Select'">
            <!-- <el-select v-model="stateBaseForm[schema.field]" :style="setStyle(schema)" v-bind="schema.componentProps"
              :collapse-tags="true">
              <el-option v-for="item in schema.options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select> -->
            <BaseSelect
              v-model:modelValue="stateBaseForm[schema.field]"
              :filterable="false"
              :collapse-tags="true"
              :options="schema.options ? schema.options : []"
              :style="setStyle(schema)" 
              v-bind="schema.componentProps"
            />
          </template>
          <template v-else-if="schema.component === 'SelectV2'">
            <!-- <el-select-v2 popper-class="define-select-v2" v-model="stateBaseForm[schema.field]" :options="schema.options"
              :height="272" :style="setStyle(schema)" :collapse-tags="true" v-bind="schema.componentProps" /> -->
            <BaseSelectV2
              v-model:modelValue="stateBaseForm[schema.field]"
              clearable
              :options="schema.options ? schema.options : []"
              :height="272"
              :style="setStyle(schema)"
              :collapse-tags="true"
              v-bind="schema.componentProps"
            />
          </template>
          <!-- 输入框显示 -->
          <template v-else-if="schema.component === 'Input'">
            <el-input v-model="stateBaseForm[schema.field]" v-clear-only-regex="schema.inputRegex || ''" :style="setStyle(schema)" v-bind="schema.componentProps" />
          </template>
          <!-- 时间 -->
          <template v-else-if="schema.component === 'DatePicker'">
            <el-date-picker v-model="stateBaseForm[schema.field]" value-format="YYYY-MM-DD" class="w-100" type="date"
              v-bind="schema.componentProps" />
          </template>
          <template v-else-if="schema.component === 'Datetime'">
            <el-date-picker v-model="stateBaseForm[schema.field]"  value-format="YYYY-MM-DD hh:mm:ss" class="w-100" type="datetime"
              v-bind="schema.componentProps" />
          </template>
          <template v-else-if="schema.component === 'Slot'">
            <slot :name="schema.field"></slot>
          </template>
        </el-form-item>
      </el-col>
    </template>
  </el-row>
</template>
<script lang="ts" setup>
import { isNumber, isObject, isString } from '@/utils/is';
import type { FormSchema } from '../Form/src/types';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import BaseSelectV2 from '@/components/QuerySelect/BaseSelectV2.vue';
import { reactive, computed, watch } from 'vue';

interface Props {
  schemas: FormSchema[],
  dataSource: Recordable,
  itemMgRight?: number,
  id?: number
}
// withDefaults ==> 用于辅助defineProps设置默认值
const props = withDefaults(defineProps<Props>(), {
  itemMgRight: 28
})
const emit = defineEmits(['changeForm'])
const stateBaseForm = reactive({})

// col宽度百分比
const setFormItemWidth = computed(() => {
  return { width: `calc(100% - ${props.itemMgRight}px)` }
})
// 初始化表单的基础数据
watch(
  () => props.id,
  (val) => {
    if (Number(val) > 0) {
      Object.assign(stateBaseForm, props.dataSource)
    }
  }
)
watch(
  stateBaseForm,
  (newVal) => {
    if (isObject(newVal)) {
      emit("changeForm", newVal)
    }
  }
)

// 设置文本框最小宽度
const setStyle = (schema) => {
  const minWidth = isNumber(schema.minWidth) ?
    schema.minWidth + 'px' : isString(schema.minWidth)
      ? schema.minWidth + '%' : ''
  return { minWidth }
}
// 清空表单数据
const reset = () => {
  Object.keys(stateBaseForm).forEach((key) => {
    if (stateBaseForm.hasOwnProperty(key)) {
      stateBaseForm[key] = undefined
    }
  })
}
// 暴露出去给外部使用
defineExpose({
  reset
});
</script>
<style lang="scss" scoped>
.define-row {

  .el-select {
    :deep(.el-select__input) {
      margin-left: 8px;
    }
  }

  .el-form-item {
    margin-right: var(--row-mg-right);

    :deep(.el-form-item__content) {
      .el-date-editor {
        width: 100%;
      }
    }

    :deep(.el-select) {
      width: 100%;
    }
    :deep(.el-select-v2) {
      width: 100%;
    }
  }
}

@media only screen and (min-width: 1500px) and (max-width: 1920px) {
  .define-row {
    div[llg='5'].el-col {
      display: block;
      max-width: 19.833333%;
      flex: 0 0 19.833333%;
    }

    div[llg='6'].el-col {
      display: block;
      max-width: 25%;
      flex: 0 0 25%;
    }

    div[llg='12'].el-col {
      display: block;
      max-width: 50%;
      flex: 0 0 50%;
    }
  }
}
</style>