<template>
  <div class="type-item">
    <template v-if="['int', 'long', 'float', 'double'].includes(valueType.type)">
      <div class="flex-row" style="margin-bottom: 0;">
        <!-- 取值范围 -->
        <el-form-item :label="$t('message.device.formI18nLabel.valueRange')" prop="min" class="flex1">
          <!-- 最小值 -->
          <el-input v-model="valueType.min" type="number" @input="setNull(valueType, 'min', $event)" :placeholder="$t('message.device.formI18nPlaceholder.valueRangeMin')" />
        </el-form-item>
        <div class="split" style="margin-bottom: 20px;">~</div>
        <el-form-item prop="max" class="flex1" label-width="0">
          <!-- 最大值 -->
          <el-input v-model="valueType.max" type="number" @input="setNull(valueType, 'max', $event)" :placeholder="$t('message.device.formI18nPlaceholder.valueRangeMax')" />
        </el-form-item>
      </div>
      <!-- 单位 -->
      <el-form-item :label="$t('message.device.formI18nLabel.unit')" prop="unit">
        <!-- 请输入单位 -->
        <el-input v-model="valueType.unit" :placeholder="$t('message.device.formI18nPlaceholder.inputUnit')" />
      </el-form-item>
    </template>
    <!-- 精度 -->
    <el-form-item :label="$t('message.device.formI18nLabel.precision')" prop="decimals" v-if="['float', 'double'].includes(valueType.type)">
      <!-- 请输入精度 -->
      <el-input v-model="valueType.decimals" type="number" :placeholder="$t('message.device.formI18nPlaceholder.inputPrecision')" />
    </el-form-item>

    <!-- 最大长度 -->
    <el-form-item :label="$t('message.device.formI18nLabel.maxLength')" prop="maxLength" v-if="valueType.type === 'string'">
      <!-- 请输入最大长度 -->
      <el-input v-model="valueType.maxLength" type="number" :placeholder="$t('message.device.formI18nPlaceholder.inputMaxLength')" />
    </el-form-item>
    <!-- 布尔值-->
    <el-form-item :label="$t('message.device.formI18nLabel.booleanValue')" v-else-if="valueType.type === 'boolean'">
      <div class="input-box flex-row">
        <!-- 请输入true时显示的文字 -->
        <el-input v-model="valueType.trueText" :laceholder="$t('message.device.formI18nPlaceholder.inputTrueText')" /><span style="margin: 0px 10px">~</span>
        <!-- 请输入布尔值 -->
        <el-input v-model="valueType.trueValue" :placeholder="$t('message.device.formI18nPlaceholder.inputBooleanValue')" disabled />
      </div>

      <div class="input-box flex-row">
        <!-- 请输入false时显示的文字 -->
        <el-input v-model="valueType.falseText" :placeholder="$t('message.device.formI18nPlaceholder.inputFalseText')" /> <span style="margin: 0px 10px">~</span>
        <!-- 请输入布尔值 -->
        <el-input v-model="valueType.falseValue" :placeholder="$t('message.device.formI18nPlaceholder.inputBooleanValue')" disabled />
      </div>
    </el-form-item>
    <!-- 枚举项 -->
    <el-form-item :label="$t('message.device.formI18nLabel.enumItems')" prop="" v-else-if="valueType.type === 'enum'">
      <div class="input-box flex-row" v-for="(item, index) in valueType.elements" :key="index">
        <!-- 请输入枚举文本 -->
        <el-input v-model="item.text" :placeholder="$t('message.device.formI18nPlaceholder.inputEnumText')" />
        <span style="margin: 0px 10px">
          <el-icon>
            <Right />
          </el-icon>
        </span>
        <!-- 请输入枚举值 -->
        <el-input v-model="item.value" :placeholder="$t('message.device.formI18nPlaceholder.inputEnumValue')" />
        <div class="input-option">
          <el-icon @click="addEnum" v-if="index == 0">
            <Plus />
          </el-icon>
          <el-icon @click="delEnum(index)" v-if="index != 0">
            <Minus />
          </el-icon>
        </div>
      </div>
    </el-form-item>
    <!-- 对象属性 -->
    <el-form-item :label="$t('message.device.formI18nLabel.objectProperty')" prop="" v-else-if="valueType.type === 'object'">
      <div class="w-full" v-for="(item, index) in valueType.properties" :key="index">
        <div class="flex-row">
          <!-- 属性标识 -->
          <el-input v-model="item.key" :placeholder="$t('message.device.formI18nPlaceholder.propertyIdentifier1')" class="flex1" />
          <!-- 属性名称 -->
          <el-input v-model="item.name" :placeholder="$t('message.device.formI18nPlaceholder.propertyName1')" class="flex1" />
          <!-- 请选择元素类型 -->
          <el-select v-model="item.valueType.type" :placeholder="$t('message.device.formI18nPlaceholder.selectElementType')" style="width: 140px;">
            <el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
              <el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" :disabled="['array', 'object', 'enum', 'date'].includes(item.type)" />
            </el-option-group>
          </el-select>
          <el-icon @click="addObject" v-if="index == 0">
            <Plus />
          </el-icon>
          <el-icon @click="delObject(index)" v-if="index != 0">
            <Minus />
          </el-icon>
        </div>
        <el-form label-width="70" label-position="left">
          <TypeItem v-if="item.valueType.type" :valueType="item.valueType"></TypeItem>
        </el-form>
      </div>
    </el-form-item>
  </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { Plus, Minus, Right } from '@element-plus/icons-vue';
import TypeItem from './typeItem.vue';

interface IValyeType {
  type: string | null;
  min?: string | null;
  max?: string | null;
  unit?: string | null;
  decimals?: string | null;
  trueText?: string | null;
  falseText?: string | null;
  trueValue?: boolean | null;
  falseValue?: boolean | null;
  maxLength?: string | null;
  elements: { text: string, value: string }[];
  elementType?: IValyeType;
  properties: { key: string, name: string, desc: string, valueType: IValyeType }[];
}

const valueTypeBase = {
  type: null,
  // max: null,
  // min: null,
  unit: null,
  decimals: null,
  trueText: '是',
  falseText: '否',
  trueValue: true,
  falseValue: false,
  maxLength: null,
  elements: [{
    'text': '',
    'value': ''
  }],
  properties: [],
}

const props = defineProps({
  valueType: {
    type: Object as PropType<IValyeType>,
    required: true
  },
  typeData: Array as PropType<any[]>
})

const addEnum = () => {
  props.valueType.elements.push({
    'text': '',
    'value': ''
  })
};

const delEnum = (index: number) => {
  props.valueType.elements.splice(index, 1)
}

const addObject = () => {
  props.valueType.properties.push({
    'key': '',
    'name': '',
    'desc': '',
    valueType: JSON.parse(JSON.stringify(valueTypeBase))
  })
};

const delObject = (index: number) => {
  props.valueType.properties.splice(index, 1)
}

const setNull = (row: any, key: string, val: string) => {
  if (!val) row[key] = null
}
</script>

<style scoped lang="scss">
.type-item {
  width: 100%;
}

.w-full {
  &:not(:first-child) {
    margin-top: 10px
  }
}

.flex-row {
  width: 100%;
  margin-top: 0;
  margin-bottom: 10px;
  gap: 12px;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
