<template>
  <view class="line" :class="{ 'border-none': props.isBorder }" :style="{ marginLeft: ml, padding: pd }">
    <image :src="props.iconOn" class="icon" v-if="props.isSelect && iconOn != ''"></image>
    <image :src="props.iconClose" class="icon" v-else-if="iconOn != ''"></image>
    <view class="name single-text-beyond" :class="{ color: props.isSelect }">{{ props.name }}</view>
    <view class="name right-text" :class="{ color: props.isSelect }">
      {{ text }}
      <image src="/static/equipmentImg/check.svg" class="select" v-if="props.isSelect"></image>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"

const props = defineProps({
  iconOn: { type: String, default: "" },
  iconClose: { type: String, default: "" },
  name: { type: String, default: "" },
  isSelect: { type: Boolean, default: false },
  isBorder: { type: Boolean, default: false },
  text: { type: String },
  ml: { type: String },
  pd: { type: String },
})
</script>

<style scoped lang="scss">
.line {
  border-top: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  box-sizing: border-box;
  .icon {
    width: 36rpx;
    height: 36rpx;
    flex-shrink: 0;
  }
  .name {
    max-width: 300rpx;
    color: #333333;
    font-size: 33rpx;
    line-height: 46rpx;
    flex-grow: 1;
    margin: 0 20rpx;
  }
  .right-text {
    text-align: right;
  }
  .select {
    width: 36rpx;
    height: 36rpx;
    flex-shrink: 0;
  }
}

.color {
  color: $primaryColor !important;
}

.border-none {
  border: none;
}
</style>
