<script setup lang="ts">
import type { UserProp } from '../types'
import { useMapStore } from '@/stores/map'
import { getNameByValue } from '@/utils/dictionary'
interface Props {
  data: UserProp
}
const props = defineProps<Props>()

const store = useMapStore()

const category = computed(() => {
  return getNameByValue(props.data.category, store.getMapValuesByKey('experiment_meta_members_category'))
})
</script>

<template>
  <el-dialog title="查看用户属性" :close-on-click-modal="false" width="600px">
    <div style="display: flex; justify-content: center">
      <el-form label-suffix="：" label-width="110px">
        <el-form-item label="属性ID">
          {{ data.id }}
        </el-form-item>
        <el-form-item label="属性英文名称">
          {{ data.english_name }}
        </el-form-item>
        <el-form-item label="属性名称">
          {{ data.name }}
        </el-form-item>
        <el-form-item label="属性类型">
          {{ category }}
        </el-form-item>
        <el-form-item label="属性字段类型">
          {{ data.type_name }}
        </el-form-item>
        <el-form-item label="属性字段格式">
          {{ data.format }}
        </el-form-item>
        <el-form-item label="状态">
          {{ data.status_name }}
        </el-form-item>
        <el-form-item label="更新人">
          {{ data.updated_operator_name }}
        </el-form-item>
        <el-form-item label="更新时间">
          {{ data.updated_time }}
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
