<template>
  <div class="storage-settings">
    <section class="settings-toolbar">
      <div>
        <h2>库存水位设置</h2>
        <p>按产品类型维护默认库存水位参数，SKU 的单独覆盖在单品分析页设置。</p>
      </div>
      <el-button size="small" icon="el-icon-refresh" :loading="loading" @click="load">
        刷新
      </el-button>
    </section>

    <el-row :gutter="16" class="formula-row">
      <el-col :span="8">
        <el-card class="formula-card">
          <div class="formula-title">W_MAX 最高水位</div>
          <div class="formula-text">MAX(日均销量 x 最长补货周期 x W_MAX系数, 月销售目标 x 月销目标比例)</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="formula-card">
          <div class="formula-title">ROP 补货点</div>
          <div class="formula-text">安全库存 SS + 日均销量 x 补货提前期 Lead Time</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="formula-card">
          <div class="formula-title">W_MIN 有效库存</div>
          <div class="formula-text">当前库存 + 在途库存 x (1 - 供应商历史不合格率)</div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="type-settings-card">
      <template slot="header">
        <div class="card-header">
          <span>产品类型默认水位线</span>
          <span class="header-note">修改人由系统按当前登录账号自动记录</span>
        </div>
      </template>

      <el-table :data="typeSettings" border size="small" v-loading="loading">
        <el-table-column label="产品类型" width="120" fixed>
          <template slot-scope="scope">
            <el-tag size="mini">{{ typeLabel(scope.row.productType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="默认安全库存天数" width="160">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.safetyDaysDefault" :min="0" :step="1" size="mini" controls-position="right" />
          </template>
        </el-table-column>
        <el-table-column label="默认补货提前期" width="160">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.leadTimeDefault" :min="0" :step="1" size="mini" controls-position="right" />
          </template>
        </el-table-column>
        <el-table-column label="最长补货周期" width="150">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.maxReplenishCycle" :min="0" :step="1" size="mini" controls-position="right" />
          </template>
        </el-table-column>
        <el-table-column label="W_MAX系数" width="130">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.wmaxCycleFactor" :min="0" :step="0.1" size="mini" controls-position="right" />
          </template>
        </el-table-column>
        <el-table-column label="月销目标比例" width="140">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.monthlyTargetRatio" :min="0" :step="0.05" size="mini" controls-position="right" />
          </template>
        </el-table-column>
        <el-table-column label="目标覆盖天数" width="140">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.targetCoverageDays" :min="0" :step="1" size="mini" controls-position="right" />
          </template>
        </el-table-column>
        <el-table-column label="目标周转率" width="130">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.targetTurnoverRate" :min="0" :step="0.1" size="mini" controls-position="right" />
          </template>
        </el-table-column>
        <el-table-column label="修改人" width="120">
          <template slot-scope="scope">{{ scope.row.updatedBy || '-' }}</template>
        </el-table-column>
        <el-table-column label="修改时间" width="170">
          <template slot-scope="scope">{{ scope.row.updatedTime || '-' }}</template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" :loading="savingKey === scope.row.productType" @click="saveTypeSetting(scope.row)">
              保存
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'

export default {
  name: 'StorageSettings',
  data() {
    return {
      loading: false,
      savingKey: '',
      typeSettings: []
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    typeLabel(type) {
      const map = {
        hot: '爆品',
        normal: '常规品',
        new: '新品',
        slow: '长尾/滞销'
      }
      return map[type] || '常规品'
    },
    normalizeResponse(res) {
      if (!res) return null
      if (res.code === 200) return res.data
      if (res.data) return res.data
      return null
    },
    async load() {
      this.loading = true
      try {
        const res = await request({ url: '/api/inventory/waterline-settings', method: 'get' })
        const data = this.normalizeResponse(res) || {}
        this.typeSettings = Array.isArray(data.typeSettings) ? data.typeSettings : []
      } catch (e) {
        console.error('加载库存水位设置失败:', e)
        Message.error('加载设置失败')
      } finally {
        this.loading = false
      }
    },
    async saveTypeSetting(row) {
      if (!row) return
      this.savingKey = row.productType
      try {
        await request({
          url: '/api/inventory/waterline-settings/type',
          method: 'post',
          data: row
        })
        Message.success('产品类型水位设置已保存')
        await this.load()
      } catch (e) {
        console.error('保存产品类型水位设置失败:', e)
        Message.error('保存失败')
      } finally {
        this.savingKey = ''
      }
    }
  }
}
</script>

<style scoped>
.storage-settings {
  width: 100%;
  padding: 4px 0 20px;
}

.settings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.settings-toolbar h2 {
  margin: 0 0 4px;
  color: #1f2d3d;
  font-size: 20px;
  font-weight: 600;
}

.settings-toolbar p {
  margin: 0;
  color: #909399;
  font-size: 13px;
}

.formula-row {
  margin-bottom: 12px;
}

.formula-card {
  min-height: 112px;
  border-radius: 8px;
}

.formula-title {
  margin-bottom: 10px;
  color: #303133;
  font-weight: 600;
}

.formula-text {
  color: #606266;
  line-height: 1.6;
  font-size: 13px;
}

.type-settings-card {
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
}

.header-note {
  color: #909399;
  font-size: 12px;
  font-weight: 400;
}

.type-settings-card /deep/ .el-input-number {
  width: 100%;
}

.type-settings-card /deep/ .el-input-number--mini .el-input__inner {
  padding-left: 6px;
  padding-right: 30px;
}

@media (max-width: 900px) {
  .settings-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}
</style>
