<template>
  <view
    class="wrapper"
    :style="{ backgroundImage: `url(${detail.brand_logo})` }"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      fill="none"
      version="1.1"
      viewBox="0 0 13 13"
      class="svg"
      @click="checkedEvent"
    >
      <g>
        <ellipse
          cx="6.5"
          cy="6.5"
          rx="6.5"
          ry="6.5"
          fill="#FFFFFF"
          fill-opacity="1"
        />
        <path
          d="M6.85467,0.16026C6.65747,-0.049906,6.33416,-0.0538585,6.13257,0.151333L2.65289,3.69208L0.855769,1.81926C0.669146,1.62458,0.356251,1.63538,0.156706,1.84316C-0.0428302,2.05098,-0.0532221,2.37714,0.133625,2.57177L2.33038,4.86098C2.51696,5.05539,2.82989,5.04459,3.0294,4.83682C3.07511,4.78922,3.10934,4.73525,3.13501,4.67819C3.15477,4.66321,3.17447,4.649,3.19236,4.63059L6.84614,0.91282C7.048,0.707426,7.05164,0.370686,6.85467,0.16026L6.85467,0.16026Z"
          :fill="checkedColor[detail.id]"
          fill-opacity="1"
          class="gou"
          v-if="detail.isChecked"
        />
        <ellipse
          cx="6.5"
          cy="6.5"
          rx="6.2"
          ry="6.2"
          fill-opacity="0"
          stroke-opacity="1"
          :stroke="checkedColor[detail.id]"
          fill="none"
          stroke-width="0.6"
        />
      </g>
    </svg>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, unref, onMounted } from "vue";
import { checkedColor } from "../config";

const props = defineProps({
  detail: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(["checked"]);

const checkedEvent = () => {
  emits("checked", props.detail.id);
};
</script>
<style scoped lang="scss">
.wrapper {
  // width:226rpx;
  width: 100%;
  height: 110rpx;
  box-sizing: border-box;
  // background: url('@/static/ycysp/cloud.webp') no-repeat;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.gou {
  width: 14rpx;
  height: 10rpx;
  transform: translate(6rpx, 8rpx);
}
.svg {
  position: absolute;
  right: 8rpx;
  top: 8rpx;
  width: 27rpx;
  height: 27rpx;
}
</style>
