<template>
  <view class="layout-shop flex" @click="goDetail">
    <view class="layout-shop-image relative">
      <image src="/static/images/shop-background.png" class="layout-shop-background relative"></image>
      <view class="absolute row aCenter shop-logo-warp">
        <image src="/static/images/logo.jpg" class="layout-shop-logo"></image>
        <text>{{config.name}}</text>
      </view>
      <view class="absolute shop-image">
        <image mode="aspectFill" :src="item.image" class="screen_all"></image>
      </view>
    </view>
    <view class="flex-all-1 shop-content">
      <view class="shop-title line-2">{{item.title}}</view>
      <view class="line-1 shop-price-color" v-if="item.id"><text class="shop-price"><text>¥</text><text class="shop-price-target">{{item.sales_price}}</text></text></view>
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex';
import props from './props';
import shop from '@/utils/controls/shop';
export default {
  name: "layout-shop",
  computed:{
    ...mapState(['config'])
  },
  props,
  methods:{
    goDetail(){
      shop.goShopDetail(this.item);
    }
  }
}
</script>

<style scoped lang="scss" src="./style.scss"></style>