<template>
	<!--SDK/weApp/sl-cell/index.wxml-->
	<view :class="isBorder?'isBorder cell':'cell'" @click="onCell(id)">
	    <view class="left">
	        <view class="leftIcon">
	            <slot name="leftIcon"></slot>
	        </view>
	        <view :style="titleStyle" class="title">{{title}}{{custom}}</view>
	        <view class="tips" v-if="tips">{{tips}}</view>
	        <view class="tipsIcon">
				<sl-icon :name="tipsIcon" size="24rpx" color="#54C9E8" @clcik="onTips"/>
			</view>
	    </view>
	    <view class="right">
	        <view class="text" :style="'color:'+color+';font-size:'+size">{{value}}</view>
	        <view class="icon" v-if="icon">
	            <sl-icon :name="icon" :color="color" :size="size"/>
	        </view>
	        <slot name="after"></slot>
	    </view>
	</view>
</template>

<script>
import slIcon from "@/sdk/sl-icon/index.vue"
export default {
	components:{
		slIcon
	},
	props: {
	    title:{
	      type:String,
	      default:""
	    },
	    value:{
	      type:String,
	      default:""
	    },
	    icon:{
	      type:String,
	      default:""
	    },
	    isBorder:{
	      type:Boolean,
	      default:false
	    },
	    isLink:{
	      type:Boolean,
	      default:false
	    },
	    to:{
	      type:String,
	      default:""
	    },
	    id:{
	      type:String,
	      default:''
	    },
	    color:{
	      type:String,
	      default:'#999'
	    },
	    size:{
	      type:String,
	      default:'26rpx'
	    },
	    tips:{
	      type:String,
	      default:''
	    },
	    tipsIcon:{
	      type:String,
	      default:""
	    },
		tipsContent:{
			type:String,
			default:""
		},
	    titleStyle:{
	      type:String,
	      default:""
	    },
		custom:{
			type:String,
			default:""
		}
	  },
	methods: {
	    onCell(id){
	      if(this.isLink){
	        uni.navigateTo({
	          url: `/${this.to}?id=${this.id}`,
	        })
	      }else{
	        this.$emit('onCell',id)
	      }
	    },
	    onTips(e){
	      this.$emit("onTips")
	    }
	  }
}
</script>

<style scoped lang="scss">
	.cell{
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 20rpx 0;
	    font-size: 30rpx;
	    // background: #fff;
	    .left{
	        color: #333;
	        display: flex;
	        align-items: center;
	        .tips{
	            color: #f97080;
	        }
	        .tipsIcon{
	            margin-left: 6rpx;
	        }
	    }
	    .right{
	        display: flex;
	        justify-content:flex-end;
	        align-items: center;
	        max-width: 70%;
	        .text{
	            font-size: 32rpx;
	            color: #999;
	        }
	    }
	}
	.isBorder{
	    border-bottom: 1px solid #eee;
	}
	.afterSlot{
	    display: flex;
	    justify-content: flex-end;
	}
	.leftIcon{
	    display: flex;
	    align-items: center;
	}
	.title{
		color: #1f1f1f;
		font-size: 26rpx;
	}
</style>