<template>
  <view class="dark-table-container">
    <scroll-view scroll-x="true" class="table-scroll">
      <view class="table">
        <!-- 表头 -->
        <view class="table-row table-header">
          <view class="table-cell" v-for="(col, idx) in columns" :key="idx">
            {{ col.label }}
            <text v-if="col.tip" class="tip" @click="showTip(col.tip)">?</text>
          </view>
        </view>
        <!-- 数据行 -->
        <view class="table-row" v-for="(row, rIdx) in data" :key="rIdx">
          <view class="table-cell" v-for="(col, cIdx) in columns" :key="cIdx">
            {{ row[col.key] || '-' }}
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 说明弹窗 -->
    <uni-popup ref="popup" type="center">
      <view class="popup-content">{{ tipContent }}</view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { label: '渠道', key: 'channel' },
        { label: '资源数', key: 'resource', tip: '本月的新资源' },
        { label: '到访数(一访)', key: 'visit1', tip: '本月资源的一访到访数' },
        { label: '到访率(一访)', key: 'visitRate1', tip: '一访到访数/本月新资源数' },
        { label: '到访数(二访)', key: 'visit2', tip: '二访到访数/一访到访数' },
        { label: '到访率(二访)', key: 'visitRate2', tip: '二访到访数/一访到访数' },
        { label: '关单数(一访)', key: 'close1', tip: '本月一访到访的关单数' },
        { label: '关单率(一访)', key: 'closeRate1', tip: '一访关单数/一访到访数' },
        { label: '关单数(二访)', key: 'close2', tip: '二访到访的关单数' },
        { label: '关单率(二访)', key: 'closeRate2', tip: '二访关单数/二访到访数' },
        { label: '月总转', key: 'monthTrans', tip: '关单数（合计）/资源数' },
        { label: '往月到访数', key: 'lastMonthVisit', tip: '本月资源在往月到访的到访数' },
        { label: '月共到访', key: 'monthTotalVisit', tip: '本月资源任在本月到访/关单' },
        { label: '往月关单数', key: 'lastMonthClose', tip: '本月关单-往月关单' },
        { label: '月共关单', key: 'monthTotalClose', tip: '本月关单+往月关单' },
      ],
      data: [
        { channel: '体检包（地推）', resource: 10, visit1: 5, visitRate1: '50%', visit2: 2, visitRate2: '40%', close1: 1, closeRate1: '20%', close2: 1, closeRate2: '50%', monthTrans: '10%', lastMonthVisit: 0, monthTotalVisit: 5, lastMonthClose: 0, monthTotalClose: 1 },
      ],
      tipContent: ''
    }
  },
  methods: {
    showTip(content) {
      this.tipContent = content
      this.$refs.popup.open()
    }
  }
}
</script>

<style scoped>
.dark-table-container {
  background: #18181c;
  color: #f1f1f1;
  min-height: 100vh;
  padding: 16rpx;
}
.table-scroll {
  width: 100%;
  overflow-x: auto;
}
.table {
  min-width: 1200rpx;
}
.table-row {
  display: flex;
  border-bottom: 1px solid #333;
}
.table-header {
  background: #23232a;
  font-weight: bold;
}
.table-cell {
  flex: 0 0 180rpx;
  padding: 16rpx 8rpx;
  text-align: center;
  border-right: 1px solid #333;
  position: relative;
}
.tip {
  color: #ffb300;
  margin-left: 8rpx;
  font-size: 24rpx;
  cursor: pointer;
}
.popup-content {
  background: #23232a;
  color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  min-width: 300rpx;
  text-align: center;
}
</style> 