<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" label-width="140rpx"
          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
          <u-form-item label="名称" prop="name" required>
            <u--input v-model="form.name" placeholder="请输入名称"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>
          <u-form-item label="编码" prop="code" required>
            <u--input v-model="form.code" placeholder="请输入编码"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>
          <u-form-item label="备注" prop="remark" labelPosition="top">
            <u--textarea v-model="form.remark" placeholder="请输入备注" inputAlign="left"
              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>
  </view>
</template>

<script setup>
import { getHealthTags, addHealthTags, updateHealthTags } from '@/api/health/healthTags'
import { onLoad } from "@dcloudio/uni-app"
import { reactive, toRefs, ref, getCurrentInstance } from "vue"

const { proxy } = getCurrentInstance()
const title = ref('健康标签-新增')

const inputBaseStyle = {
  background: '#ffffff', border: '2rpx solid #dcdfe6', borderRadius: '8rpx',
  padding: '0 24rpx', height: '68rpx', width: '100%', boxSizing: 'border-box'
}

const data = reactive({
  form: {
    id: null,
    name: null,
    code: null,
    remark: null
  },
  rules: {
    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    code: [{ required: true, message: '编码不能为空', trigger: 'blur' }]
  }
})
const { form, rules } = toRefs(data)

onLoad((option) => {
  if (option.id) {
    form.value.id = option.id
    title.value = '健康标签-修改'
    getHealthTags(option.id).then(res => {
      form.value = res.data
    })
  }
})

function submit() {
  proxy.$refs['uForm'].validate().then(() => {
    const submitData = { ...form.value }
    delete submitData.createTime
    delete submitData.updateTime

    if (submitData.id) {
      updateHealthTags(submitData).then(() => {
        uni.showToast({ title: '修改成功', icon: 'success' })
        setTimeout(() => uni.navigateBack(), 1500)
      })
    } else {
      addHealthTags(submitData).then(() => {
        uni.showToast({ title: '新增成功', icon: 'success' })
        setTimeout(() => uni.navigateBack(), 1500)
      })
    }
  }).catch(() => {
    uni.showToast({ title: '请填写完整信息', icon: 'none' })
  })
}
</script>

<style lang="scss" scoped>
.section {
  margin: 24rpx; 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: #fff; font-size: 28rpx; font-weight: 600;
    display: flex; align-items: center;
    &::before { content: ''; width: 6rpx; height: 28rpx; background: #fff; border-radius: 3rpx; margin-right: 12rpx; }
  }
  .form-view {
    padding: 24rpx;
    .form-btn { padding-top: 16rpx; }
  }
}
</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; }
</style>
