<template>
  <div class="app-container">
    <div class="i18n-demo">
      <el-card>
        <div slot="header" class="clearfix">
          <span>{{ $t('system.title') }} - 多语言示例</span>
          <div style="float: right">
            <lang-select></lang-select>
          </div>
        </div>

        <!-- 基础用法示例 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <h3>{{ $t('button.search') }}功能演示</h3>
            <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-form">
              <el-form-item :label="$t('form.username')" prop="username">
                <el-input 
                  v-model="form.username" 
                  :placeholder="$t('form.username')"
                ></el-input>
              </el-form-item>
              
              <el-form-item :label="$t('form.email')" prop="email">
                <el-input 
                  v-model="form.email" 
                  :placeholder="$t('form.email')"
                ></el-input>
              </el-form-item>
              
              <el-form-item :label="$t('form.status')" prop="status">
                <el-select v-model="form.status" :placeholder="$t('message.selectRequired')">
                  <el-option 
                    :label="$t('status.enabled')" 
                    value="enabled"
                  ></el-option>
                  <el-option 
                    :label="$t('status.disabled')" 
                    value="disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="submitForm">{{ $t('button.submit') }}</el-button>
                <el-button @click="resetForm">{{ $t('button.reset') }}</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          
          <el-col :span="12">
            <h3>{{ $t('message.info') }}提示示例</h3>
            <div class="button-group">
              <el-button @click="showSuccess">{{ $t('message.success') }}</el-button>
              <el-button @click="showWarning">{{ $t('message.warning') }}</el-button>
              <el-button @click="showError">{{ $t('message.error') }}</el-button>
              <el-button @click="showInfo">{{ $t('message.info') }}</el-button>
            </div>
            
            <h3>{{ $t('pagination.total') }}示例</h3>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-col>
        </el-row>

        <!-- 使用示例代码 -->
        <el-divider content-position="left">使用示例代码</el-divider>
        <div class="code-example">
          <h4>1. 基础使用</h4>
          <pre><code>{{ basicUsage }}</code></pre>
          
          <h4>2. 带参数的翻译</h4>
          <pre><code>{{ paramUsage }}</code></pre>
          
          <h4>3. 在 JavaScript 中使用</h4>
          <pre><code>{{ jsUsage }}</code></pre>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'I18nDemo',
  data() {
    return {
      form: {
        username: '',
        email: '',
        status: ''
      },
      rules: {
        username: [
          { required: true, message: this.$t('message.inputRequired'), trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$t('message.inputRequired'), trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        status: [
          { required: true, message: this.$t('message.selectRequired'), trigger: 'change' }
        ]
      },
      currentPage: 1,
      pageSize: 10,
      total: 400,
      basicUsage: `<!-- 模板中使用 -->
<span>{{ $t('system.title') }}</span>
<el-button>{{ $t('button.save') }}</el-button>

<!-- 属性中使用 -->
<el-input :placeholder="$t('form.username')"></el-input>`,
      paramUsage: `<!-- 带参数的翻译 -->
<span>{{ $t('pagination.total', { total: 100 }) }}</span>
<span>{{ $t('pagination.page', { page: 2 }) }}</span>

// 语言包中定义
{
  pagination: {
    total: '共 {total} 条',  // 中文
    total: 'Total {total} items'  // 英文
  }
}`,
      jsUsage: `// 在 methods 中使用
methods: {
  showMessage() {
    this.$message.success(this.$t('message.success'))
  },
  
  // 表单验证中使用
  rules: {
    username: [
      { required: true, message: this.$t('message.inputRequired'), trigger: 'blur' }
    ]
  }
}`
    }
  },
  methods: {
    /**
     * 提交表单
     */
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success(this.$t('message.saveSuccess'))
        }
      })
    },

    /**
     * 重置表单
     */
    resetForm() {
      this.$refs.form.resetFields()
      this.$message.info(this.$t('button.reset') + this.$t('message.success'))
    },

    /**
     * 显示成功消息
     */
    showSuccess() {
      this.$message.success(this.$t('message.success'))
    },

    /**
     * 显示警告消息
     */
    showWarning() {
      this.$message.warning(this.$t('message.warning'))
    },

    /**
     * 显示错误消息
     */
    showError() {
      this.$message.error(this.$t('message.error'))
    },

    /**
     * 显示信息消息
     */
    showInfo() {
      this.$message.info(this.$t('message.info'))
    },

    /**
     * 处理页面大小变化
     * @param {number} val - 新的页面大小
     */
    handleSizeChange(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`)
    },

    /**
     * 处理当前页变化
     * @param {number} val - 新的当前页
     */
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.i18n-demo {
  .demo-form {
    margin-top: 20px;
  }

  .button-group {
    margin-bottom: 20px;
    
    .el-button {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }

  .code-example {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 4px;
    
    h4 {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #409eff;
      
      &:first-child {
        margin-top: 0;
      }
    }
    
    pre {
      background-color: #263238;
      color: #eeffff;
      padding: 15px;
      border-radius: 4px;
      overflow-x: auto;
      
      code {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 13px;
        line-height: 1.5;
      }
    }
  }
}
</style> 