<template>
  <div class="purchase-habit-container">
    <!-- 顶部返回 -->
    <div class="page-header">
      <el-button link @click="handleBack">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回</span>
      </el-button>
      <span class="page-title">企业采购习惯</span>
    </div>

    <div class="page-content">
      <el-form ref="formRef" :model="form" label-position="top">
        <!-- 采购金额 -->
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="月度采购金额">
              <el-input v-model="form.monthlyAmount" placeholder="请输入">
                <template #suffix>万</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年度采购金额">
              <el-input v-model="form.yearlyAmount" placeholder="请输入">
                <template #suffix>万</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 产品选型 -->
        <el-form-item label="产品选型">
          <div class="tag-group">
            <div v-for="item in productTypeOptions" :key="item"
              :class="['tag-item', { active: form.productTypes.includes(item) }]"
              @click="toggleTag(form.productTypes, item)">{{ item }}</div>
          </div>
        </el-form-item>

        <!-- 日常打印量 -->
        <el-form-item label="日常打印量">
          <div class="tag-group">
            <div v-for="item in printVolumeOptions" :key="item"
              :class="['tag-item', { active: form.printVolume === item }]"
              @click="form.printVolume = item">{{ item }}</div>
          </div>
        </el-form-item>

        <!-- 购买原装耗材 & 专人进行技术服务 -->
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="购买原装耗材">
              <el-radio-group v-model="form.buyOriginal">
                <el-radio value="是">是</el-radio>
                <el-radio value="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专人进行技术服务">
              <el-radio-group v-model="form.techService">
                <el-radio value="是">是</el-radio>
                <el-radio value="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 主要办公采购类目 -->
        <el-form-item label="主要办公采购类目">
          <div class="tag-group">
            <div v-for="item in categoryOptions" :key="item"
              :class="['tag-item', { active: form.categories.includes(item) }]"
              @click="toggleTag(form.categories, item)">{{ item }}</div>
          </div>
          <el-input v-model="form.otherCategory" placeholder="其他采购类目" maxlength="50" show-word-limit class="other-input" />
        </el-form-item>

        <!-- 企业福利 -->
        <el-form-item label="企业福利">
          <div class="tag-group">
            <div v-for="item in welfareOptions" :key="item"
              :class="['tag-item', { active: form.welfares.includes(item) }]"
              @click="toggleTag(form.welfares, item)">{{ item }}</div>
          </div>
          <el-input v-model="form.otherWelfare" placeholder="其他福利" maxlength="50" show-word-limit class="other-input" />
        </el-form-item>

        <!-- 产品定制需求 -->
        <el-form-item label="产品定制需求">
          <div class="tag-group">
            <div v-for="item in customOptions" :key="item"
              :class="['tag-item', { active: form.customs.includes(item) }]"
              @click="toggleTag(form.customs, item)">{{ item }}</div>
          </div>
          <el-input v-model="form.otherCustom" placeholder="其他需求" maxlength="50" show-word-limit class="other-input" />
        </el-form-item>
      </el-form>

      <!-- 底部按钮 -->
      <div class="form-footer">
        <el-button type="danger" @click="handleSave">保存</el-button>
        <el-button @click="handleBack">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

const productTypeOptions = ['经济适用', '性价比高', '大牌商品']
const printVolumeOptions = ['100-500张', '500-1000张', '1000-3000张', '3000张以上']
const categoryOptions = ['办公耗材', '办公设备', '数码设备', '办公日用', '办公家具', '清洁用品', '劳保用品', '食品饮料']
const welfareOptions = ['新年福利', '中秋福利', '端午福利', '生日福利', '员工体检', '团建活动', '节日礼品', '年终奖品']
const customOptions = ['服装定制', '礼品定制', '包装定制', '印刷定制', 'LOGO定制', '文创定制', '工艺品定制', '其他定制']

const form = reactive({
  monthlyAmount: '', yearlyAmount: '', productTypes: ['经济适用'] as string[], printVolume: '100-500张',
  buyOriginal: '是', techService: '是', categories: ['办公耗材'] as string[], otherCategory: '',
  welfares: ['新年福利'] as string[], otherWelfare: '', customs: ['服装定制'] as string[], otherCustom: ''
})

const toggleTag = (arr: string[], item: string) => { const index = arr.indexOf(item); if (index > -1) arr.splice(index, 1); else arr.push(item) }
const handleBack = () => { router.push('/enterprise/companyInfo') }
const handleSave = () => { ElMessage.success('保存成功'); handleBack() }
</script>

<style scoped lang="scss">
.purchase-habit-container { background: #f5f5f5; min-height: 100%; }
.page-header { background: #fff; padding: 15px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #eee; .page-title { font-size: 16px; font-weight: bold; color: #333; } }
.page-content { padding: 20px; background: #fff; margin: 20px; border-radius: 8px; }
.tag-group { display: flex; flex-wrap: wrap; gap: 10px; .tag-item { padding: 8px 20px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 14px; color: #666; transition: all 0.2s; &:hover { border-color: #e60012; color: #e60012; } &.active { border-color: #e60012; color: #e60012; background: #fff5f5; } } }
.other-input { margin-top: 10px; }
.form-footer { text-align: center; padding-top: 30px; border-top: 1px solid #eee; margin-top: 20px; }
:deep(.el-form-item__label) { font-weight: 500; color: #333; }
:deep(.el-radio) { margin-right: 30px; }
</style>
