<template>
  <div class="rank-check">
    <h2>Tier</h2>
    <!-- <a-collapse :expand-icon-position="expandIconPosition">
      <a-collapse-panel header="Hero"> -->
        <a-checkbox-group :value="marketplaceList.rank" :options="heroList" @change="onChange" />
      <!-- </a-collapse-panel>
    </a-collapse> -->
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
// import { SettingOutlined } from "@ant-design/icons-vue";
import { useMarketplaceStore } from "@/store/marketplace"
// import { emit } from "process";
const emit = defineEmits(['clickHeroChild'])
const marketplaceList = useMarketplaceStore()
const heroList = [
  { label: "Tier1", value: "1" },
  { label: "Tier2", value: "2" },
  { label: "Tier3", value: "3" },
  { label: "Tier4", value: "4" },
  { label: "Tier5", value: "5" },
];
const state = reactive({
  value: [],
});
const expandIconPosition = ref("end");
const onChange = (e) => {
  // marketplaceList.rank = e
  emit('clickRankChild',e)
}

</script>

<style lang="scss" scoped>
.rank-check {
  border-bottom: 2px solid #3b3c59;
  margin: 20px 0;
  padding-bottom: 20px;
  h2 {
    font-family: 'Poppins';
    font-weight: bold;
    font-size: 20px;
    color: #BB7FFF;
    margin-bottom: 10px;
  }
  :deep(.ant-checkbox-group) {
    display: block;
    .ant-checkbox-wrapper {
      display: flex !important;
      span {
        color: #BB7FFF;
      }
      .ant-checkbox {

      }
    }
  }
}
</style>
