<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
const props = defineProps({
  url: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: 'aaa'
  },
  price: {
    type: String,
    default: '111'
  },
  download: {
    type: Boolean,
    default: false
  },
  showPrice: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['addShopping', 'openDetail', 'download'])
let data = reactive({})
const addShopping = () => {
  if (props.download) {
    emit('download')
  } else {
    emit('addShopping')
  }
}
const openDetail = () => {
  emit('openDetail')
}
onMounted(() => {})
onUnmounted(() => {})
defineExpose({})
const {} = toRefs(data)
</script>
<template>
  <div class="commodity-item" :class="{ 'is-download': download }">
    <img :src="props.url" alt="" @click="openDetail" />
    <div class="detail">
      <div class="text">
        <div class="name">
          {{ props.name }}
        </div>
        <div class="price" :class="{ 'is-download': download }" v-if="props.showPrice && props.price">
          {{ props.price }}
        </div>
      </div>
      <div class="btn" @click="addShopping">
        <div class="text">
          <SvgIcon :name="download ? 'download' : 'add'" size="26" color="#232323"></SvgIcon>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.commodity-item {
  width: var(--commodity-width, 100%);
  &.is-download{
    img{
      cursor: initial;
    }
  }
  > img {
    width: 100%;
    cursor: pointer;
    height: var(--commodity-height, auto);
    margin-bottom: var(--commodity-marginBottom, 1rem);
  }
  > .detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .text {
      color: #232323;
      > .name {
        font-family: 'KaiseiOpti-Regular';
        font-weight: 400;
        font-size: var(--commodity-name-fontSize, 1.6rem);
        line-height: var(--commodity-name-lineHeight, 2.3rem);
        margin-bottom: var(--commodity-name-marginBottom, 0rem);
      }
      > .price {
        font-family: 'KaiseiOpti-Regular';
        font-weight: 400;
        font-size: var(--commodity-price-fontSize, 1.4rem);
        line-height: var(--commodity-price-lineHeight, 2.3rem);
        &.is-download {
          color: #979797;
        }
      }
    }
  }
  .btn {
    cursor: pointer;
  }
}
</style>
