<template>
    <view>
        <view class="list-text-title">
            <view :style="{color:item.title.color}">{{item.title.text}}</view>
            <view v-if="item.title.rightlinktext" @tap="rightLinkTap(item)">
                {{item.title.rightlinktext}}
                <c-icon name="right" font-size="18px"/>
            </view>
        </view>
        <view class="list-content-wrap">
            <view v-if="item.desc" class="desc-content">{{item.desc}}</view>
            <view v-for="(drug,index) in item.detail" class="c-flex-between">
                <view class="left-content">
                    <text class="c-gap-right-small">{{drug.drugname}}</text>
                    <text>{{drug.size}}</text>
                </view>
                <view class="right-content">{{drug.number}}</view>
            </view>
        </view>
    </view>
</template>
<script>
/**
 * @file text-list
 * @author huanghongwei
 * @categories 业务组件
 * @tags [component]
 */
import Icon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '../../utils/navigate';
export default {
    config: {
        component: true
    },
    components: {
        'CIcon': Icon
    },
    props: {
        /**
        * 组件数据
        */
        item: {
            'type': Object,
            'default': {}
        }
    },
    data() {
        return {
            list: []
        };
    },
    lifetimes: {
        attached() {}
    },
    methods: {
        rightLinkTap(item) {
            if (item.title && item.title.righturl) {
                navigate({
                    url: item.title.righturl
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.list-text-title {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
}
.list-content-wrap {
    padding: 10px 12px;
    background: #ffffff;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 24px;
}
.c-flex-between {
    display: flex;
    justify-content: space-between;
}
.left-content {
    max-width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>