<template>
  <div>
    <a-row :gutter="[16, 16]">
      <a-col
        v-for="(item, index) in items"
        :key="index"
        :span="8"
        style="display: flex; align-items: center;"
      >
        <a-checkbox
          v-model="item.checked"
          @change="updateSelection(item)"
        >
          {{ item.label }}  <!-- 显示 label -->
        </a-checkbox>
      </a-col>
    </a-row>
    <div style="margin-top: 20px;">
      <a-button type="primary" @click="logSelection">打印选中结果</a-button>
    </div>
    <div v-if="selectedItems.length">
      <h3>选中的项目：</h3>
      <ul>
        <li v-for="(item, index) in selectedItems" :key="index">
          {{ item.label }} <!-- 显示选中的 label -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CheckboxGrid',
  data () {
    return {
      serviceName: undefined,
      // 每个选项包含 label 和 value
      items: [
        { label: '选项 1', value: 'Value 1', checked: false },
        { label: '选项 2', value: 'Value 2', checked: false },
        { label: '选项 3', value: 'Value 3', checked: false },
        { label: '选项 4', value: 'Value 4', checked: false },
        { label: '选项 5', value: 'Value 5', checked: false },
        { label: '选项 6', value: 'Value 6', checked: false },
        { label: '选项 7', value: 'Value 7', checked: false },
        { label: '选项 8', value: 'Value 8', checked: false },
        { label: '选项 9', value: 'Value 9', checked: false },
      ],
      // 存储选中的项的 value
      selectedItems: [],
    }
  },
  methods: {
    init (params) {
      const {
        serviceName,
        // 可选内容
        options
      } = params
      this.serviceName = serviceName
      // 给options的每一项添加checked：false
      this.items = options.map(option => ({
        ...option,
        checked: false
      }))
    },
    // 更新选中的项
    updateSelection (item) {
      if (item.checked) {
        // 如果勾选，存储 item (包括 label 和 value)
        this.selectedItems.push(item)
      } else {
        // 如果取消勾选，移除 item
        const index = this.selectedItems.findIndex(i => i.value === item.value)
        if (index > -1) {
          this.selectedItems.splice(index, 1)
        }
      }
    },
    // 打印选中项的 label
    logSelection () {
      // 打印选中项的 label
      console.log(this.selectedItems.map(item => item.value))
    },
  },
}
</script>

<style scoped>
.two-column-checklist {
  display: flex;
  justify-content: space-between; /* 自动调整两列间距 */
}

.column {
  display: flex;
  flex-direction: column;
  gap: 5px; /* 控制每一项的间距 */
  width: 48%; /* 使两列宽度适中，留出间距 */
}

.item {
  margin-bottom: 0; /* 避免额外的间距 */
}
</style>
