<script setup lang="ts">
import type { UserProp } from '../types'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useMapStore } from '@/stores/map'
import { createMemberMeta, updateMemberMeta } from '../api'
import { QuestionFilled } from '@element-plus/icons-vue'

const store = useMapStore()

interface Props {
  data?: UserProp
}
const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const isUpdate = $computed(() => {
  return !!props.data?.id
})
const title = $computed(() => {
  return isUpdate ? '修改用户属性' : '新建用户属性'
})

const formRef = $ref<FormInstance>()
const form = reactive(
  props.data || {
    name: '',
    english_name: '',
    type: '',
    format: '',
    status: '1',
    type_name: '',
    category: '',
  }
)

const rules = ref<FormRules>({
  name: [{ required: true, message: '请输入' }],
  english_name: [{ required: true, message: '请输入' }],
  category: [{ required: true, message: '请选择' }],
  type: [{ required: true, message: '请选择' }],
  format: [{ required: true, message: '请输入' }],
  status: [{ required: true, message: '请选择' }],
})

// 提交
function handleSubmit() {
  formRef?.validate().then(() => {
    isUpdate ? handleUpdate() : handleCreate()
  })
}

// 新建
function handleCreate() {
  createMemberMeta(form).then(() => {
    ElMessage({ message: '创建成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
// 修改
function handleUpdate() {
  updateMemberMeta(form).then(() => {
    ElMessage({ message: '修改成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}

// 属性字段类型
const experimentAttributeOptions = $ref(store.getMapValuesByKey('experiment_attribute_type'))
const membersCategory = $ref(store.getMapValuesByKey('experiment_meta_members_category'))

// 属性字段类型选择后->格式的placeholder改变
const formatPlaceholder = computed(() => {
  return form.type === '1' ? '请输入字符串长度' : form.type === '3' ? '请输入小数点后位数' : '请输入长度'
})

const changeFormatType = function () {
  switch (form.type) {
    case '1':
      form.format = '25'
      break
    case '2':
      form.format = '4'
      break
    case '3':
      form.format = '20'
      break
    case '4':
      form.format = 'yyyy-mm-dd'
      break
    case '5':
      form.format = 'yyyy-mm-dd hh:mm:ss'
      break
  }
}

const popoverText = function (type: any) {
  let t = ''
  if (type === '1') {
    t = '你可以在这个字段中输入最多25个字符'
  }
  if (type === '2') {
    t = '该字段可以存储最多四位数的整数'
  }
  if (type === '3') {
    t = '数字的总长度为20位，包括整数部分和小数部分'
  }
  if (type === '4') {
    t =
      'yyyy: 表示四位数的年份，例如2023年会被表示为“2023”。<br/>mm: 表示两位数的月份，从01到12，例如3月表示为“03”。<br/>dd: 表示两位数的日期，从01到31，具体取决于月份和是否为闰年。<br/>例如“2023-04-01”代表的是2023年4月1日'
  }
  if (type === '5') {
    t =
      'yyyy: 表示四位数的年份，例如2023。<br/>mm: 表示两位数的月份，从01到12表示1月到12月。<br/>dd: 表示两位数的日期，从01到31，依据具体月份和是否为闰年。<br/>hh: 表示两位数的小时，使用24小时制，从00到23表示。<br/>mm: 表示两位数的分钟，从00到59。<br/>ss: 表示两位数的秒，从00到59。<br/>例如"2023-04-01 15:30:45"表示的是2023年4月1日下午3点30分45秒'
  }
  return t
}
</script>

<template>
  <el-dialog :title="title" :close-on-click-modal="false" width="600px" @closed="$emit('update:modelValue', false)">
    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：" label-width="122px">
      <el-form-item label="属性ID" v-if="isUpdate">
        {{ props.data?.id }}
      </el-form-item>
      <el-form-item label="属性英文名称" prop="english_name">
        <el-input v-model="form.english_name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="属性名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="属性类型" prop="category">
        <el-select-v2 v-model="form.category" style="width: 100%" placeholder="请选择" :options="membersCategory" />
      </el-form-item>
      <el-form-item label="属性字段类型" prop="type">
        <el-select
          :disabled="isUpdate"
          @change="changeFormatType"
          v-model="form.type"
          style="width: 100%"
          placeholder="请选择">
          <el-option
            :label="item.label"
            :value="item.value"
            :key="item.id"
            v-for="item in experimentAttributeOptions"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="属性字段格式" prop="format" v-if="form.type !== ''">
        <el-select
          :disabled="isUpdate"
          v-if="form.type === '4' || form.type === '5'"
          v-model="form.format"
          style="width: 93%; margin-right: 10px"
          placeholder="请选择">
          <el-option v-if="form.type !== '5'" label="yyyy-mm-dd" value="yyyy-mm-dd"></el-option>
          <el-option v-if="form.type !== '4'" label="yyyy-mm-dd hh:mm:ss" value="yyyy-mm-dd hh:mm:ss"></el-option>
        </el-select>
        <el-input
          style="width: 93%; margin-right: 10px"
          :disabled="isUpdate"
          type="number"
          v-else
          v-model="form.format"
          :placeholder="formatPlaceholder" />
        <el-popover placement="top-start" :width="300" trigger="hover" :title="form.type_name">
          <template #reference>
            <div style="display: flex; justify-content: center; cursor: pointer">
              <el-icon size="20"><QuestionFilled /></el-icon>
            </div>
          </template>
          <div v-html="popoverText(form.type)"></div>
        </el-popover>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch v-model="form.status" active-text="生效" inactive-text="失效" active-value="1" inactive-value="0" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
