<template>
  <view class="feature-page">
    <view class="page-header">
      <view class="nav-bar">
        <view class="nav-left" @click="goBack">
          <text class="back-icon">←</text>
        </view>
        <text class="nav-title">过度承诺统计</text>
      </view>
    </view>

    <scroll-view
      class="content-scroll"
      scroll-y="true"
      lower-threshold="100"
      @scrolltolower="onScrollToLower"
    >
      <view class="stats-card">
        <view class="stat-item">
          <text class="stat-value">{{ overCommitmentRateDisplay }}</text>
          <text class="stat-label">过度承诺率</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ listTotal }}</text>
          <text class="stat-label">违规事件数</text>
        </view>
      </view>

      <view class="chart-section">
        <text class="section-title">过度承诺趋势图</text>
        <view class="chart-placeholder">
          <text class="placeholder-text">⚠️ 图表区域</text>
          <text class="placeholder-desc">此处将显示过度承诺统计趋势图表</text>
        </view>
      </view>

      <view class="search-toolbar">
        <input
          class="search-input"
          v-model="listQuery.reasonKeyword"
          placeholder="搜索触发原因关键词"
          placeholder-style="color: #b0b0b0"
          confirm-type="search"
          @confirm="onSearch"
        />
        <view class="toolbar-actions">
          <view class="toolbar-btn" @click="onSearch">
            <text>搜索</text>
          </view>
          <view class="toolbar-btn toolbar-btn--ghost" @click="onRefresh">
            <text>刷新</text>
          </view>
        </view>
      </view>

      <view class="data-list">
        <view class="section-title-row">
          <text class="section-title">触及红线记录</text>
          <text class="section-meta">共 {{ listTotal }} 条</text>
        </view>

        <view v-if="listLoading && !dataList.length" class="list-hint">加载中…</view>
        <view v-else-if="listError" class="list-hint list-hint--error">{{ listError }}</view>
        <view v-else-if="!listLoading && !dataList.length" class="list-hint">暂无记录</view>

        <view
          class="list-item"
          v-for="item in dataList"
          :key="item.id || item.Id || item.audioManagementSegmentsId"
        >
          <view class="item-main">
            <view class="item-row item-row--title">
              <text class="item-name">{{ displaySalesName(item) }}</text>
              <text class="item-time">{{ formatDateTime(item.createTime || item.create_time) }}</text>
            </view>
            <view class="item-row" v-if="displaySalesPhone(item)">
              <text class="item-label">电话</text>
              <text class="item-value">{{ displaySalesPhone(item) }}</text>
            </view>
            <view class="item-row" v-if="item.redLineType || item.red_line_type">
              <text class="item-label">类型</text>
              <text class="item-value">{{ item.redLineType || item.red_line_type }}</text>
            </view>
            <view class="item-row" v-if="item.redLineSubtype || item.red_line_subtype">
              <text class="item-label">子类型</text>
              <text class="item-value">{{ item.redLineSubtype || item.red_line_subtype }}</text>
            </view>
            <view class="item-row" v-if="item.checkThreshold || item.check_threshold">
              <text class="item-label">阈值</text>
              <text class="item-value">{{ item.checkThreshold || item.check_threshold }}</text>
            </view>
            <view class="item-reason" v-if="item.reasonText || item.reason_text">
              <text class="item-reason-label">触发文本</text>
              <text class="item-reason-text">{{ item.reasonText || item.reason_text }}</text>
            </view>
            <view class="item-row" v-if="item.remark">
              <text class="item-label">备注</text>
              <text class="item-value item-value--muted">{{ item.remark }}</text>
            </view>
          </view>
        </view>

        <view v-if="listLoading && dataList.length" class="list-footer">加载中…</view>
        <view v-else-if="!listHasMore && dataList.length" class="list-footer">没有更多了</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { get } from '@/common/request.js'

