<template>
  <view class="container" style="padding-bottom:1rpx;">
    <view class="section">
      <view class="section-title">公告信息</view>
      <view class="form-view">
        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="140rpx"
          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
          <u-form-item label="公告标题" prop="noticeTitle" required>
            <u--input v-model="form.noticeTitle" placeholder="请输入公告标题"
              inputAlign="left" :customStyle="getInputStyle('noticeTitle')"></u--input>
          </u-form-item>
          <u-form-item label="公告类型" prop="noticeTypeName" required @click="showNoticeTypePicker = true">
            <view class="input-with-arrow">
              <u--input v-model="noticeTypeName" disabled disabledColor="#ffffff" placeholder="请选择公告类型"
                inputAlign="left" :customStyle="getInputStyle('noticeType')"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>

          <u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
            <view class="input-with-arrow">
              <u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>
        </u--form>
        
        <!-- 富文本编辑器独立布局 -->
        <view class="editor-field">
          <view class="editor-label">
            <text class="required-star">*</text>
            <text>内容</text>
          </view>
          <view class="editor-container">
            <view class="editor-toolbar">
              <view class="toolbar-item" @click="format('bold')">
                <text class="iconfont">B</text>
              </view>
              <view class="toolbar-item" @click="format('italic')">
                <text class="iconfont italic">I</text>
              </view>
              <view class="toolbar-item" @click="format('underline')">
                <text class="iconfont underline">U</text>
              </view>
              <view class="toolbar-divider"></view>
              <view class="toolbar-item" @click="insertImage">
                <uni-icons type="image" size="16" color="#333333"></uni-icons>
              </view>
              <view class="toolbar-divider"></view>
              <view class="toolbar-item" @click="undo">
                <text class="iconfont">↶</text>
              </view>
              <view class="toolbar-item" @click="redo">
                <text class="iconfont">↷</text>
              </view>
            </view>
            <editor 
              id="editor" 
              class="editor-content"
              :placeholder="'请输入公告内容'"
              @ready="onEditorReady"
              @input="onEditorInput"
              @focus="editorFocus"
              @blur="editorBlur"
              :show-img-size="true"
              :show-img-toolbar="true"
              :show-img-resize="true"
            ></editor>
            <view class="editor-counter">
              <text>{{ contentLength }}/20000</text>
            </view>
          </view>
        </view>
        
        <u--form labelPosition="left" :model="form" ref="uFormHidden" style="display: none;">
          <u-form-item label="" prop="noticeContent"></u-form-item>
        </u--form>
        <view class="form-btn">
          <u-button type="primary" text="保存" @click="submitForm"></u-button>
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
    
    <!-- 公告类型选择器 -->
    <u-picker itemHeight="88" :show="showNoticeTypePicker" :columns="noticeTypeColumns" keyName="dictLabel" 
      @cancel="showNoticeTypePicker = false" @confirm="handleNoticeTypeConfirm"></u-picker>
    
    <!-- 状态选择器 -->
    <u-picker itemHeight="88" :show="showStatusPicker" :columns="statusColumns" keyName="dictLabel" 
      @cancel="showStatusPicker = false" @confirm="handleStatusConfirm"></u-picker>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { getNotice, addNotice, updateNotice } from '@/api/system/notice'
import { getDicts } from "@/api/system/dict/data"
import { onLoad, onReady } from "@dcloudio/uni-app"
import modal from '@/plugins/modal'

const title = ref('新增公告')
const noticeId = ref(undefined)
const noticeTypeList = ref([])
const statusList = ref([])
const editorCtx = ref(null)
const contentLength = ref(0)
const showNoticeTypePicker = ref(false)
const showStatusPicker = ref(false)
const noticeTypeName = ref('')
const statusName = ref('')

// picker 列数据
const noticeTypeColumns = ref([])
const statusColumns = ref([])

const form = reactive({
  noticeId: undefined,
  noticeTitle: '',
  noticeType: '',
  noticeContent: '',
  status: '0'
})

// 表单验证错误字段
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 = {
  noticeTitle: [
    { required: true, message: '公告标题不能为空', trigger: ['blur', 'change'] }
  ],
  noticeType: [
    { required: true, message: '公告类型不能为空', trigger: ['blur', 'change'] }
  ],
  noticeContent: [
    { required: true, message: '公告内容不能为空', trigger: ['blur', 'change'] }
  ]
}

