<template>
    <view class="type-item">
        <view class="type-item-row c-gap-bottom">
            <view class="type-item-name">{{ data.type_name }}</view>
            <view class="c-font-small type-item-des">{{ data.desc }}</view>
        </view>
        <view v-if="packageList && packageList.length">
            <view class="pack-item" v-for="(item, index) in packageList">
                <c-navigate :url="item.url">
                    <view class="type-item-row pack-item-head">
                        <view class="c-font-normal pack-item-text">{{ item.name || item.title_name }}</view>
                        <view class="pack-item-price">
                            <text class="c-font-tiny">￥</text>
                            <text 
                                class="c-font-13"
                                :class="[
                                    env === 'swan' ? '' : 'num'
                                ]"
                            >  {{ item.price }} </text>
                        </view>
                    </view>
                    <view v-if="item.tags && item.tags.length">
                        <c-label
                            v-for="(t, i) in item.tags"
                            :text="t"
                            color="gray"
                            class="c-gap-right-small"
                        />
                    </view>
                </c-navigate>
            </view>
        </view>
        <list-loading
            v-show="loadStatus === 'loading'"
            :status="loadStatus"/>
        <view v-show="!noMore && data.nextPackageUrl" class="type-item-more" @tap="getMorePackage">
            <text>查看更多</text>
            <c-icon
                name="right"
                class="icon right-icon"
            />
        </view>
    </view>
</template>

<script>
/**
 * @file 体检类型卡片
 * @author zhanngqian51@baidu.com
 * @categories 业务组件
 * @tags [component]
 */

/* global Page swan  getApp */

import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CLabel from '@baidu/med-ui/components/Label/LabelOld';

import ListLoading from '../common/list-loading';
import CNavigate from '../common/navigate';

import {navigate, navToH5} from '../../utils/navigate';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import {request} from '../../utils/request';
import * as conf from '../../utils/conf';

export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        CLabel,
        CNavigate,
        ListLoading
    },
    props: {
        /**
        * 体检类型信息
        */
        data: {
            'type': Object,
            'default': {}
        },
        /**
        * 机构id
        */
        agencyId: {
            'type': String,
            'default': ''
        }
    },
    created() {
        const systemInfoSync = getSystemInfo();
        if (process.env.MARS_ENV === 'swan') {
            this.topHeight = systemInfoSync.statusBarHeight + systemInfoSync.navigationBarHeight;
        }
        else {
            this.topHeight = 44;
        }
        this.getFirstPackage();
    },
    data() {
        return {
            topHeight: 0,
            loadStatus: 'complete',
            noMore: false,
            requesting: false,
            packageList: this.data && this.data.list || [],
            env: process.env.MARS_ENV,
            api: this.data && this.data.nextPackageUrl || ''
        };
    },
    methods: {
        getFirstPackage() {
            if (!this.data.list || this.data.list.length === 0 && this.data.nextPackageUrl) {
                this.api = this.data.nextPackageUrl;
                this.getMorePackage();
            }
        },
        getMorePackage() {
            this.requesting = true;
            this.loadStatus = 'loading';
            request({
                url: conf.apiHost + this.api,
                method: 'GET',
                data: Object.assign({
                    storeid: this.agencyId
                }),
                isFirstScreen: true,
                isNeedLogin: false
            }).then(res => {
                let {data} = res;
                if (data && data.packageList && data.packageList.length > 0) {
                    this.packageList = this.packageList.concat(data.packageList);
                }
                if (data.nextPackageUrl) {
                    this.api = data.nextPackageUrl;
                } else {
                    this.noMore = true;
                }
                this.loadStatus = 'complete';
                this.requesting = false;
            })
            .catch(error => console.error(error));
        }
    }
};
</script>
<style lang="less" scoped>
.type-item {
    padding: 13px 17px 9px 14px;
    background: #ffffff;
    box-shadow: 0 10px 50px 0 rgba(0,0,0,0.06);
    border-radius: 8px;
    margin-top: 15px;
    &-row {
        display: flex;
    }
    &-name {
        font-family: PingFangSC-Medium;
        font-size: 17px;
        color: #333333;
        flex-shrink: 0;
    }
    &-des {
        color: #999999;
        margin-left: 10px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        position: relative;
        top: 2px;
    }
    &-more {
        text-align: center;
        color: #489AF6;
    }
}
.pack-item {
    background: #F8F8F8;
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 9px 17px 11px 14px;
    &-head {
        justify-content: space-between;
    }
    &-price {
        color: #ff6050;
        flex-shrink: 0;
        .num { 
            margin-left: -4px;
        }
    }
    .pack-tag {
        display: inline;
        border-radius: 8px;
        margin-right: 5px;
        padding: 0 5px;
        color: #999999;
        border: 1px solid #F1F1F1;
        border-radius: 8px;
    }
}
</style>


