<!--
  组件功能： 卡片布局
   标题， 副标题， 和编辑按钮及插槽。 
  注意： 不包含 中间的内容
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/12/06 08:06
-->
<template>
	<view class="c-card-wrapper" :style="props.viewStyle">
		
	  <view v-if="props.title" class="card-title" :class="{'border-none':!isTitleBorder}" @tap="emits('clickTitle')">
	    <view class="c-card-title"> {{ props.title }} <view><slot name="titleRight"/> </view> </view>
	    <view class="sub-title" v-if="props.subtitle">{{ props.subtitle }}</view>
	  </view>
	  <!-- 默认插槽位置 -->
	  <slot></slot>

	  <!--  编辑区域 -->
	  <slot name="editContent">
		  <view v-if="props.editText" class="card-edit flex-center" hover-class="touch-hover" @tap="emits('editTap')">
			<image src="/pageDevice/static/devIconImg/icon-edit.svg" mode="scaleToFill" /> {{ props.editText }}
		  </view>
	  </slot>
	  
	</view>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from 'vue'

const emits = defineEmits(['editTap','clickTitle'])

const props = defineProps({
	
  viewStyle: { type: [String, Object] }, 	 // 样式透传， 小程序不支持再组件上加style(不生效)
	
  title: { type: String }, //标题文字 传值则显示
  
  subtitle: { type: String }, //副标题
  
  editText: { type: String }, // 编辑文本, 若存在请通过 editTap 事件接收点击事件。 
  isTitleBorder:{type:Boolean, default:true} //是否存在标题下边框
  
})

</script>

<style lang="scss" scoped>
.c-card-wrapper {
  margin: 0 35rpx;
  border-radius: 32rpx;
  background-color: #fff;
  overflow: hidden;
  .card-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30rpx 40rpx;
    min-height: 42rpx;
    font-size: 32rpx;
    font-weight: 500;
    border-bottom: 1rpx solid #ededed;
    .c-card-title{
      display: flex;
      justify-content: space-between;
    }
    .sub-title {
      margin-top: 15rpx;
      font-size: 25rpx;
      color: #808080;
    }
  }
  .card-edit {
    height: 110rpx;
    border-top: 1rpx solid #ededed;
    color: #2980fd;
    font-size: 33rpx;
    font-weight: 400;
    image {
      width: 44rpx;
      height: 44rpx;
      margin-right: 10rpx;
    }
  }
}
.border-none{
  border: none !important;
}
</style>
