<template>
    <div :class="classStr" hover="yCell_hover" @touchend="fnClick" @touchmove="fnTest">
        <div class="y_cell_title" v-if="isSlotTitle || title">
            <template v-if="isSlotTitle">
                <slot name="title"></slot>
            </template>
            <template v-else-if="title">
                <slot name="icon"></slot>
                <span class="y_cell_titleSpan">{{title}}</span>
                <i class="y_cell_require" v-if="isRequire">*</i>
            </template>
        </div>
        <div class="y_cell_content_wrap">
            <div class="y_cell_content" v-if="value">{{value}}</div>
            <div class="y_cell_content" v-else>
                <slot></slot>
            </div>
            <span class="y_cell_icon" v-if="isLink"></span>
            <slot name="rightIcon" v-else class="y_cell_iconWrap"></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "yCell",
        computed:{
            classStr(){
                let typeClass = "";
                if(this.type == "bodyMax"){
                    typeClass = "y_cell_bodyMax";
                }
                return "y_cell"+
                    (this.isRowSingle ? " y_cell_rowSingle" : "") +
                    (this.disPaddingHorizontal ? " y_cell_disPaddingHorizontal" : "") +
                    (this.isCellItem ? " y_cellGroup_item" : "") +
                    (this.topic == 'pet' ? " y_cell_pet" : "") +
                    (this.isBroke ? " y_cell_broke" : "") +
                    (this.topic == 'mini' ? " y_cell_mini" : "") +
                    (this.topic == 'petBig' ? " y_cell_petBig" : "") +
                    (this.customClass ? " "+this.customClass : "") +
                    (this.isLink ? " y_cell_link" : "") + " " + typeClass;
            },
            isSlot(){
                return !!(this.$slots && this.$slots.default);
            },
            isSlotRightIcon(){
                return !!(this.$slots && this.$slots.rightIcon);
            },
            isSlotTitle(){
                return !!((this.$slots && this.$slots.title) || this.slotTitle);
            },

            topic() {
                return this.cellTopic;
            }

        },
        data(){
            return {
                isCellItem:false,
                slotCellGroup:false,
                isBroke:false,
                cellTopic:false,
            }
        },
        inject:["yCellGroup"],
        methods:{
            fnTest(){
                this.isMove = true;
            },
            fnClick(e){
                if(!this.isMove){
                    if(!this.disableClick) {
                        this.$emit("click", "cell");
                    }
                }
                this.isMove = false;
            }
        },
        props:{
            customClass:{
                default:"",
                String,
            },//样式
            disableClick:Boolean,
            disPaddingHorizontal:Boolean,
            isLink:Boolean, //是否连接
            isRequire:Boolean,
            isRowSingle:Boolean,
            slotTitle:Boolean,
            title:"",//标题
            type:{
                default:"part"
            },
            value:"",//右边内容
        },
        beforeMount() {
            if(this.yCellGroup){
                this.isCellItem = !!this.yCellGroup;
                this.cellTopic = this.yCellGroup.topic;
                this.isBroke = !!this.yCellGroup.isBroke;
            }
            //console.log(this.yCellGroup);
        },
    }
</script>

<style lang="scss">
    @import "../css/var.scss";

    .y_cell{
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        padding: $cell_padding_vertical $cell_padding_horizantal;
        box-sizing: border-box;
        line-height: $cell_line_height;
        position: relative;
        background-color: $cell_bgColor;
        color: $font_color_contentMain;
        font-size: $cell_font_size;;
        overflow: hidden;

        &.y_cell_disPaddingHorizontal{
            padding: $cell_padding_vertical 0;
        }

        &.y_cellGroup_item{
            background-color: transparent;
        }

        //宠物主题
        &.y_cell_pet{
            padding: 9px 0 ;

            .y_cell_content{
                font-weight: bold;
            }

            .y_cell_title{
                width: 90px;
            }


            &:active,&.yCell_hover{
                background:none;
            }
        }

        //分行
        &.y_cell_broke{
            flex-direction: column;
            padding: 0 ;
            .y_cell_title{
                align-self: flex-start;
            }
            .y_cell_content{
                align-self: flex-start;

                width: 100%;
            }
        }

        //宠物大字体
        &.y_cell_petBig{
            font-size:$font_size_t4;
            .y_cell_title{
                line-height: 1;
                font-weight: bold;
            }
            .y_cell_content_wrap{
                margin-top: 6px;
                font-size:$font_size_t4;
                padding: 8px 15px;
                border-radius: 30px;
                background: $color_bg_default;
                .y_cell_content {
                    text-align: left;
                }
                &:active{
                    background:$cell_bgColor_active;
                }
            }
            .y_cell_content{
                font-weight: bold;
            }
            &:active,&.yCell_hover{
                background:none;
            }
        }

        &.y_cell_mini{
            padding: 3px 0 ;

            .y_cell_title{

                align-self: flex-start;
                flex:0 0 90px
            }
            .y_cell_content{
                font-weight: bold;
                text-align: left;
                color:$font_color_title;
            }


            &:active,&.yCell_hover{
                background:none;
            }
        }

    }

    .y_cell_bodyMax{
        &>.y_cell_title{
            width: 80px;
            flex:none;
            text-align: left;
            overflow: hidden;
        }
        .y_cell_content{
            text-align: left;
        }
    }
    .y_cell_rowSingle{
        .y_cell_title{
            height: $cell_line_height;
            @include text_clamp(1);
        }
    }
    .y_cell_link{
        transition:background .2s;
        &:active,&.yCell_hover{
            background:$cell_bgColor_active;
        }
    }
    .y_cell_title{
        display: flex;
        flex:1;
        text-align: left;
        line-height: $cell_line_height+2px;
        color:$font_color_title;
        align-self: center;
    }
    .y_cell_titleSpan{
        display: block;
    }

    .y_cell_require{
        color:$color_topic_main;
        font-weight: bold;
        align-self: center;
        font-size: $cell_font_size + 4px;
        margin-left: 2px;
        height: 10px;
        line-height: 1;
    }
    .y_cell_content_wrap{
        display: flex;
        flex: 1;
        justify-content: flex-end;
        align-items: center;
    }

    .y_cell_content{
        flex:1;
        color:$font_color_contentSecondeary;
        text-align: right;
        max-width:100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .y_cell_icon{
        height: 24px;
        min-width: 1em;
        font-size: $cell_font_size + 2px;
        line-height: 24px;
        color: $font_color_contentSecondeary;
        margin-left: 5px;
        &:before{
            font-family: "yesaway_ui";
            content:"\e62e";
        }
    }
    .y_cell_iconWrap{
        height: 24px;
        min-width: 1em;
        align-self: center;
    }
</style>
