<script setup lang="ts">
import { ref } from 'vue';
import OperateModel from '@/components/advanced/operate-model.vue';
import { translateOptions } from '@/utils/common';
import { specialEnableStatusOptions } from '@/constants/business';

defineOptions({
  name: 'DataOperateModel',
  inheritAttrs: false
});

const { dictType } = defineProps<{
  dictType: Api.SystemManage.DictInfo['dictType'];
}>();

type Model = Omit<Api.SystemManage.DictInfo, 'dictCode'>;
const model = ref<Model>({
  dictType: '',
  dictLabel: '',
  dictValue: '',
  cssClass: '',
  listClass: 'default',
  dictSort: 0,
  status: '0',
  remark: undefined
});

const rules: Record<keyof Pick<Model, 'dictLabel' | 'dictValue' | 'dictSort'>, App.Global.FormRule> = {
  dictLabel: { required: true, message: '数据标签不能为空', trigger: 'blur' },
  dictValue: { required: true, message: '数据键值不能为空', trigger: 'blur' },
  dictSort: { required: true, message: '数据顺序不能为空', trigger: 'blur', type: 'number' }
};

const listClassOptions = [
  {
    value: 'default',
    label: '默认'
  },
  {
    value: 'primary',
    label: '主要'
  },
  {
    value: 'success',
    label: '成功'
  },
  {
    value: 'info',
    label: '信息'
  },
  {
    value: 'warning',
    label: '警告'
  },
  {
    value: 'danger',
    label: '危险'
  }
];

function handleAddDictType() {
  model.value.dictType = dictType;
}
</script>

<template>
  <OperateModel
    v-model:model="model"
    :rules="rules"
    title="字典数据"
    classStyle="w-500px"
    @open="handleAddDictType"
    v-bind="$attrs"
  >
    <template #formItem>
      <NFormItemGi span="24" label="字典类型" path="dictType">
        <NInput v-model:value="model.dictType" disabled placeholder="请输入字典类型" />
      </NFormItemGi>
      <NFormItemGi span="24" label="字典标签" path="dictLabel">
        <NInput v-model:value="model.dictLabel" placeholder="请输入字典标签" />
      </NFormItemGi>
      <NFormItemGi span="24" label="数据键值" path="dictValue">
        <NInput v-model:value="model.dictValue" placeholder="请输入数据键值" />
      </NFormItemGi>
      <NFormItemGi span="24" label="样式属性" path="cssClass">
        <NInput v-model:value="model.cssClass" placeholder="请输入样式属性" />
      </NFormItemGi>
      <NFormItemGi span="24" label="显示排序" path="dictSort">
        <NInputNumber v-model:value="model.dictSort" :min="0" placeholder="请输入显示排序" />
      </NFormItemGi>
      <NFormItemGi span="24" label="回显样式" path="listClass">
        <NSelect v-model:value="model.listClass" :options="listClassOptions" placeholder="请选择回显样式" />
      </NFormItemGi>
      <NFormItemGi span="24" label="状态" path="status">
        <NSelect
          v-model:value="model.status"
          :options="translateOptions(specialEnableStatusOptions as CommonType.Option<string>[])"
          placeholder="请选择状态"
        />
      </NFormItemGi>
      <NFormItemGi span="24" label="备注" path="remark">
        <NInput v-model:value="model.remark" type="textarea" placeholder="请输入备注" />
      </NFormItemGi>
    </template>
  </OperateModel>
</template>

<style scoped></style>
