<template>
    <c-popup
        visibility-only-mask
        :show="show"
        :z-index="'921'"
        :show-close="true"
        :show-close-handler="false"
        max-height="80%"
        height="auto"
        :title="title"
        :title-style="{color: '#1f1f1f', fontSize: '0.18rem', lineHeight: '0.26rem'}"
        border-radius="12px"
        close-icon="close"
        class="rule-popup"
        stop-scroll-through
        @close="handlePopupClose('close')"
        @masktap="handlePopupClose('mask')"
    >
        <view class="express-textarea">
            <view class="textarea-box">
                <textarea
                    class="textarea-inner c-font-normal"
                    :value="value"
                    :maxlength="20"
                    cursor="-1"
                    :cursor-spacing="88"
                    :placeholder="'请输入物流公司的名称'"
                    placeholder-class="textarea-ph" 
                    selection-start="-1"
                    selection-end="-1"
                    :fixed="true"
                    :adjust-position="true"
                    :auto-focus="show"
                    :show-confirm-bar="false"
                    @input="onTextareaChange"
                ></textarea>
            </view>
            <view class="btn-wrapper c-gap-inner-bottom">
                <view class="btn c-font-15" @tap="onSubmit">提交</view>
            </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
    },
    components: {
        CPopup
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            'type': Boolean,
            'default': false
        },
        /**
         * 资质数据
         */
        data: {
            'type': Object,
            'default': () => {
                return {};
            }
        },
        /**
         * 标题
         */
        title: {
            'type': String,
            'default': '选择物流公司'
        }
    },
    data() {
        return {
            value: ''
        };
    },
    methods: {
        // 弹窗关闭
        handlePopupClose(type) {
            /**
             * 弹窗关闭
             */
            this.$emit('expressInputClose', {type});
        },
        // 文本域输入
        onTextareaChange(e) {
            this.value = e.detail.value;
        },
        // 提交
        onSubmit() {
            /** 提交 */
            this.$emit('onSubmit', {value: this.value});
            /** 弹窗关闭 */
            this.$emit('expressInputClose', {type: 'btn'});
        }
    }
};
</script>
<style lang="less" scoped>
.express-textarea {
    padding-top: 0.12rem;
    .textarea-inner {
        width: 100%;
        display: block;
        padding: 15px;
        height: 66px;
        border: none;
        resize: none;
        word-wrap: break-word;
        box-sizing: border-box;
        border-radius: 0.09rem;
        font-size: 15px;
        background-color: #f5f5f5;
        outline: none;
        line-height: 23px;
        color: #1f1f1f;
    }
    .textarea-ph {
        color: #b8b8b8;
    }
    .btn-wrapper {
        display: flex;
        justify-content: flex-end;
    }
    .btn {
        margin: 12px 0;
        width: 95px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        background: #FD503E;
        border-radius: 0.16rem;
        color: #fff;
    }
}

</style>
