<template>
  <view class='card-view' @click.stop='emits("onChecked",item)'>
    <view class='c-flex-row'>
      <text class='status' v-if='item?.defaultstatus==1'>默认</text>
      <text>
        {{ item?.name }}
      </text>
      <text>
        {{ item?.mobile }}
      </text>
    </view>
    <text class='address'>
      {{ item?.addr }}
    </text>

    <view class='btn-view c-flex-row'>
      <text @click.stop='emits("onEdit",item)'>编辑</text>
      <text @click.stop='emits("onDelete",item)'>删除</text>
    </view>
  </view>
</template>

<script lang='ts' setup>

import { PropType } from 'vue';

defineProps({
  item: Object as PropType<{ name: string, mobile: string, addr: string, defaultstatus: number }>
});
const emits = defineEmits(['onEdit', 'onDelete', 'onChecked']);

</script>

<style lang='scss' scoped>
.card-view {
  margin: 20rpx 30rpx;
  padding: 38rpx 30rpx 30rpx 34rpx;

  view:nth-of-type(1) {
    .status {
      border-radius: 5rpx;
      border: 1rpx solid #F32B2B;
      color: #F32B2B;
      font-size: 24prx;
      padding: 1rpx 8rpx;
    }

    text:nth-of-type(2) {
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 10rpx;
      color: #333333;
    }

    text:nth-of-type(3) {
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 20rpx;
      color: #333333;
    }
  }

  .address {
    font-size: 26rpx;
    font-weight: 400;
    margin-top: 10rpx;
    color: #999999;
  }

  .btn-view {
    display: flex;
    align-self: flex-end;
    align-items: center;

    text:nth-of-type(n+1) {
      display: flex;
      width: 84rpx;
      height: 48rpx;
      border-radius: 24rpx;
      border: 1rpx solid #F32B2B;
      align-items: center;
      justify-content: center;
      color: #F32B2B;
      margin-left: 20rpx;
    }

    text:nth-of-type(2) {
      border: 1rpx solid #DDDDDD;
      color: #666666;
    }
  }
}
</style>
