<template>
  <div class="demo-container">
    <h2>XFormItem Demo</h2>

    <!-- 查询模式演示 -->
    <div class="demo-section">
      <h3>查询模式</h3>
      <x-form-item
        :attr="queryAttr"
        :form="queryForm"
        mode="查询"
        :showLabel="true"
      />
      <div class="value-display">
        当前值: {{ queryForm.rate || '未选择' }}
      </div>
    </div>

    <!-- 新增模式演示 -->
    <div class="demo-section">
      <h3>新增模式</h3>
      <x-form-item
        :attr="addAttr"
        :form="addForm"
        mode="新增/修改"
        :showLabel="true"
      />
      <div class="value-display">
        当前值: {{ addForm.rate || '未评分' }}
      </div>
    </div>
  </div>
</template>

<script>
import XFormItem from './XFormItem.vue'

export default {
  name: 'XFormItemDemo',
  components: {
    XFormItem
  },
  data () {
    return {
      // 查询表单配置
      queryAttr: {
        type: 'rate',
        name: '评分查询',
        queryType: 'IN',
        model: 'rate',
        placeholder: '请选择评分',
        allowHalf: true,
        maxCount: 4,
        displayCount: 4
      },
      queryForm: {
      },

      // 新增表单配置
      addAttr: {
        type: 'rate',
        name: '评分',
        model: 'rate',
        allowHalf: true,
        maxCount: 8,
        displayCount: 4
      },
      addForm: {
        rate: 3
      }
    }
  }
}
</script>

<style lang="less" scoped>
.demo-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  background-color: #f5f5f5;

  h2 {
    margin-bottom: 20px;
    color: #1890ff;
  }

  .demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;

    h3 {
      margin-bottom: 16px;
      color: #333;
    }

    .value-display {
      margin-top: 16px;
      padding: 8px;
      background-color: #f5f5f5;
      border-radius: 4px;
    }
  }
}
</style>
