<template>
  <div class="form-demo">
    <h2>可配置表单组件示例</h2>
    
    <!-- 基础表单示例 -->
    <el-card class="demo-card" header="基础表单">
      <config-form
        v-model="basicForm"
        :config="basicConfig"
        :items="basicItems"
        :rules="basicRules"
        @submit="handleBasicSubmit"
        @reset="handleBasicReset"
      />
    </el-card>

    <!-- 复杂表单示例 -->
    <el-card class="demo-card" header="复杂表单">
      <config-form
        v-model="complexForm"
        :config="complexConfig"
        :items="complexItems"
        :rules="complexRules"
        @submit="handleComplexSubmit"
        @reset="handleComplexReset"
        @change="handleComplexChange"
      />
    </el-card>

    <!-- 树形选择器示例 -->
    <el-card class="demo-card" header="树形选择器">
      <config-form
        v-model="treeForm"
        :config="treeConfig"
        :items="treeItems"
        @submit="handleTreeSubmit"
        @node-click="handleNodeClick"
        @check="handleTreeCheck"
      />
    </el-card>

    <!-- 自定义表单示例 -->
    <el-card class="demo-card" header="自定义表单">
      <config-form
        v-model="customForm"
        :config="customConfig"
        :items="customItems"
        @submit="handleCustomSubmit"
      >
        <template #customSlot="{ item, value, onChange }">
          <el-input
            :model-value="value"
            placeholder="这是一个自定义插槽"
            @input="onChange"
          >
            <template #append>
              <el-button @click="handleCustomAction(item)">自定义操作</el-button>
            </template>
          </el-input>
        </template>
      </config-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import ConfigForm from '../ConfigForm.vue'

// 基础表单数据
const basicForm = ref({
  name: '',
  age: null,
  gender: '',
  email: '',
  description: ''
})

// 基础表单配置
const basicConfig = {
  labelWidth: '100px',
  showButtons: true,
  submitText: '保存',
  resetText: '清空'
}

