<template>
    <c-popup
        :show="show"
        :z-index="'921'"
        height="5.65rem"
        :title="'可接种机构 (' + total + ')'"
        :show-close="infoType === 'vacc' ? true : false"
        row-tile
        border-radius="12px"
        class="rule-popup"
        visibility-only-mask
        :btns="btns"
        @close="handlePopupClose"
        @masktap="handlePopupClose"
    >
        <view class="agency-popup">
            <view :class="infoType != 'vacc' ? 'agency-popup-head' : ''">
                <view v-if="infoType != 'vacc'" class="agency-popup-row">
                    <view class="text">
                        <text v-if="from === 'agency'">以下共有{{ listLen }}家体检门店供您选择</text>
                        <text v-else>该体检套餐，适用于以下{{ listLen }}家体检门店</text>
                    </view>
                    <view class="close-wrapper" @tap="handlePopupClose">
                        <c-icon
                            name="close-circle"
                            :style="{
                                color: '#666',
                            }"
                            class="close"
                        />
                    </view>
                </view>
            </view>
            <scroll-view
                scroll-y
                class="scroll-view"
                :style="{'max-height': maxHeight + 'px', 'margin-top': infoType != 'vacc' ? '60px' : 0}"
                @scrolltolower="scrollEvent"
            >
                <view
                    v-for="(item , idx) in mapList"
                    :key="idx"
                    class="agency-info"
                    @tap.stop="tapAgencyItem(item)"
                >
                    <view class="agency-info-logo">
                        <c-image
                            has-compress
                            :src="item.logo"
                            :extra="{column: 2}"
                            width="0.48rem"
                            height="0.48rem"
                            :hack-white-stroke="false"
                            :is-round="false"
                            radius="0.24rem"
                        />
                    </view>
                    <view class="agency-info-right">
                        <view class="agency-info-name">{{ item.name }}</view>
                        <view
                            v-if="item.tags && item.tags.length"
                            class="hosp-tag-wrapper"
                        >
                            <c-label
                                v-for="(t, i) in item.tags"
                                :key="i"
                                :text="t"
                                color="gray"
                                class="c-gap-right-small"
                            />
                        </view>
                        <view class="agency-info-address">
                            <text class="flex-grow-1">{{ item.address }}</text>
                            <text
                                v-if="item.distance"
                                class="line"
                            >|</text>
                            <text
                                v-if="item.distance"
                                class="flex-shrink-0"
                            >
                                距您{{ item.distance }}
                            </text>
                        </view>
                    </view>
                </view>
                <list-loading
                    bg-color="transparent"
                    :status="status"
                    class="c-gap-top c-blocka"
                />
            </scroll-view>
        </view>
    </c-popup>
</template>

<script>
/**
 * @file 更多门店popup
 * @author zhanngqian51@baidu.com
 * @categories 业务组件
 * @tags [component]
 */

/* global Page swan  getApp */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CLabel from '@baidu/med-ui/components/Label/LabelOld';
import CImage from '@components/common/image';

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

