<template>
  <el-form :model="model" :label-width="labelWidth">
    <el-row :gutter="20">
      <el-col
        v-for="(item, index) in filteredFormItems"
        :key="index"
        :span="24 / columnNumber"
      >
        <el-form-item :label="item.columnLabel" size="default">
          <template v-if="typeof item.listqueryTemplateID === 'number'">
            <el-select
              v-model="model[correctKey(item)]"
              size="small"
              filterable
              default-first-option
              style="width: 100%"
              placeholder="请选择"
              clearable
              @change="
                val => {
                  selectChangeHandler(val, model[correctKey(item)])
                }
              "
            >
              <el-option
                v-for="option in selectOptionMap[item.listqueryTemplateID]"
                :key="option[option.setvalue]"
                :label="option[option.setlabel]"
                :value="option[option.setvalue]"
              />
            </el-select>
          </template>
          <template v-else-if="item.dataType == 'longtext'">
            <el-input
              v-model="model[item.columnName]"
              type="textarea"
              size="small"
              :rows="1"
              @change="inputChangeHandler"
            />
          </template>
          <template v-else-if="item.dataType == 'datetime'">
            <el-date-picker
              v-model="model[item.columnName]"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :rows="1"
              placeholder="选择日期时间"
              @change="inputChangeHandler"
            />
          </template>
          <template v-else-if="item.dataType == 'number'">
            <el-input
              v-model.number="model[item.columnName]"
              size="small"
              onkeyup="value=value.replace(/[^1-9]/g,'')"
              @change="inputChangeHandler"
            />
          </template>
          <template v-else>
            <el-input
              v-model="model[item.columnName]"
              size="small"
              @change="inputChangeHandler"
            />
          </template>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { CommonTableColumn, SelectOption, CommonData } from '~/common'

const props = defineProps({
  model: {
    type: Object as PropType<CommonData>,
    required: true,
  },
  items: {
    type: Array as PropType<CommonTableColumn[]>,
    required: true,
  },
  columnNumber: {
    type: Number as PropType<1 | 2>,
    default: 1,
  },
  selectOptionMap: {
    type: Object as PropType<{ [id: number]: SelectOption[] }>,
    required: true,
  },
  labelWidth: {
    type: [String, Number],
    default: 80,
  },
})

const filteredFormItems = computed(() =>
  props.items.filter(item => item.needShow)
)

const correctKey = (item: CommonTableColumn) => {
  if (typeof item.listqueryTemplateID === 'number') {
    return props.selectOptionMap[item.listqueryTemplateID][0].setvalue
  } else {
    return item.columnName
  }
}

watchEffect(() => {
  filteredFormItems.value.forEach(item => {
    if (!props.model[correctKey(item)]) {
      props.model[correctKey(item)] = null
    }
  })
})


const selectChangeHandler = (val, key) => {
  if (val === '') {
    props.model[key] = null
  }
}

const inputChangeHandler = (val, key) => {
  if (val === '') {
    props.model[key] = null
  }
}
</script>

<style scoped lang="scss"></style>
