<template>
  <view class="customer_create_card" :style="props?.styles">
    <view class="customer_create_card_label">
      <wl-cell-title :label="props?.label" />
      <text v-if="props?.subTitle">
        {{ props?.subTitle }}
      </text>
    </view>
    <view v-if="props?.showBtn" class="customer_create_card_add" @click="handleClick">
      {{ props?.btnLabel || '添加' }}
    </view>
  </view>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { goto } from '@/common/libraries/naviHelper'
const props = defineProps(['label', 'subTitle', 'showBtn', 'btnLabel', 'url', 'styles'])
const emit = defineEmits(['handleClick'])
const handleClick = () => {
  if (props?.url) {
    goto(props?.url)
  } else {
    emit('handleClick')
  }
}
</script>
<style lang="scss" scoped>
.customer_create_card {
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &_add {
    font-size: 28rpx;
    padding: 10rpx 20rpx;
    border-radius: 4rpx;
    border: 2rpx solid #fba60d;
    color: #fba60d;
  }
  .customer_create_card_label {
    flex: 1;
    display: flex;
    align-items: center;
  }
  text {
    font-weight: 400;
    font-size: 24rpx;
    color: #999;
    padding: 0 10rpx;
  }
}
</style>
