<template>
    <c-popup
        :show="show"
        :z-index="'921'"
        :show-close="true"
        :show-close-handler="false"
        max-height="80%"
        height="77.3%"
        :title="title"
        :title-style="{color: '#1f1f1f', fontSize: '0.18rem', lineHeight: '0.26rem'}"
        close-icon-size="0.22rem"
        border-radius="12px"
        close-icon="guanbi"
        class="rule-popup"
        stop-scroll-through
        @close="handlePopupClose('close')"
        @masktap="handlePopupClose('mask')"
    >
        <view class="express-box c-font-15">
            <view v-if="data && data.length" class="express-box__list">
                <view 
                    v-for="(item, index) in data"
                    :key="index"
                    class="express-box__list__item"
                >
                    <view class="express-box__list__item__index c-color-gray">{{ item.index }}</view>
                    <view class="express-box__list__item__values">
                        <template v-if="item.values && item.values.length">
                            <view 
                                v-for="(text, index) in item.values" 
                                :key="index" 
                                class="express-box__list__item__value c-color-title"
                                @tap="onItemTap(text)"
                            >{{ text }}</view>
                        </template>
                    </view>
                </view>
            </view>
        </view>
        <view class="blank swan-security-padding-bottom"/>
        <view class="express-other swan-security-padding-bottom">
            <view class="express-other__tips c-font-normal c-color-gray c-gap-bottom-small">如果无您选择物流公司，请选择</view>
            <view class="express-other__btn c-font-15" @tap="onOtherBtn">其他物流公司</view>
        </view>
    </c-popup>
</template>

<script>
/**
 * @file 物流选择popup
 * @author mayifan02@baidu.com
 * @categories 业务组件
 * @tags [component]
*/

/* global Page swan  getApp */
import CPopup from '@baidu/med-ui/components/Popup/Popup';

export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    options: {
        addGlobalClass: true,
    },
    components: {
        CPopup
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            'type': Boolean,
            'default': false
        },
        /**
         * 资质数据
         */
        data: {
            'type': Array,
            'default': () => {
                return [];
            }
        },
        /**
         * 标题
         */
        title: {
            'type': String,
            'default': '选择物流公司'
        }
    },
    data() {
        return {
            screenHeight: 0,
            maxHeight: 0
        };
    },
    methods: {
        // 输入其他物流
        onOtherBtn() {
            this.$emit('onOtherExpress');
        },
        // 物流点击
        onItemTap(value) {
            this.$emit('onSubmit', {value});
            this.$emit('expressSelectClose', {type: 'btn'});
        },
        // 弹窗关闭
        handlePopupClose(type) {
            this.$emit('expressSelectClose', {type});
        }
    }
};
</script>
<style lang="less" scoped>
.express-box {
     -webkit-overflow-scrolling: touch;   /*这句是为了滑动更顺畅*/
    &__list {
        padding-top: 0.08rem;
        &__item {
            display: flex;
            
            &__index {
                width: 0.15rem;
                text-align: left;
                margin-right: 0.07rem;
            }
            &__values {
                flex: 1;
            }
            &__value {
                margin-bottom: 0.21rem;
            }
        }
    }
}
.express-other {
    // padding: 0 0.17rem;
    z-index: 2000;
    position: fixed;
    bottom: 0;
    left: 0.17rem;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;   /*这句是为了滑动更顺畅*/
    &::after {
        content: '';
        position: absolute;
        background-color: #e0e0e0;
        display: block;
        width: 100vw;
        height: 1px; /*no*/
        transform: scale(1, 0.5);
        left: -0.17rem;
        top: 0;
    }
    &__tips {
        padding-top: 0.08rem;
    }
    &__btn {
        display: inline-block;
        border: 1px solid #ff3333;
        border-radius: 0.16rem;
        padding: 0 0.17rem;
        line-height: 0.32rem;
        height: 0.32rem;
        color: #FD503E;
        box-sizing: border-box;
        margin-bottom: 0.12rem;
    }
}
    .blank {
        height: 0.79rem;
    }
</style>