export default {
  data() {
    return {
      /** 趋势/占比等需单独统计接口；列表页先占位 */
      overCommitmentRateDisplay: '—',
      dataList: [],
      listTotal: 0,
      listPages: 0,
      listPage: { current: 1, size: 10 },
      listQuery: {
        audioManagementId: '',
        audioManagementSegmentsId: '',
        redLineType: '',
        redLineSubtype: '',
        salesId: '',
        reasonKeyword: '',
        createStartTime: '',
        createEndTime: ''
      },
      listLoading: false,
      listError: '',
      listHasMore: true
    }
  },
  onLoad(options) {
    this.applyRouteQuery(options || {})
    this.refreshList()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    /** 支持从路由传入筛选条件（与后端 @RequestParam 一致，camelCase） */
    applyRouteQuery(options) {
      const keys = [
        'audioManagementId',
        'audioManagementSegmentsId',
        'redLineType',
        'redLineSubtype',
        'salesId',
        'reasonKeyword',
        'createStartTime',
        'createEndTime'
      ]
      keys.forEach((k) => {
        const v = options[k]
        if (v != null && String(v).trim() !== '') {
          try {
            this.listQuery[k] = decodeURIComponent(String(v).trim())
          } catch {
            this.listQuery[k] = String(v).trim()
          }
        }
      })
    },
    buildListParams() {
      const p = {
        current: this.listPage.current,
        size: this.listPage.size
      }
      const q = this.listQuery
      if (q.audioManagementId) p.audioManagementId = q.audioManagementId
      if (q.audioManagementSegmentsId) p.audioManagementSegmentsId = q.audioManagementSegmentsId
      if (q.redLineType) p.redLineType = q.redLineType
      if (q.redLineSubtype) p.redLineSubtype = q.redLineSubtype
      if (q.salesId) p.salesId = q.salesId
      if (q.reasonKeyword && q.reasonKeyword.trim()) p.reasonKeyword = q.reasonKeyword.trim()
      if (q.createStartTime) p.createStartTime = q.createStartTime
      if (q.createEndTime) p.createEndTime = q.createEndTime
      return p
    },
    async fetchListPage(append) {
      if (this.listLoading) return
      this.listLoading = true
      this.listError = ''
      try {
        const res = await get('/api/redLineRecord/list', this.buildListParams())
        if (res.statusCode !== 200 || !res.data) {
          throw new Error(res.data?.message || `请求失败（${res.statusCode}）`)
        }
        const body = res.data
        if (!body.success) {
          throw new Error(body.message || '查询失败')
        }
        const records = Array.isArray(body.data) ? body.data : []
        const total = Number(body.total) || 0
        const pages = Number(body.pages) || 0
        const current = Number(body.current) || this.listPage.current

        this.listTotal = total
        this.listPages = pages
        this.listPage.current = current

        if (append) {
          this.dataList = this.dataList.concat(records)
        } else {
          this.dataList = records
        }

        const loaded = this.dataList.length
        this.listHasMore = pages > 0 ? current < pages : loaded < total
      } catch (e) {
        console.error('[over_commitment] list error', e)
        this.listError = e.message || '加载失败'
        if (!append) {
          this.dataList = []
          this.listTotal = 0
        }
        uni.showToast({ title: this.listError, icon: 'none' })
      } finally {
        this.listLoading = false
      }
    },
    refreshList() {
      this.listPage.current = 1
      this.listHasMore = true
      return this.fetchListPage(false)
    },
    onSearch() {
      this.refreshList()
    },
    onRefresh() {
      this.refreshList()
    },
    onScrollToLower() {
      if (this.listLoading || !this.listHasMore) return
      const next = this.listPage.current + 1
      if (this.listPages > 0 && next > this.listPages) return
      this.listPage.current = next
      this.fetchListPage(true)
    },
    displaySalesName(item) {
      const n = item.salesName || item.sales_name
      if (n) return n
      const id = item.salesId || item.sales_id
      return id ? `销售ID ${id}` : '未知销售'
    },
    displaySalesPhone(item) {
      return item.salesPhone || item.sales_phone || ''
    },
    formatDateTime(val) {
      if (val == null || val === '') return ''
      if (Array.isArray(val) && val.length >= 6) {
        const y = val[0]
        const m = String(val[1]).padStart(2, '0')
        const d = String(val[2]).padStart(2, '0')
        const h = String(val[3] ?? 0).padStart(2, '0')
        const min = String(val[4] ?? 0).padStart(2, '0')
        const s = String(val[5] ?? 0).padStart(2, '0')
        return `${y}-${m}-${d} ${h}:${min}:${s}`
      }
      if (typeof val === 'string') {
        return val.replace('T', ' ').slice(0, 19)
      }
      try {
        const d = new Date(val)
        if (Number.isNaN(d.getTime())) return String(val)
        const y = d.getFullYear()
        const m = String(d.getMonth() + 1).padStart(2, '0')
        const day = String(d.getDate()).padStart(2, '0')
        const h = String(d.getHours()).padStart(2, '0')
        const min = String(d.getMinutes()).padStart(2, '0')
        const s = String(d.getSeconds()).padStart(2, '0')
        return `${y}-${m}-${day} ${h}:${min}:${s}`
      } catch {
        return String(val)
      }
    }
  }
}
</script>