onLoad((options) => {
  if (options.id) {
    noticeId.value = options.id
    title.value = '修改公告'
    getNotice(noticeId.value).then(response => {
      Object.assign(form, response.data)
      // 如果编辑器已经初始化，设置内容
      if (editorCtx.value && form.noticeContent) {
        editorCtx.value.setContents({
          html: form.noticeContent
        })
      }
    })
  }
  
  // 获取字典数据
  getDicts('sys_notice_type').then(res => {
    noticeTypeList.value = res.data
    noticeTypeColumns.value = [res.data]
    updateNoticeTypeName()
  })
  
  getDicts('sys_notice_status').then(res => {
    statusList.value = res.data
    statusColumns.value = [res.data]
    updateStatusName()
  })
})

onReady(() => {
  // 页面准备完成后的一些初始化操作
})

// 更新公告类型显示名称
function updateNoticeTypeName() {
  if (form.noticeType && noticeTypeList.value.length > 0) {
    const item = noticeTypeList.value.find(v => v.dictValue === form.noticeType)
    noticeTypeName.value = item ? item.dictLabel : ''
  }
}

// 更新状态显示名称
function updateStatusName() {
  if (form.status && statusList.value.length > 0) {
    const item = statusList.value.find(v => v.dictValue === form.status)
    statusName.value = item ? item.dictLabel : ''
  }
}

// 公告类型选择确认
function handleNoticeTypeConfirm(e) {
  form.noticeType = e.value[0].dictValue
  noticeTypeName.value = e.value[0].dictLabel
  showNoticeTypePicker.value = false
}

// 状态选择确认
function handleStatusConfirm(e) {
  form.status = e.value[0].dictValue
  statusName.value = e.value[0].dictLabel
  showStatusPicker.value = false
}

// 编辑器初始化完成
function onEditorReady() {
  uni.createSelectorQuery().select('#editor').context((res) => {
    editorCtx.value = res.context
    // 如果是编辑模式，设置初始内容
    if (form.noticeContent) {
      editorCtx.value.setContents({
        html: form.noticeContent
      })
    }
  }).exec()
}

// 编辑器内容变化
function onEditorInput(e) {
  // 获取HTML内容
  editorCtx.value.getContents({
    success: (res) => {
      // 使用 Vue 的响应式更新方式
      form.noticeContent = res.html
      // 计算内容长度（去除HTML标签）
      const text = res.text || ''
      contentLength.value = text.length
    }
  })
}

// 编辑器获得焦点
function editorFocus() {
  // 可以添加焦点样式
}

// 编辑器失去焦点
function editorBlur() {
  // 保存内容
  if (editorCtx.value) {
    editorCtx.value.getContents({
      success: (res) => {
        form.noticeContent = res.html
      }
    })
  }
}

// 格式化文本
function format(name, value) {
  if (!editorCtx.value) return
  
  editorCtx.value.format(name, value)
}

// 撤销
function undo() {
  if (!editorCtx.value) return
  editorCtx.value.undo()
}

// 重做
function redo() {
  if (!editorCtx.value) return
  editorCtx.value.redo()
}

// 插入图片
function insertImage() {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      
      // 显示加载提示
      uni.showLoading({
        title: '上传中...'
      })
      
      // 这里需要根据实际的上传接口进行调整
      // 示例代码，实际使用时需要替换为真实的上传逻辑
      uni.uploadFile({
        url: '/common/upload', // 替换为实际的上传地址
        filePath: tempFilePath,
        name: 'file',
        success: (uploadRes) => {
          uni.hideLoading()
          try {
            const data = JSON.parse(uploadRes.data)
            if (data.code === 200) {
              // 获取图片URL - 需要根据实际返回结构调整
              const imageUrl = data.url || data.data || data.fileName
              
              // 插入图片到编辑器
              if (editorCtx.value) {
                editorCtx.value.insertImage({
                  src: imageUrl,
                  width: '100%',
                  height: 'auto',
                  success: () => {
                    uni.showToast({
                      title: '插入成功',
                      icon: 'success'
                    })
                  },
                  fail: () => {
                    uni.showToast({
                      title: '插入失败',
                      icon: 'none'
                    })
                  }
                })
              }
            } else {
              uni.showToast({
                title: data.msg || '上传失败',
                icon: 'none'
              })
            }
          } catch (e) {
            uni.showToast({
              title: '上传失败',
              icon: 'none'
            })
          }
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          })
        }
      })
    }
  })
}

