<template>
  <div
    v-for="(attr_item, key) in selectItemPropsSettingProps.propsInfo"
    :key="`${selectItemPropsSettingProps.itemId}-${key}`">
    <el-form-item
      v-if="!attr_item.disabled"
      class="mt-edit-prop-form-item"
      :label="attr_item.title"
      size="small">
      <el-select
        v-if="attr_item.type === 'select' && !attr_item.disabled"
        v-model="attr_item.val"
        placeholder="Select"
        size="small"
        :disabled="attr_item?.disabled">
        <el-option
          v-for="item in attr_item.options"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
      </el-select>
      <el-input-number
        v-else-if="attr_item.type === 'number' && !attr_item.disabled"
        v-model="attr_item.val"
        :disabled="attr_item?.disabled" />
      <el-input
        v-else-if="attr_item.type === 'input' && !attr_item.disabled"
        v-model="attr_item.val"
        :disabled="attr_item?.disabled" />
      <el-input
        v-else-if="attr_item.type === 'textArea' && !attr_item.disabled"
        v-model="attr_item.val"
        :disabled="attr_item?.disabled"
        type="textarea" />
      <el-color-picker
        v-else-if="attr_item.type === 'color' && !attr_item.disabled"
        v-model="attr_item.val"
        :show-alpha="attr_item.showAlpha"
        :color-format="attr_item.colorFormat"
        :disabled="attr_item?.disabled" />
      <el-switch
        v-else-if="attr_item.type === 'switch' && !attr_item.disabled"
        v-model="attr_item.val"
        :disabled="attr_item?.disabled" />
      <div v-else-if="attr_item.type === 'jsonEdit' && !attr_item.disabled">
        <json-edit v-model:contentObj="attr_item.val" />
      </div>
    </el-form-item>
  </div>
</template>
<script setup lang="ts">
import type { ILeftAsideConfigItemPublicProps } from '@/components/mt-edit/store/types'
import {
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElSelect,
  ElOption,
  ElSwitch,
  ElColorPicker
} from 'element-plus'
import JsonEdit from './json-edit.vue'
type SelectItemPropsSettingProps = {
  itemId?: string
  propsInfo: ILeftAsideConfigItemPublicProps | undefined
}
const selectItemPropsSettingProps = withDefaults(defineProps<SelectItemPropsSettingProps>(), {})
</script>
<style scoped>
.mt-edit-prop-form-item :deep(.el-form-item__label) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