// 基础表单项配置
const basicItems = [
  {
    type: 'input',
    prop: 'name',
    label: '姓名',
    placeholder: '请输入姓名',
    clearable: true,
    rules: [
      { required: true, message: '请输入姓名', trigger: 'blur' },
      { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    ]
  },
  {
    type: 'number',
    prop: 'age',
    label: '年龄',
    min: 1,
    max: 120,
    rules: [
      { required: true, message: '请输入年龄', trigger: 'blur' },
      { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
    ]
  },
  {
    type: 'radio',
    prop: 'gender',
    label: '性别',
    required: true,
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  },
  {
    type: 'input',
    prop: 'email',
    label: '邮箱',
    placeholder: '请输入邮箱地址',
    rules: [
      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
    ]
  },
  {
    type: 'textarea',
    prop: 'description',
    label: '个人简介',
    placeholder: '请输入个人简介',
    rows: 3,
    maxlength: 200,
    showWordLimit: true
  }
]

// 基础表单验证规则
const basicRules = {}

// 复杂表单数据
const complexForm = ref({
  userInfo: {
    name: '',
    department: ''
  },
  skills: [],
  level: 3,
  isActive: true,
  birthDate: '',
  workTime: '',
  avatar: '',
  color: '#409EFF',
  range: [20, 80]
})

// 复杂表单配置
const complexConfig = {
  labelWidth: '120px',
  gutter: 20,
  showButtons: true,
  submitText: '提交',
  resetText: '重置',
  customButtons: [
    {
      key: 'preview',
      text: '预览',
      type: 'info',
      handler: handlePreview
    }
  ]
}

// 复杂表单项配置
const complexItems = [
  {
    type: 'input',
    prop: 'userInfo.name',
    label: '姓名',
    placeholder: '请输入姓名',
    span: 12,
    prefix: 'User'
  },
  {
    type: 'select',
    prop: 'userInfo.department',
    label: '部门',
    placeholder: '请选择部门',
    span: 12,
    clearable: true,
    options: [
      { label: '技术部', value: 'tech' },
      { label: '产品部', value: 'product' },
      { label: '设计部', value: 'design' },
      { label: '运营部', value: 'operation' }
    ]
  },
  {
    type: 'checkbox',
    prop: 'skills',
    label: '技能',
    span: 12,
    options: [
      { label: 'JavaScript', value: 'js' },
      { label: 'Vue.js', value: 'vue' },
      { label: 'React', value: 'react' },
      { label: 'Node.js', value: 'node' },
      { label: 'Python', value: 'python' }
    ]
  },
  {
    type: 'rate',
    prop: 'level',
    label: '熟练度',
    span: 12,
    showText: true,
    texts: ['新手', '初级', '中级', '高级', '专家']
  },
  {
    type: 'switch',
    prop: 'isActive',
    label: '状态',
    span: 8,
    activeText: '激活',
    inactiveText: '禁用'
  },
  {
    type: 'date',
    prop: 'birthDate',
    label: '出生日期',
    span: 8,
    valueFormat: 'YYYY-MM-DD'
  },
  {
    type: 'time',
    prop: 'workTime',
    label: '工作时间',
    span: 8,
    valueFormat: 'HH:mm:ss'
  },
  {
    type: 'upload',
    prop: 'avatar',
    label: '头像',
    span: 12,
    action: '/api/upload',
    accept: 'image/*',
    tip: '只能上传jpg/png文件，且不超过500kb'
  },
  {
    type: 'color',
    prop: 'color',
    label: '主题色',
    span: 12,
    showAlpha: true
  },
  {
    type: 'slider',
    prop: 'range',
    label: '范围',
    span: 24,
    range: true,
    min: 0,
    max: 100,
    showStops: true
  }
]

// 复杂表单验证规则
const complexRules = {
  'userInfo.name': [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  'userInfo.department': [
    { required: true, message: '请选择部门', trigger: 'change' }
  ],
  skills: [
    { type: 'array', required: true, message: '请至少选择一项技能', trigger: 'change' }
  ]
}

// 树形选择器数据
const treeForm = ref({
  department: '',
  departments: [],
  category: ''
})

// 部门树形数据
const departmentData = [
  {
    value: '1',
    label: '总公司',
    children: [
      {
        value: '1-1',
        label: '技术中心',
        children: [
          { value: '1-1-1', label: '前端开发部' },
          { value: '1-1-2', label: '后端开发部' },
          { value: '1-1-3', label: '测试部' }
        ]
      },
      {
        value: '1-2',
        label: '产品中心',
        children: [
          { value: '1-2-1', label: '产品设计部' },
          { value: '1-2-2', label: '用户研究部' }
        ]
      },
      {
        value: '1-3',
        label: '运营中心',
        children: [
          { value: '1-3-1', label: '市场推广部' },
          { value: '1-3-2', label: '客户服务部' }
        ]
      }
    ]
  },
  {
    value: '2',
    label: '分公司A',
    children: [
      { value: '2-1', label: '技术部' },
      { value: '2-2', label: '销售部' }
    ]
  }
]

// 分类数据
const categoryData = [
  {
    value: 'electronics',
    label: '电子产品',
    children: [
      {
        value: 'phones',
        label: '手机',
        children: [
          { value: 'iphone', label: 'iPhone' },
          { value: 'android', label: 'Android手机' },
          { value: 'huawei', label: '华为手机' }
        ]
      },
      {
        value: 'computers',
        label: '电脑',
        children: [
          { value: 'laptop', label: '笔记本电脑' },
          { value: 'desktop', label: '台式电脑' },
          { value: 'tablet', label: '平板电脑' }
        ]
      }
    ]
  },
  {
    value: 'clothing',
    label: '服装',
    children: [
      { value: 'mens', label: '男装' },
      { value: 'womens', label: '女装' },
      { value: 'kids', label: '童装' }
    ]
  }
]

// 自定义表单数据
const customForm = ref({
  customField: '',
  status: 'pending'
})

// 树形选择器配置
const treeConfig = {
  labelWidth: '120px',
  showButtons: true,
  submitText: '保存',
  resetText: '重置'
}

// 树形选择器表单项配置
const treeItems = [
  {
    type: 'tree',
    prop: 'department',
    label: '所属部门',
    placeholder: '请选择部门',
    data: departmentData,
    clearable: true,
    filterable: true,
    checkStrictly: true,
    renderAfterExpand: false,
    span: 12
  },
  {
    type: 'tree',
    prop: 'departments',
    label: '多选部门',
    placeholder: '请选择多个部门',
    data: departmentData,
    clearable: true,
    filterable: true,
    showCheckbox: true,
    multiple: true,
    collapseTags: true,
    maxCollapseTags: 3,
    span: 12
  },
  {
    type: 'tree',
    prop: 'category',
    label: '商品分类',
    placeholder: '请选择分类',
    data: categoryData,
    clearable: true,
    filterable: true,
    checkStrictly: true,
    defaultExpandAll: true,
    span: 24
  }
]

// 自定义表单配置
const customConfig = {
  labelWidth: '100px',
  inline: true
}

// 自定义表单项配置
const customItems = [
  {
    type: 'slot',
    prop: 'customField',
    label: '自定义字段',
    slotName: 'customSlot'
  },
  {
    type: 'select',
    prop: 'status',
    label: '状态',
    options: [
      { label: '待处理', value: 'pending' },
      { label: '处理中', value: 'processing' },
      { label: '已完成', value: 'completed' }
    ]
  }
]

// 事件处理函数
const handleBasicSubmit = (formData) => {
  console.log('基础表单提交:', formData)
  ElMessage.success('基础表单提交成功')
}

const handleBasicReset = () => {
  ElMessage.info('基础表单已重置')
}

const handleComplexSubmit = (formData) => {
  console.log('复杂表单提交:', formData)
  ElMessage.success('复杂表单提交成功')
}

const handleComplexReset = () => {
  ElMessage.info('复杂表单已重置')
}

const handleComplexChange = (formData) => {
  console.log('复杂表单数据变化:', formData)
}

const handleCustomSubmit = (formData) => {
  console.log('自定义表单提交:', formData)
  ElMessage.success('自定义表单提交成功')
}

const handleCustomAction = (item) => {
  console.log('自定义操作:', item)
  ElMessage.info('执行自定义操作')
}

const handleTreeSubmit = (formData) => {
  console.log('树形表单提交:', formData)
  ElMessage.success('树形表单提交成功')
}

const handleNodeClick = (prop, data) => {
  console.log('节点点击:', prop, data)
  ElMessage.info(`点击了节点: ${data.label}`)
}

const handleTreeCheck = (prop, data) => {
  console.log('节点选择:', prop, data)
  ElMessage.info(`选择了节点: ${data.checkedNodes?.map(n => n.label).join(', ')}`)
}

const handlePreview = () => {
  console.log('预览数据:', complexForm.value)
  ElMessage.info('预览功能')
}
</script>

<style lang="less" scoped>
.form-demo {
  padding: 20px;
  
  h2 {
    margin-bottom: 20px;
    color: #333;
  }
  
  .demo-card {
    margin-bottom: 20px;
    
    :deep(.el-card__header) {
      background-color: #f5f7fa;
      font-weight: 600;
    }
  }
}
</style>