<template>
    <div class="item-intro-container">
        <div class="basic-title">项目介绍</div>
        <div class="content">
            <div class="text">{{textContent}}</div>
            <div v-if="textContent.length > 70" class="desc" @click="allText">
                <span>{{btnText}}</span>
                <img v-if="!allTextFlag" src="../../images/down.png"/>
                <img v-if="allTextFlag" src="../../images/up.png"/>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        textContent: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            btnText: '详情',
            allTextFlag: false
        }
    },
    methods: {
        allText() {
            let _this = this;
            if(!_this.allTextFlag) {
                _this.btnText = '收起';
                _this.allTextFlag = true;
            }else {
                _this.btnText = '详情';
                _this.allTextFlag = false;
            }
            _this.$emit("itemIntroText", {allTextFlag: _this.allTextFlag});
        }
    }
}
</script>
<style lang="less" scoped>
.item-intro-container {
    padding-bottom: 20px;
    margin: 30px 15px 0px;
    border-bottom: 1px solid #E7E8E9;
    .basic-title {
        font-size: 18px;
        line-height: 18px;
        color: #373839;
        font-weight: 700;
    }
    .content {
        position: relative;
        margin-top:  16px;
        .text {
            font-size: 14px;
            line-height: 21px;
            color: #676869;
        }
        .desc {
            // position: absolute;
            // right: 0;
            // bottom: 1px;
            text-align: right;
            background: #fff;
            line-height: 14px;
            z-index: 99;
            span {
                font-size: 14px;
                line-height: 14px;
                color: #449284;
            }
            img {
                width: 12px;
            }
        }
    }
}
</style>
