<template>
  <div class="product-analysis">
    <section class="analysis-toolbar">
      <div class="toolbar-title">
        <h2>单品库存水位分析</h2>
        <p>查看 SKU 的库存、周转、补货点和最高/最低水位线。</p>
      </div>
      <div class="toolbar-actions">
        <el-input
          v-model="skuInput"
          placeholder="输入产品 SKU"
          size="medium"
          clearable
          @keyup.enter.native="searchProduct"
        >
          <template slot="prefix">
            <i class="el-icon-search"></i>
          </template>
        </el-input>
        <el-button type="primary" size="medium" icon="el-icon-search" :loading="loading" @click="searchProduct">
          查询
        </el-button>
        <el-button size="medium" icon="el-icon-edit-outline" :disabled="!productData" @click="settingsVisible = !settingsVisible">
          SKU覆盖设置
        </el-button>
      </div>
    </section>

    <el-card v-show="settingsVisible && productData" class="sku-waterline-card">
      <template slot="header">
        <div class="card-header">
          <div>
            <span>当前 SKU 水位覆盖设置</span>
            <el-tag size="mini" class="sku-tag">SKU: {{ currentSku }}</el-tag>
          </div>
          <el-button type="primary" size="mini" @click="saveSkuSetting(skuDraft)">保存当前SKU覆盖</el-button>
        </div>
      </template>
      <el-table :data="[skuDraft]" border size="mini" v-loading="waterlineLoading">
        <el-table-column label="SKU" min-width="150">
          <template slot-scope="scope">
            <span class="readonly-cell">{{ scope.row.sku || currentSku }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.productType" size="mini">
              <el-option label="爆品" value="hot" />
              <el-option label="常规品" value="normal" />
              <el-option label="新品" value="new" />
              <el-option label="长尾/滞销" value="slow" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="手动安全库存" width="140">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.safetyStockOverride" :min="0" :step="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.safetyDaysOverride" :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.leadTimeOverride" :min="0" :step="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.maxReplenishCycleOverride" :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.monthlyTargetOverride" :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.supplierDefectRateOverride" :min="0" :max="100" :step="0.1" size="mini" controls-position="right" />
          </template>
        </el-table-column>
        <el-table-column label="修改人" width="110">
          <template slot-scope="scope">{{ scope.row.updatedBy || currentUserName || '-' }}</template>
        </el-table-column>
        <el-table-column label="修改时间" width="160">
          <template slot-scope="scope">{{ scope.row.updatedTime || '-' }}</template>
        </el-table-column>
        <el-table-column label="操作" width="90" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="saveSkuSetting(scope.row)">保存</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="waterline-note">SKU 来自当前查询结果；手动安全库存为空时，系统按安全库存天数自动计算；修改人由后端按当前登录账号自动记录。</div>
    </el-card>

    <div v-if="productData">
      <el-row :gutter="20" class="metrics-row">
        <el-col :span="6">
          <el-card class="metric-card">
            <div class="metric-item">
              <div class="metric-label">入库总量</div>
              <div class="metric-value">{{ formatInteger(productData.purchaseQty) }}</div>
              <div class="metric-unit">件</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="metric-card">
            <div class="metric-item">
              <div class="metric-label">销售总量</div>
              <div class="metric-value">{{ formatInteger(productData.salesQty) }}</div>
              <div class="metric-unit">件</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="metric-card">
            <div class="metric-item">
              <div class="metric-label">期末库存</div>
              <div class="metric-value">{{ formatInteger(endingInventory) }}</div>
              <div class="metric-unit">件</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="metric-card">
            <div class="metric-item">
              <div class="metric-label">商品周转率</div>
              <div class="metric-value">{{ formatTurnover(productData.turnoverRate) }}</div>
              <div class="metric-unit">次</div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="metrics-row">
        <el-col :span="6">
          <el-card class="metric-card">
            <div class="metric-item">
              <div class="metric-label">积压货品数据</div>
              <div class="metric-value">{{ formatInteger(overstockData.quantity) }}</div>
              <div class="metric-unit">{{ overstockData.level }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="metric-card">
            <div class="metric-item">
              <div class="metric-label">期末库存增长率</div>
              <div class="metric-value" :class="{ 'metric-positive': endingInventoryGrowthRate >= 0, 'metric-negative': endingInventoryGrowthRate < 0 }">
                {{ formatPercent(endingInventoryGrowthRate) }}
              </div>
              <div class="metric-unit">较期初库存</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="metric-card">
            <div class="metric-item">
              <div class="metric-label">库存覆盖天数</div>
              <div class="metric-value">{{ coverageDaysText }}</div>
              <div class="metric-unit">按日均销售估算</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="metric-card">
            <div class="metric-item">
              <div class="metric-label">库存健康状态</div>
              <div class="metric-value metric-status">{{ inventoryHealthStatus }}</div>
              <div class="metric-unit">基于周转与积压</div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="waterline-result-row">
        <el-col :span="24">
          <el-card>
            <template slot="header">
              <div class="card-header">
                <span>当前 SKU 水位计算结果</span>
                <el-tag size="mini">{{ typeLabel(productData.productType) }}</el-tag>
              </div>
            </template>
            <el-table :data="waterlineResultRows" border size="small">
              <el-table-column prop="name" label="项目" width="180" />
              <el-table-column prop="formula" label="口径" min-width="360" />
              <el-table-column prop="value" label="结果" width="160" align="right" />
            </el-table>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="turnover-row" v-if="turnoverBreakdown.length">
        <el-col :span="24">
          <el-card>
            <template slot="header">
              <div class="card-header">
                <span>分段周转率</span>
              </div>
            </template>
            <el-table :data="turnoverBreakdown" border size="small">
              <el-table-column label="统计区间" width="220">
                <template slot-scope="scope">
                  <div class="turnover-period-label">近{{ scope.row.windowDays }}天</div>
                  <div class="turnover-period-range">{{ scope.row.start }} ~ {{ scope.row.end }}</div>
                </template>
              </el-table-column>
              <el-table-column label="销售出库(件)" width="160">
                <template slot-scope="scope">
                  {{ formatInteger(scope.row.salesSum) }}
                </template>
              </el-table-column>
              <el-table-column label="时间加权平均库存(件)" width="220">
                <template slot-scope="scope">
                  {{ formatInventory(scope.row.avgInventory) }}
                </template>
              </el-table-column>
              <el-table-column label="周转率(次)">
                <template slot-scope="scope">
                  {{ formatTurnover(scope.row.turnover) }}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="charts-row">
        <el-col :span="24">
          <el-card>
            <template slot="header">
              <div class="card-header">
                <div>
                  <span>单品库存变化趋势</span>
                  <el-tag v-if="productData.sku || skuInput" size="mini" class="sku-tag">SKU: {{ productData.sku || skuInput }}</el-tag>
                </div>
                <el-tag size="mini" :type="statusTagType">{{ inventoryHealthStatus }}</el-tag>
              </div>
            </template>
            <div ref="trendChart" class="trend-chart" />
          </el-card>
        </el-col>
      </el-row>

    </div>

    <el-empty v-else description="请输入产品SKU进行查询分析" :image-size="200" />
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
import * as echarts from 'echarts'
require('echarts/theme/macarons')

export default {
  name: 'StorageEfficiency',
  data() {
    return {
      skuInput: '',
      productData: null,
      loading: false,
      trendChartInstance: null,
      waterlineLoading: false,
      skuSettings: [],
      skuDraft: {
        sku: '',
        productType: 'normal',
        safetyStockOverride: undefined,
        safetyDaysOverride: undefined,
        leadTimeOverride: undefined,
        maxReplenishCycleOverride: undefined,
        monthlyTargetOverride: undefined,
        supplierDefectRateOverride: undefined,
        updatedBy: ''
      },
      settingsVisible: false
    }
  },
  computed: {
    turnoverBreakdown() {
      return (this.productData && this.productData.turnoverBreakdown) || []
    },
    endingInventory() {
      if (!this.productData) return 0
      const series = Array.isArray(this.productData.inventoryByDay) ? this.productData.inventoryByDay : []
      if (series.length) return Number(series[series.length - 1] || 0)
      return Number(this.productData.currentInventory || 0)
    },
    beginningInventory() {
      if (!this.productData) return 0
      const series = Array.isArray(this.productData.inventoryByDay) ? this.productData.inventoryByDay : []
      if (series.length) return Number(series[0] || 0)
      const purchase = Number(this.productData.purchaseQty || 0)
      const sales = Number(this.productData.salesQty || 0)
      return this.endingInventory - purchase + sales
    },
    endingInventoryGrowthRate() {
      const base = Math.abs(this.beginningInventory)
      if (base === 0) return this.endingInventory > 0 ? 100 : 0
      return ((this.endingInventory - this.beginningInventory) / base) * 100
    },
    avgDailySales() {
      if (!this.productData) return 0
      const salesSeries = Array.isArray(this.productData.salesByDay) ? this.productData.salesByDay : []
      if (salesSeries.length) {
        const total = salesSeries.reduce((sum, value) => sum + Number(value || 0), 0)
        return total / salesSeries.length
      }
      const days = Array.isArray(this.productData.dates) && this.productData.dates.length ? this.productData.dates.length : 30
      return Number(this.productData.salesQty || 0) / days
    },
    overstockData() {
      const stableSeries = this.productData && Array.isArray(this.productData.stableInventory) ? this.productData.stableInventory : []
      const stable = stableSeries.length ? Number(stableSeries[stableSeries.length - 1] || 0) : Math.max(this.avgDailySales * 30, 0)
      const quantity = Math.max(this.endingInventory - stable, 0)
      const rate = stable > 0 ? quantity / stable : (quantity > 0 ? 1 : 0)
      let level = '无明显积压'
      if (rate >= 0.5) level = '严重积压'
      else if (rate >= 0.2) level = '轻度积压'
      return { quantity, level }
    },
    coverageDaysText() {
      if (this.avgDailySales <= 0) return this.endingInventory > 0 ? '∞' : '0.0'
      return (this.endingInventory / this.avgDailySales).toFixed(1)
    },
    inventoryHealthStatus() {
      const turnover = Number(this.productData && this.productData.turnoverRate ? this.productData.turnoverRate : 0)
      if (this.overstockData.level === '严重积压') return '积压'
      if (this.endingInventory <= 0) return '缺货'
      if (turnover >= 1.5) return '健康'
      if (turnover >= 0.8) return '关注'
      return '低周转'
    },
    statusTagType() {
      if (this.inventoryHealthStatus === '健康') return 'success'
      if (this.inventoryHealthStatus === '关注') return 'warning'
      if (this.inventoryHealthStatus === '缺货' || this.inventoryHealthStatus === '积压') return 'danger'
      return 'info'
    },
    currentSku() {
      return String((this.productData && this.productData.sku) || this.skuInput || this.skuDraft.sku || '').trim().toUpperCase()
    },
    currentUserName() {
      return this.$store && this.$store.getters ? (this.$store.getters.name || this.$store.getters.nickName || '') : ''
    },
    waterlineResultRows() {
      if (!this.productData) return []
      const setting = this.productData.waterlineSetting || {}
      return [
        {
          name: 'W_MAX 最高水位',
          formula: `MAX(日均销量 ${this.formatInventory(this.productData.dailySales)} x 最长补货周期 ${this.productData.maxReplenishCycle || 0} x 系数 ${setting.wmaxCycleFactor || 0}, 月销目标 ${this.formatInventory(this.productData.monthlyTarget)} x ${setting.monthlyTargetRatio || 0})`,
          value: `${this.formatInventory(this.productData.waterlineMax)} 件`
        },
        {
          name: 'ROP 补货点',
          formula: `安全库存 ${this.formatInventory(this.productData.safetyStock)} + 日均销量 ${this.formatInventory(this.productData.dailySales)} x 补货提前期 ${this.productData.leadTime || 0}`,
          value: `${this.formatInventory(this.productData.reorderPoint)} 件`
        },
        {
          name: 'W_MIN / 有效库存',
          formula: `当前库存 ${this.formatInventory(this.productData.currentInventory)} + 在途库存 ${this.formatInventory(this.productData.inTransit)} x (1 - 不合格率 ${this.formatInventory(this.productData.supplierDefectRate)}%)`,
          value: `${this.formatInventory(this.productData.waterlineMin)} 件`
        },
        {
          name: '安全库存 SS',
          formula: setting.safetyStockOverride !== null && setting.safetyStockOverride !== undefined
            ? 'SKU 手动安全库存覆盖'
            : `日均销量 x 安全库存天数 ${setting.safetyDays || this.productData.safetyDays || 0}`,
          value: `${this.formatInventory(this.productData.safetyStock)} 件`
        }
      ]
    }
  },
  mounted() {
    this.fetchWaterlineSettings()
    window.addEventListener('resize', this.resizeChart)
  },
  activated() {
    if (this.productData) {
      this.$nextTick(() => {
        this.initTrendChart()
        this.updateTrendChart()
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart)
    if (this.trendChartInstance) {
      this.trendChartInstance.dispose()
      this.trendChartInstance = null
    }
  },
  methods: {
    formatInteger(value) {
      return Number(value || 0).toLocaleString()
    },
    formatInventory(value) {
      return Number(value || 0).toLocaleString(undefined, { maximumFractionDigits: 1 })
    },
    formatTurnover(value) {
      return Number(value || 0).toFixed(2)
    },
    formatPercent(value) {
      const num = Number(value || 0)
      return `${num >= 0 ? '+' : ''}${num.toFixed(1)}%`
    },
    typeLabel(type) {
      const map = {
        hot: '爆品',
        normal: '常规品',
        new: '新品',
        slow: '长尾/滞销'
      }
      return map[type] || '常规品'
    },
    async fetchWaterlineSettings() {
      this.waterlineLoading = true
      try {
        const res = await request({ url: '/api/inventory/waterline-settings', method: 'get' })
        const data = this.normalizeResponse(res) || {}
        this.skuSettings = Array.isArray(data.skuSettings) ? data.skuSettings : []
        this.syncSkuDraftFromSettings()
      } catch (error) {
        console.error('获取水位设置失败:', error)
      } finally {
        this.waterlineLoading = false
      }
    },
    async saveSkuSetting(row) {
      const payload = { ...(row || {}) }
      payload.sku = this.currentSku
      delete payload.updatedBy
      if (!payload.sku) {
        Message.warning('请先查询 SKU')
        return
      }
      try {
        await request({
          url: '/api/inventory/waterline-settings/sku',
          method: 'post',
          data: payload
        })
        Message.success('SKU 水位覆盖设置已保存')
        await this.fetchWaterlineSettings()
        if (this.skuInput && this.skuInput.trim().toUpperCase() === payload.sku) {
          await this.searchProduct(true)
        }
      } catch (error) {
        console.error('保存SKU水位覆盖设置失败:', error)
        Message.error('保存失败')
      }
    },
    syncSkuDraftFromSettings() {
      const sku = String(this.skuInput || this.skuDraft.sku || '').trim().toUpperCase()
      if (!sku) return
      const existing = (this.skuSettings || []).find(row => String(row.sku || '').toUpperCase() === sku)
      if (existing) {
        this.skuDraft = { ...existing }
        return
      }
      this.skuDraft = {
        ...this.skuDraft,
        sku,
        productType: (this.productData && this.productData.productType) || this.skuDraft.productType || 'normal',
        updatedBy: this.skuDraft.updatedBy || this.currentUserName || ''
      }
    },
    applyProductToSkuDraft(data, sku) {
      const code = String(sku || '').trim().toUpperCase()
      const existing = (this.skuSettings || []).find(row => String(row.sku || '').toUpperCase() === code)
      if (existing) {
        this.skuDraft = { ...existing }
        return
      }
      this.skuDraft = {
        sku: code,
        productType: (data && data.productType) || 'normal',
        safetyStockOverride: undefined,
        safetyDaysOverride: undefined,
        leadTimeOverride: undefined,
        maxReplenishCycleOverride: undefined,
        monthlyTargetOverride: undefined,
        supplierDefectRateOverride: undefined,
        updatedBy: this.currentUserName || ''
      }
    },
    initTrendChart() {
      if (this.trendChartInstance || !this.$refs.trendChart) return
      this.trendChartInstance = echarts.init(this.$refs.trendChart, 'macarons')
    },
    resizeChart() {
      if (this.trendChartInstance) this.trendChartInstance.resize()
    },
    updateTrendChart() {
      if (!this.trendChartInstance || !this.productData) return
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        legend: {
          data: ['入库', '销售', '当前库存', '稳定库存', 'W_MAX', 'ROP', 'W_MIN']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: { type: 'category', data: this.productData.dates || [] },
        yAxis: { type: 'value', name: '数量 (件)' },
        series: [
          {
            name: '入库',
            type: 'bar',
            data: this.productData.purchaseByDay || [],
            itemStyle: { color: '#5470c6' }
          },
          {
            name: '销售',
            type: 'bar',
            data: this.productData.salesByDay || [],
            itemStyle: { color: '#91cc75' }
          },
          {
            name: '当前库存',
            type: 'line',
            data: this.productData.inventoryByDay || [],
            itemStyle: { color: '#fac858' },
            lineStyle: { width: 3 },
            smooth: true
          },
          {
            name: '稳定库存',
            type: 'line',
            data: this.productData.stableInventory || [],
            itemStyle: { color: '#73c0de' },
            lineStyle: { width: 2, type: 'dashed' },
            smooth: true
          },
          {
            name: 'W_MAX',
            type: 'line',
            data: this.productData.waterlineMaxLine || [],
            symbol: 'none',
            itemStyle: { color: '#d48265' },
            lineStyle: { width: 2, type: 'dashed' }
          },
          {
            name: 'ROP',
            type: 'line',
            data: this.productData.reorderPointLine || [],
            symbol: 'none',
            itemStyle: { color: '#c23531' },
            lineStyle: { width: 2, type: 'dotted' }
          },
          {
            name: 'W_MIN',
            type: 'line',
            data: this.productData.waterlineMinLine || [],
            symbol: 'none',
            itemStyle: { color: '#2f4554' },
            lineStyle: { width: 2, type: 'dashed' }
          }
        ]
      }
      this.trendChartInstance.setOption(option, true)
    },
    normalizeResponse(res) {
      if (!res) return null
      if (res.code === 200) return res.data
      if (res.data) return res.data
      return null
    },
    async fetchProductTrend(sku) {
      try {
        const res = await request({ url: `/api/product/trend/${sku}`, method: 'get' })
        return this.normalizeResponse(res)
      } catch (e) {
        try {
          const res = await request({
            url: '/api/inventory/product-trend',
            method: 'get',
            params: { sku }
          })
          return this.normalizeResponse(res)
        } catch (err) {
          throw err
        }
      }
    },
    async searchProduct(keepSettingsVisible = false) {
      const sku = this.skuInput.trim()
      if (!sku) {
        Message.warning('请输入产品SKU')
        return
      }

      this.loading = true
      try {
        const data = await this.fetchProductTrend(sku)
        if (data) {
          this.productData = data
          this.applyProductToSkuDraft(data, sku)
          if (!keepSettingsVisible) {
            this.settingsVisible = false
          }
          this.$nextTick(() => {
            this.initTrendChart()
            this.updateTrendChart()
            this.resizeChart()
          })
          if (data.purchaseQty === 0 && data.salesQty === 0) {
            Message.info(`SKU "${sku}" 没有找到相关数据`)
          }
        } else {
          this.productData = null
        }
      } catch (error) {
        console.error('查询产品失败:', error)
        Message.error('查询失败，请稍后重试')
        this.productData = null
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

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

.analysis-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;
}

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

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

.toolbar-actions {
  display: grid;
  grid-template-columns: minmax(260px, 360px) auto auto;
  gap: 10px;
  align-items: center;
}

.sku-waterline-card {
  margin-bottom: 12px;
  border-radius: 8px;
}

.waterline-note {
  margin-top: 10px;
  color: #909399;
  font-size: 12px;
}

.waterline-result-row {
  margin-bottom: 14px;
}

.product-info {
  display: flex;
  gap: 10px;
  align-items: center;
}

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

.turnover-row {
  margin-bottom: 14px;
}

.turnover-period-label {
  font-weight: 600;
  color: #303133;
}

.turnover-period-range {
  font-size: 12px;
  color: #909399;
}

.metric-card {
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.metric-card:hover {
  border-color: #b3d8ff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.08);
}

.metric-item {
  min-height: 86px;
  padding: 4px 2px;
}

.metric-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 26px;
  font-weight: 650;
  color: #303133;
  margin-bottom: 4px;
}

.metric-positive {
  color: #67c23a;
}

.metric-negative {
  color: #f56c6c;
}

.metric-status {
  font-size: 24px;
}

.metric-unit {
  font-size: 12px;
  color: #909399;
}

.charts-row {
  margin-bottom: 14px;
}

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

.trend-chart {
  height: 380px;
}

.sku-tag {
  margin-left: 8px;
}

.sku-waterline-card /deep/ .el-input-number {
  width: 100%;
}

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

.sku-waterline-card /deep/ .el-table {
  color: #303133;
}

.readonly-cell {
  color: #303133;
  font-weight: 600;
}

.analysis-empty {
  margin-top: 32px;
  padding: 44px 0;
  background: #fff;
  border: 1px dashed #dcdfe6;
  border-radius: 8px;
}

@media (max-width: 1180px) {
  .analysis-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-actions {
    grid-template-columns: 1fr auto auto;
  }
}

@media (max-width: 760px) {
  .toolbar-actions {
    grid-template-columns: 1fr;
  }
}
</style>
