<template>
  <view class="container" style="paddingBottom:1rpx;">
    <view class="section">
      <view class="section-title">{{ title }}</view>
      <view class="form-view">
        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="140rpx"
          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
          <u-form-item label="字典类型">
            <u--input v-model="form.dictType" disabled disabledColor="#ffffff" placeholder="字典类型"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>

          <u-form-item label="数据标签" prop="dictLabel" required>
            <u--input v-model="form.dictLabel" placeholder="请输入数据标签"
              inputAlign="left" :customStyle="getInputStyle('dictLabel')"></u--input>
          </u-form-item>

          <u-form-item label="数据键值" prop="dictValue" required>
            <u--input v-model="form.dictValue" placeholder="请输入数据键值"
              inputAlign="left" :customStyle="getInputStyle('dictValue')"></u--input>
          </u-form-item>

          <u-form-item label="显示排序" prop="dictSort" required>
            <u--input v-model.number="form.dictSort" type="digit" placeholder="请输入显示排序"
              inputAlign="left" :customStyle="getInputStyle('dictSort')"></u--input>
          </u-form-item>

          <u-form-item label="回显样式" prop="listClassName" @click="showListClassPicker = true">
            <view class="input-with-arrow">
              <u--input v-model="listClassName" disabled disabledColor="#ffffff" placeholder="请选择回显样式"
                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>

   <u-form-item label="备注" prop="remark" labelPosition="top">
           <u--textarea v-model="form.remark" placeholder="请输入备注"   inputAlign="right" count
              maxlength="500" style="border: 2rpx solid #dcdfe6 !important;height：160rpx"></u--textarea>
          </u-form-item>
        </u--form>
        <view class="form-btn">
          <u-button type="primary" text="提交" @click="submit"></u-button>
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
    <u-picker itemHeight="88" :show="showListClassPicker" :columns="listClassList" keyName="label" @cancel="showListClassPicker = false"
      @confirm="handleListClassConfirm"></u-picker>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { getData, addData, updateData } from '@/api/system/dict/data'
import { getDicts } from "@/api/system/dict/data"
import { onLoad } from "@dcloudio/uni-app"

const { proxy } = getCurrentInstance()
const listClassList = ref([[
  { value: 'default', label: '默认' },
  { value: 'primary', label: '主要' },
  { value: 'success', label: '成功' },
  { value: 'info', label: '信息' },
  { value: 'warning', label: '警告' },
  { value: 'danger', label: '危险' }
]])
const title = ref('添加字典数据')
const showListClassPicker = ref(false)
const listClassName = ref('')

const form = reactive({
  dictCode: undefined,
  dictType: undefined,
  dictLabel: undefined,
  dictValue: undefined,
  dictSort: 0,
  listClass: 'default',
  remark: undefined
})

// 表单验证错误字段
const errorFields = ref([])

// 输入框基础样式
const inputBaseStyle = {
  background: '#ffffff',
  border: '2rpx solid #dcdfe6',
  borderRadius: '8rpx',
  padding: '0 24rpx',
  height: '60rpx',
  lineHeight: '60rpx',
  width: '100%',
  boxSizing: 'border-box'
}

// 输入框错误样式
const inputErrorStyle = {
  background: '#fef0f0',
  border: '2rpx solid #f56c6c',
  borderRadius: '8rpx',
  padding: '0 24rpx',
  height: '60rpx',
  lineHeight: '60rpx',
  width: '100%',
  boxSizing: 'border-box'
}

// 根据字段名获取输入框样式
const getInputStyle = (field) => {
  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}

const rules = {
  dictLabel: [
    { required: true, message: '数据标签不能为空', trigger: ['blur', 'change'] }
  ],
  dictValue: [
    { required: true, message: '数据键值不能为空', trigger: ['blur', 'change'] }
  ],
  dictSort: [
    { 
      required: true, 
      validator: (rule, value, callback) => {
        if (value === undefined || value === null || value === '') {
          callback(new Error('显示排序不能为空'))
        } else {
          callback()
        }
      }, 
      trigger: ['blur', 'change'] 
    }
  ]
}

onLoad((option) => {
  if (option.dictCode) {
    title.value = '修改字典数据'
    getDetail(option.dictCode)
  } else if (option.dictType) {
    form.dictType = option.dictType
    // 新增时默认显示回显样式
    setTimeout(() => {
      updateListClassName()
    }, 100)
  }
})

// 获取详情
function getDetail(dictCode) {
  getData(dictCode).then(res => {
    Object.assign(form, res.data)
    updateListClassName()
  })
}

// 更新回显样式名称显示
function updateListClassName() {
  if (listClassList.value.length > 0 && listClassList.value[0].length > 0) {
    const item = listClassList.value[0].find(v => v.value === form.listClass)
    listClassName.value = item ? item.label : ''
  }
}

// 回显样式选择确认
function handleListClassConfirm(e) {
  form.listClass = e.value[0].value
  listClassName.value = e.value[0].label
  showListClassPicker.value = false
}

// 提交
function submit() {
  errorFields.value = [] // 清空错误字段
  proxy.$refs['uForm'].validate().then(() => {
    if (form.dictCode) {
      updateData(form).then(() => {
        proxy.$modal.msgSuccess('修改成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      })
    } else {
      addData(form).then(() => {
        proxy.$modal.msgSuccess('新增成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      })
    }
  }).catch((errors) => {
    // 记录验证失败的字段
    if (errors && Array.isArray(errors)) {
      errorFields.value = errors.map(err => err.field || err.prop)
    }
    proxy.$modal.msgError('请填写完整信息')
  })
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
}

.section {
  margin: 24rpx;
  padding: 0;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .section-title {
    padding: 16rpx 24rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    line-height: 1.2;
    font-size: 28rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    
    &::before {
      content: '';
      width: 6rpx;
      height: 28rpx;
      background: #ffffff;
      border-radius: 3rpx;
      margin-right: 12rpx;
    }
  }

  .form-view {
    padding: 24rpx;

    .form-btn {
      padding-top: 16rpx;
    }
  }
}

.input-with-arrow {
  position: relative;
  width: 100%;
  
  .arrow-icon {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #c0c4cc;
    font-size: 20rpx;
    pointer-events: none;
    z-index: 10;
  }
}
</style>

<style lang="scss">
.form-btn .u-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  border-radius: 24rpx !important;
  height: 80rpx !important;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
}

.form-btn .u-button__text {
  font-size: 30rpx !important;
  font-weight: 500 !important;
  letter-spacing: 2rpx !important;
}

/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
  height: 60rpx !important;
  line-height: 60rpx !important;
  min-height: 60rpx !important;
  box-sizing: border-box !important;
}

.u-form-item__body {
  flex: 1 !important;
}

.u-form-item__body .u--input {
  width: 100% !important;
  box-sizing: border-box !important;
}

.u-input__content__field-wrapper__field {
  line-height: 60rpx !important;
  height: 60rpx !important;
}
</style>
