<template>
  <div class="rank-check">
    <h2>Heroic rank</h2>
    <!-- <a-collapse :expand-icon-position="expandIconPosition">
      <a-collapse-panel header="Hero"> -->
        <a-checkbox v-for="item in heroList" :key="item.value" @change="onChangeValue(item.value)">
          <span>{{ item.label }}</span>
          <!-- <span>{{ heroList.length }}</span> -->
        </a-checkbox>
      <!-- </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 heroList = [
  { label: "Hill", value: "Hill" },
  { label: "Aoi", value: "Aoi" },
  { label: "Yamada", value: "Yamada" },
  { label: "Astral", value: "Astral" },
];
const checkArr = ref([])
const expandIconPosition = ref("end");
const handleClick = (event) => {
  // If you don't want click extra trigger collapse, you can prevent this:
  event.stopPropagation();
};
const onChangeValue = (e) => {
  // ToDo: 筛选
  console.log(JSON.parse(JSON.stringify(marketplaceList.rank)),'-0---')
  if(JSON.parse(JSON.stringify(marketplaceList.rank)) == undefined || JSON.parse(JSON.stringify(marketplaceList.rank)).length <= 0) {
    console.log(e)
    JSON.parse(JSON.stringify(marketplaceList.rank)).push(e)
    for(let i = 0; i < JSON.parse(JSON.stringify(marketplaceList.rank)).length; i++) {
      console.log('进来')
      if(JSON.parse(JSON.stringify(marketplaceList.rank))[i] == e) {
        console.log('这里')
        JSON.parse(JSON.stringify(marketplaceList.rank)).splice(i,1)
      }
    }
  }
  console.log(JSON.parse(JSON.stringify(marketplaceList.rank)),JSON.parse(JSON.stringify(checkArr.value)))
};

const noRepeat1 = function (arr) {
  arr = [...new Set(arr)];
  return arr
}
const setArr = ref([])
const noRepeat2 = (arr,e) => {
  console.log(arr)
  // arr = arr.filter(item => item != e)
  for(var i = 0; i < arr.length; i++){
    if(arr[i] != e) {
      console.log(e,'不')
      setArr.value.push(e)
    } else {
      console.log(arr[i],'等')
    }
  }
  console.log(setArr.value,arr,'-------')
}

</script>

<style lang="scss" scoped>
.rank-check {
  border-bottom: 2px solid #fff;
  margin: 20px 0;
  padding-bottom: 20px;
  h2 {
    font-family: 'Poppins';
    font-weight: bold;
    font-size: 20px;
    color: #BB7FFF;
    margin-bottom: 10px;
  }
  // :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-checkbox-wrapper {
      display: flex !important;
      color: #BB7FFF;
    }
        .ant-collapse-content-box {
          padding: 20px 0;
          .ant-checkbox-wrapper {
              display: flex !important;
              span {
                color: #BB7FFF;
              }
            }
          .ant-checkbox-group {
            display: block;
            .ant-checkbox-wrapper {
              display: flex !important;
            }
            .ant-checkbox-group-item {
              display: flex !important;
              background: #fff;
              span {
                color: #BB7FFF !important;
              }
            }
          }
          
        // }
    //   }
    // }
  }
}
</style>