<style scoped>
.feature-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-header {
  background: #ffffff;
  border-bottom: 1rpx solid #e9ecef;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.back-icon {
  font-size: 36rpx;
  color: #333333;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.content-scroll {
  height: calc(100vh - 88rpx);
}

.stats-card {
  display: flex;
  margin: 20rpx 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-item:not(:last-child) {
  border-right: 1rpx solid #e9ecef;
}

.stat-value {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #ff6b6b;
  margin-bottom: 10rpx;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  color: #666666;
}

.chart-section,
.data-list {
  margin: 20rpx 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.search-toolbar {
  display: flex;
  align-items: center;
  margin: 0 30rpx 20rpx;
  padding: 16rpx 20rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  gap: 16rpx;
}

.search-input {
  flex: 1;
  height: 64rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  background: #f5f6f8;
  border-radius: 12rpx;
}

.toolbar-actions {
  display: flex;
  flex-shrink: 0;
  gap: 12rpx;
}

.toolbar-btn {
  padding: 12rpx 24rpx;
  font-size: 26rpx;
  color: #2a68ff;
  background: #eef3ff;
  border-radius: 12rpx;
}

.toolbar-btn--ghost {
  color: #666666;
  background: #f0f0f0;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #e9ecef;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.section-meta {
  font-size: 24rpx;
  color: #888888;
}

.chart-placeholder {
  padding: 80rpx 30rpx;
  text-align: center;
}

.placeholder-text {
  display: block;
  font-size: 48rpx;
  margin-bottom: 20rpx;
}

.placeholder-desc {
  display: block;
  font-size: 28rpx;
  color: #666666;
}

.list-item {
  padding: 28rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.list-item:last-child {
  border-bottom: none;
}

.item-main {
  width: 100%;
}

.item-row {
  display: flex;
  align-items: flex-start;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #555555;
}

.item-row--title {
  margin-top: 0;
  justify-content: space-between;
  align-items: center;
}

.item-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  flex: 1;
  margin-right: 16rpx;
}

.item-time {
  font-size: 22rpx;
  color: #999999;
  flex-shrink: 0;
}

.item-label {
  width: 120rpx;
  flex-shrink: 0;
  color: #888888;
}

.item-value {
  flex: 1;
  word-break: break-all;
}

.item-value--muted {
  color: #777777;
}

.item-reason {
  margin-top: 16rpx;
  padding: 16rpx;
  background: #f8f9fb;
  border-radius: 12rpx;
}

.item-reason-label {
  display: block;
  font-size: 22rpx;
  color: #888888;
  margin-bottom: 8rpx;
}

.item-reason-text {
  font-size: 26rpx;
  color: #333333;
  line-height: 1.5;
  word-break: break-all;
}

.list-hint {
  padding: 48rpx 30rpx;
  text-align: center;
  font-size: 28rpx;
  color: #999999;
}

.list-hint--error {
  color: #ff6b6b;
}

.list-footer {
  padding: 24rpx;
  text-align: center;
  font-size: 24rpx;
  color: #aaaaaa;
}
</style>
