<template>
  <div class="hero-check">
    <a-collapse :expand-icon-position="expandIconPosition">
      <a-collapse-panel header="Hero">
        <!-- <a-checkbox v-for="item in goldList" :key="item.value" @change="onChangeValue(item.value)">
          <span>{{ item.label }}</span>
        </a-checkbox> -->
        <a-checkbox-group :value="heroArr" :options="heroList" @change="onChangeValue" />
        <h2>Tier</h2>
        <a-checkbox-group :value="rankArr" :options="rankList" @change="onChange" />
        <template #extra>{{ heroList.length }}</template>
      </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"
const marketplaceList = useMarketplaceStore()

const props = defineProps({
  heroArr: {
    type: Array,
    required: true,
  },
  rankArr: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(['clickHeroChild','clickRankChild'])

const heroList = [
  { label: "Hill", value: "30100" },
  { label: "Aoi", value: "30300" },
  { label: "Yamada", value: "30200" },
  { label: "Astral", value: "30400" },
  { label: "Miffy", value: "30500" },
  { label: "Canoe", value: "30600" },
  { label: "Mariana", value: "30700" },
  { label: "Dragonscale", value: "30800" },
  { label: "Lazar", value: "30900" },
  { label: "Kurosawa", value: "31000" },
];

const heroState = reactive({
  value: [],
});

const onChangeValue = (e) => {
  // ToDo: 筛选
  state.value = e
  // marketplaceList.hero = e
  emit('clickHeroChild',e)
};


const expandIconPosition = ref("end");
const handleClick = (event) => {
  // If you don't want click extra trigger collapse, you can prevent this:
  event.stopPropagation();
};


const rankList = [
  { label: "Tier1", value: "2" },
  { label: "Tier2", value: "3" },
  { label: "Tier3", value: "4" },
  { label: "Tier4", value: "5" },
  { label: "Tier5", value: "6" },
];

const state = reactive({
  value: [],
});

const onChange = (e) => {
  // marketplaceList.rank = e
  emit('clickRankChild',e)
}
</script>

<style lang="scss" scoped>
.hero-check {
  border-bottom: 2px solid #3b3c59;
  :deep(.ant-collapse) {
    color: #fff;
    border: 0px;
    .ant-collapse-item {
      border: 0px;
      .ant-collapse-header {
        color: #BB7FFF;
        padding: 0;
      }
      .ant-collapse-content {
        background: none;
        border: none;
        .ant-collapse-content-box {
          padding: 20px 0;
          .ant-checkbox-wrapper {
              display: flex !important;
              span {
                color: #BB7FFF;
              }
            }
            h2 {
              font-family: 'Poppins';
              font-weight: bold;
              font-size: 20px;
              color: #BB7FFF;
              margin-bottom: 10px;
              border-top: 2px solid #3b3c59;
              margin-top: 20px;
              padding-top: 5px;
            }
          .ant-checkbox-group {
            display: block;
            .ant-checkbox-wrapper {
              display: flex !important;
            }
            .ant-checkbox-group-item {
              display: flex !important;
              background: #16141b;
              span {
                color: #BB7FFF !important;
              }
            }
          }
          
        }
      }
    }
  }
  
}
</style>