// 提交表单
async function submitForm() {
  errorFields.value = [] // 清空错误字段
  
  try {
    // 提交前确保获取最新的编辑器内容
    if (editorCtx.value) {
      await new Promise((resolve, reject) => {
        editorCtx.value.getContents({
          success: (res) => {
            form.noticeContent = res.html
            resolve(res.html)
          },
          fail: reject
        })
      })
    }
    
    // 使用 UView 表单验证
    const { proxy } = getCurrentInstance()
    await proxy.$refs['uForm'].validate()
    
    // 验证通过，提交数据
    doSubmit()
  } catch (errors) {
    // 记录验证失败的字段
    if (errors && Array.isArray(errors)) {
      errorFields.value = errors.map(err => err.field || err.prop)
    }
    modal.msgError('请填写完整信息')
  }
}

function doSubmit() {
  const submitForm = { ...form }
  
  if (noticeId.value) {
    updateNotice(submitForm).then(response => {
      modal.msgSuccess('修改成功')
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }).catch(error => {
      modal.msgError('修改失败: ' + (error.message || '未知错误'))
    })
  } else {
    addNotice(submitForm).then(response => {
      modal.msgSuccess('新增成功')
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }).catch(error => {
      modal.msgError('新增失败: ' + (error.message || '未知错误'))
    })
  }
}
</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;
      }
    }
    
    /* 确保表单项正常布局 */
    .u-form-item {
      display: flex;
      align-items: center;
      
      &[labelPosition="top"] {
        display: block;
      }
    }
    
    /* 富文本编辑器独立字段 */
    .editor-field {
      margin-top: 24rpx;
      
      .editor-label {
        color: #333333;
        font-size: 30rpx;
        margin-bottom: 16rpx;
        display: flex;
        align-items: center;
        
        .required-star {
          color: #f56c6c;
          margin-right: 4rpx;
        }
      }
    }
  }
}

.select-input-wrapper {
  position: relative;
  
  .select-arrow {
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #c0c4cc;
    font-size: 28rpx;
    pointer-events: none;
  }
}

.editor-container {
  width: 100%;
  border: 2rpx solid #e8edf3;
  border-radius: 12rpx;
  overflow: hidden;
  background: #ffffff;
  box-sizing: border-box;
  
  .editor-toolbar {
    display: flex;
    align-items: center;
    padding: 12rpx;
    background: #f8f9fa;
    border-bottom: 2rpx solid #e8edf3;
    flex-wrap: wrap;
    gap: 8rpx;
    
    .toolbar-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56rpx;
      height: 56rpx;
      background: #ffffff;
      border-radius: 8rpx;
      border: 2rpx solid #e8edf3;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
        background: #667eea;
        border-color: #667eea;
        
        .iconfont {
          color: #ffffff;
        }
        
        uni-icons {
          color: #ffffff;
        }
      }
      
      .iconfont {
        font-size: 28rpx;
        font-weight: 600;
        color: #333333;
        
        &.italic {
          font-style: italic;
        }
        
        &.underline {
          text-decoration: underline;
        }
      }
    }
    
    .toolbar-divider {
      width: 2rpx;
      height: 40rpx;
      background: #e8edf3;
      margin: 0 4rpx;
    }
  }
  
  .editor-content {
    width: 100%;
    min-height: 500rpx;
    padding: 20rpx;
    font-size: 28rpx;
    line-height: 1.6;
    background: #ffffff;
    box-sizing: border-box;
  }
  
  .editor-counter {
    padding: 12rpx 20rpx;
    background: #f8f9fa;
    border-top: 2rpx solid #e8edf3;
    text-align: right;
    
    text {
      font-size: 24rpx;
      color: #999999;
    }
  }
}
</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>