<template>
  <view class="table u-font-28">
    <!-- 表头：根据 columns 渲染 + 全选框 -->
    <view class="u-flex u-row-between no-wrap title">
      <!-- 全选框 -->
      <view class="table-th">
        <my-radio
          @change="handleSelectAll"
          v-model="internalAllChecked"
          shape="square"
          :size="20"
        />
      </view>

      <!-- 动态列标题 -->
      <view class="table-th" v-for="col in columns" :key="col.key" :style="col.style || {}">
        {{ col.label }}
      </view>
    </view>

    <!-- 表格行 -->
    <view
      @click="handleRowCheck(item)"
      class="u-m-t-12 u-flex u-p-24 u-row-between row"
      v-for="(item, index) in internalData"
      :key="item.id || index"
      row-key="id"
    >
      <!-- 单选框 -->
      <view class="table-td">
        <my-radio
          v-model="item._checked"
          shape="square"
          :size="20"
          @change="handleRowCheck(item)"
        />
      </view>

      <!-- 动态列内容 -->
      <view class="table-td" v-for="col in columns" :key="col.key" :style="col.style || {}">
        <!-- 支持自定义渲染 / 直接取值 -->
        <slot v-if="col.slot" :name="col.slot" :row="item" />
        <template v-else>
          {{ item[col.key] }}
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

// 完全对齐 u-table2 的 props
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  rowKey: {
    type: String,
    default: 'id'
  }
});

// 抛出和 u-table2 一样的 selection-change 事件
const emits = defineEmits(['selection-change']);

// 内部数据（增加选中状态 _checked）
const internalData = ref([]);

// 全选状态
const internalAllChecked = ref(false);

// 监听外部 data 变化，自动注入选中状态
watch(
  () => props.data,
  (val) => {
    internalData.value = val.map(item => ({
      ...item,
      _checked: item._checked || false
    }));
  },
  { immediate: true, deep: true }
);

// 全选切换
function handleSelectAll() {
  const checked = internalAllChecked.value;
  internalData.value.forEach(item => {
    item._checked = checked;
  });
  emitChange();
}

// 行选中切换
function handleRowCheck(row) {
  row._checked = !row._checked;
  emitChange();
}

// 抛出选中结果（和 u-table2 行为一致）
function emitChange() {
  const selectedRows = internalData.value.filter(item => item._checked);
  emits('selection-change', selectedRows);
}

// 监听所有行选中状态，自动更新全选框
watch(
  () => internalData.value,
  () => {
    const total = internalData.value.length;
    const checkedCount = internalData.value.filter(i => i._checked).length;
    internalAllChecked.value = total > 0 && checkedCount === total;
  },
  { deep: true }
);
</script>

<style lang="scss">
.table {
  background: #f9f9f9;
  border-radius: 8rpx;
  overflow: hidden;

  .title {
    padding: 12rpx 24rpx;
    background: #aebad2;
    border-radius: 8rpx 8rpx 0 0;
    color: #fff;
  }

  .table-th,
  .table-td {
    flex: 1;
    text-align: center;
  }

  .row {
    cursor: pointer;
  }

  .row:nth-of-type(2n + 1) {
    background: #f0f0f0;
  }
}
</style>