import {navigate} from '../../utils/navigate';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import * as conf from '../../utils/conf';
import {request} from '../../utils/request';
export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    components: {
        CIcon,
        CPopup,
        CLabel,
        ListLoading,
        CImage
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            'type': Boolean,
            'default': false
        },
        /**
         * 机构数据
         */
        list: {
            'type': Array,
            'default': () => {
                return [];
            }
        },
        /**
         * 机构总数
         */
        total: {
            'type': Number,
            'default': 0
        },
        /**
         * 异步接口
         */
        nextUrl: {
            'type': String,
            'default': ''
        },
        /**
         * 是否切换机构，默认否
         */
        hasTap: {
            'type': Boolean,
            'default': false
        },
        /**
         * 点击来源
         */
        from: {
            'type': String,
            'default': 'package'
        },
        /**
         * 服务类别：体检-exam 疫苗-vacc
         */
        infoType: {
            'type': String,
            'default': ''
        }
    },
    data() {
        return {
            env: 'swan',
            mapList: this.list || [],
            listLen: this.total || (this.list && this.list.length) || 0,
            next: this.nextUrl || '',
            status: 'init',
            screenHeight: 0,
            maxHeight: 0,
            btns: [{
                text: '确认',
                type: 'primary',
                color: '#FD503E'
            }]
        };
    },
    created() {
        this.env = process.env.MARS_ENV;
        const systemInfoSync = getSystemInfo();
        this.screenHeight = systemInfoSync.screenHeight;
        if (process.env.MARS_ENV === 'h5') {
            this.maxHeight = (this.screenHeight - 74) * 0.85 - 60;
        } else {
            this.maxHeight = this.screenHeight * 0.85 - 60;
        }
    },
    watch: {
        list(newVal) {
            this.mapList = newVal;
            this.listLen = this.total ? this.total : newVal && newVal.length;
        },
        total(newVal) {
            this.total = newVal;
        },
        nextUrl(newVal) {
            this.next = newVal;
        }
    },
    methods: {
        handlePopupClose() {
            /**
             * 关闭弹窗
             *
             * @event close
             */
            this.$emit('onClose');
        },
        tapAgencyItem(item) {
            if (this.infoType !== 'exam') {
                return;
            }
            if (this.hasTap) {
                /**
                 * 点击机构
                 *
                 * @event click
                 */
                this.$emit('tapItem', item);
            }
            else {
                navigate({
                    url: item.url
                });
            }
            this.handlePopupClose();
        },
        onLoadMore() {
            this.status = 'loading';
            request({
                url: conf.apiHost + this.next,
                method: 'GET',
                isFirstScreen: true,
                isNeedLogin: false
            })
                .then(({data, update}) => {
                    if (data.agencyList && data.agencyList.length) {
                        this.mapList = this.mapList.concat(data.agencyList);
                    }
                    if (data.agencyNextUrl) {
                        this.next = data.agencyNextUrl;
                        this.status = 'init';
                    } else {
                        this.next = '';
                        this.status = 'complete';
                    }
                })
                .catch(error => {
                    this.status = 'fail';
                    console.error(error);
                });
        },
        scrollEvent(e) {
            if (this.status === 'complete') {
                return;
            }
            this.next && (this.status === 'init') && this.onLoadMore();
        }
    }
};
</script>
<style lang="less" scoped>
.agency-popup {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;

    &-head {
        width: 100%;
        height: 60px;
        position: absolute;
        top: 0;
        background: #fff;
        z-index: 922;

        .close-wrapper {
            width: 32px;
            height: 32px;
            // text-align: center;
        }
    }

    &-title-row {
        position: relative;

        .title {
            font-family: PingFangSC-Medium;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .close-wrapper {
            float: right;
        }
    }

    &-row {
        width: calc(100% - 17px);
        padding-left: 17px;
        display: flex;
        justify-content: space-between;
        margin-top: 12px;

        .text {
            color: #999;
        }
    }
}

.scroll-view {
    height: 100%;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
    }
}

.agency-info {
    box-sizing: border-box;
    margin-bottom: 15px;
    padding: 13px 15px 11px 15px;
    display: flex;
    border-radius: 8px;
    width: calc(100% - 34px);
    margin-left: 17px;
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.06);

    &-logo {
        width: .48rem;
        height: .48rem;
        border-radius: .24rem;
        margin-right: 10px;
        flex-shrink: 0;
    }

    &-name {
        font-size: 17px;
        color: #333;
        margin-bottom: 6px;
    }

    &-address {
        font-size: 13px;
        color: #555;
        margin-top: 6px;
        display: flex;

        .line {
            opacity: 0.3;
            color: #999;
            margin: 0 10px;
        }
    }
}

.hosp-tag {
    border-radius: 8px;
    margin-right: 5px;
    padding: 0 5px;
    color: #999;
    border: 1px solid rgba(153, 153, 153, 0.20);
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}
</style>
