<template>
  <view class="changecarCar">
    <view class="cardetail">
      <img src="../../static/img/caricon1.png" alt class="caricon" />
      <view class="carinfo">
        <view>阿尔法·罗密欧-Stelvio</view>
        <view class="cardesc">2019款2.9T 手自一体 510HPF1限量款</view>
      </view>
    </view>
    <view>
      <img src="../../static/img/selected.png"  :data-k="current" class="xz1" v-if="ifxz" @click="xz">
      <img src="../../static/img/select.png" :data-k="current" class="xz" v-else @click="xz"/>
       
    </view>
  </view>
</template>

<script>
export default {
  name: "changecarCar",
  data() {
    return {
      ifxz: false
    };
  },
  props: {
    val: {
      type: String
    },
    index: {
      type: Number
    },
    current: {
      type: Number,
      value: 0
    },
    ids: {
      type: Array
    }
  },
  methods: {
    xz(){
      console.log(80)
      this.$emit('select');
    }
  }
};
</script>

<style lang="scss">
.changecarCar {
  height: 105upx;
  border: 1upx solid gray;
  display: flex;
  justify-content: space-between;
  .cardetail {
    display: flex;
    margin: auto 0;
    .caricon {
      width: 82upx;
      height: 82upx;
    }
    .carinfo {
      width: 394upx;
      height: 59upx;
      margin-left: 33upx;
      font-size: 24upx;
      color: #222222;
      .cardesc {
        color: #999999;
        font-size: 22upx;
        margin-top: 15upx;
      }
    }
  }
  .xz{
    width:50upx;
    height: 50upx;
   margin-top: 25upx;
   margin-right: 24upx;
  }
    .xz1{
    width:50upx;
    height: 50upx;
   margin-top: 25upx;
   margin-right: 24upx;
  }  
}
</style>