<template>
    <view
        class="ip"
        :class="[isFocus && needPh ? 'ip-focus-pad' : 'ip-pad', hideBorderTop ? 'hide-border-top' : '']"
    >
        <!-- 历史主诉 -->
        <view v-if="isShowHistory" class="triage-voice-btn-wrap">
            <view
                class="triage-voice-btn"
                :class="isExpHistory ? 'c-color-green' : 'c-color'"
                @tap="onTapHistory"
            >
                <text class="c-inline m-icon m-icon-r-list" style="font-size: 22px"/>
            </view>
        </view>
        <view
            v-if="isTextareaPopup"
            class="ip-wrap"
            @tap="onTapInput"
        >
            <span
                class="ip-inner"
                :class="isEnable && val ? 'c-color' : 'ip-disabled'"
            >{{ val || placeholder }}</span>
        </view>
        <view
            v-else
            class="ip-textarea-wrap"
        >
            <textarea
                ref="comptextarea"
                :value="val"
                :maxlength="maxLen"
                :disabled="!isEnable"
                :placeholder="placeholder"
                class="ip-inner-textarea"
                :primary-color="primaryColor"
                @focus="onFocus"
                @blur="onPopupBlur"
                @input="onInput"
            ></textarea>
            <view class="ip-inner-ph">
                {{ val || placeholder }}
            </view>
        </view>
        <popup-textarea
            v-if="isTextareaPopup"
            ref="popupTextarea"
            class="ip-popup"
            :show="isShowPopup"
            :value="val"
            :primary-color="primaryColor"
            @blur="onPopupBlur"
            @change="onPopupChange"
            @close="onPopupClose"
            @confirm="onPopupConfirm"
            @tapMask="onTapMask"
        />
        <c-icon
            v-if="isShowPic"
            :class="!isEnable ? 'icon-disabled' : ''"
            name="img-circle"
            font-size="22px"
            class="c-gap-left-large c-color ip-btn-icon"
            @tap="onTapImg(isEnable)"
        />
        <c-icon
            v-if="isExpEnable && val.length === 0"
            name="tianjia"
            font-size="22px"
            class="c-gap-left-large c-color-title ip-btn-icon"
            @tap="onTapPlus"
        />
        <c-icon
            v-if="!isExpEnable && isToolMulti && val.length === 0"
            name="tianjia"
            font-size="22px"
            class="c-gap-left-large c-color-title ip-btn-icon"
            :style="{
                'color': isShowMultiCol ? '#00C8C8' : '#1f1f1f',
            }"
            @tap="toggleMulti"
        />
        <view
            v-if="(!isExpEnable && !isToolMulti) || val.length > 0"
            class="ip-btn c-span-middle c-gap-left"
            :class="val.length === 0 ? 'ip-btn-disable' : ''"
            :style="{'background-color': primaryColor}"
            @tap="onSend"
        >发送</view>
    </view>
</template>

<script>
/**
* @file 问诊-H5输入框
* @author haoyan
* @categories 业务组件
* @tags [component]
*/
import PopupTextarea from './popup-textarea';
import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    props: {
        // 输入框值
        value: {
            'type': String,
            'default': ''
        },
        // 工具栏是否可用
        isExpEnable: {
            'type': Boolean,
            'default': true
        },
        // 是否展开多层工具栏(颜色切换)
        isShowMultiCol: {
            'type': Boolean,
            'default': true
        },
        // 工具栏是否大于1层
        isToolMulti: {
            'type': Boolean,
            'default': false
        },
        // 是否显示图片icon
        isShowPic: {
            'type': Boolean,
            'default': false
        },
        // 是否展开历史主诉
        isExpHistory: {
            'type': Boolean,
            'default': false
        },
        // 是否显示历史主诉icon
        isShowHistory: {
            'type': Boolean,
            'default': false
        },
        // placeholder
        placeholder: {
            'type': String,
            'default': ''
        },
        // 输入框是否可用
        isEnable: {
            'type': Boolean,
            'default': true
        },
        // 主题色
        primaryColor: {
            'type': String,
            'default': '#00c8c8'
        },
        // 默认，输入框是弹层
        isTextareaPopup: {
            'type': Boolean,
            'default': true
        },
        // 顶部操作
        handleBtns: {
            type: Array
        },
        // 最大输入
        maxLen: {
            type: Number
        },
        // 隐藏顶部边框
        hideBorderTop: {
            type: Boolean,
            default: false
        },
        // 发送文字最小长度
        minInputLen: {
            'type': Number,
            'default': 0
        }
    },
    data() {
        return {
            val: this.value,
            isShowPopup: false,
            isFocus: false,
            needPh: false
        };
    },
    watch: {
        value(v) {
            this.val = v;
        },
        isEnable(v) {
            if (!v) {
                // 关闭弹起的popup
                this.isShowPopup = false;
            }
        }
    },
    components: {
        PopupTextarea,
        CIcon
    },
    lifetimes: {
        attached() {
            // ios uc浏览器高度塌陷
            if (process.env.MARS_ENV === 'h5') {
                const UA = require('@searchfe/user-agent');
                if (!this.isTextareaPopup && UA && UA.isIOS() && UA.isUC()) {
                    this.needPh = true;
                }
            }
        },
        ready() {
            if (this.isPC()) {
                let textarea = this.getTextareaDom();
                // 监听回车发送信息
                textarea.addEventListener('keyup', (e) => {
                    if (e.keyCode === 13) {
                        e.preventDefault();
                        this.onSend();
                    }
                });
            }
        }
    },
    methods: {
        // 点击历史主诉
        onTapHistory() {
            // 点击历史主诉icon
            this.$emit('tapHistory', this.isExpHistory);
        },
        // 点击[+]按钮
        onTapPlus() {
            // 展开工具栏
            this.$emit('expand');
        },
        onTapImg(isEnable) {
            if (!isEnable) {
                return;
            }
            // 点击上传图片
            this.$emit('uploadImg');
        },
        // 点击输入框
        onTapInput() {
            if (!this.isEnable) {
                return;
            }
            // 输入框结构变化
            this.$emit('styChange', {
                pos: 'bottom',
                sty: {
                    position: 'static'
                }
            });
            this.isShowPopup = true;

            // popup focus
            setTimeout(() => {
                const textarea = this.$refs.popupTextarea.$el.querySelector('textarea');
                textarea.focus();
            }, 100);
        },
        // popup输入框失去焦点
        onPopupBlur() {
            // popup输入框失去焦点
            this.isFocus = false;
            this.$emit('blur');
        },
        // popup输入框值变更
        onPopupChange(info) {
            this.val = info.value;
            // popup输入框值变更
            this.$emit('input', this.val);
        },
        onInput(e) {
            this.val = e.target.value;
            // popup输入框值变更
            this.$emit('input', this.val);
        },
        // 点击popup输入框[取消]按钮
        onPopupClose() {
            // 点击popup输入框[取消]按钮
            this.$emit('cancel', this.val);
            this.closePopup();
        },
        // 点击popup输入框[确认]按钮
        onPopupConfirm(info) {
            // 点击popup输入框[确认]按钮
            this.$emit('send', info.value);
            this.val = '';
            this.closePopup();
        },
        // 点击popup蒙层
        onTapMask() {
            // 点击popup蒙层
            this.$emit('cancel', this.val);
            this.closePopup();
        },
        closePopup() {
            // 输入框结构变化
            this.$emit('styChange', {
                pos: 'bottom',
                sty: {}
            });
            this.isShowPopup = false;
        },
        // 点击输入框确认
        onSend() {
            if (this.minInputLen && (this.onTrim(this.val).length < this.minInputLen)){
                this.$api.showToast({
                    title: `请输入${this.minInputLen}个字以上`,
                    icon: 'none'
                });
                return;
            }
            // 点击输入框确认
            this.$emit('send', this.val);
            this.val = '';
        },
        // 正则去掉左右空格
        onTrim(s){
            return s.replace(/(^\s*)|(\s*$)/g, '');
        },
        toggleMulti() {
            // 切换展示多行工具栏
            this.$emit('togglemulti');
        },
        onFocus(e) {
            this.isFocus = true;
            this.$emit('focus', e);
        },
        getTextareaDom() {
            return this.$refs.comptextarea && this.$refs.comptextarea.$el;
        },
        // 是否为PC端
        isPC() {
            if (process.env.MARS_ENV !== 'swan') {
                let ua = ((navigator || {}).userAgent || '').toLowerCase();
                let Agents = ['android', 'iphone', 'symbianos', 'windows phone', 'ipad', 'ipod'];
                let flag = true;
                for (let i = 0; i < Agents.length; i++) {
                    if (ua.indexOf(Agents[i]) > 0) {
                        flag = false;
                        break;
                    }
                }
                return flag;
            }
            return false;
        }
    }
};
</script>

<style lang="less" scoped>
.ip {
    display: flex;
    width: 100%;
    align-items: center;
    background-color: #fff;
    border-top: 1px solid #f6f6f6;
    box-sizing: border-box;
}
.hide-border-top {
    border-top: none;
}
.ip-pad {
    padding: 8px 17px;
}
.ip-focus-pad {
    padding: 8px 17px 0;
}
.ip-container {
    flex: 1;
}
.ip-wrap {
    flex: 1;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    border-radius: 19px;
    background: #f1f1f1;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    border: 1px solid #f2f2f2;
}
.ip-disabled {
    color: #ccc;
}
.ip-btn {
    padding: 0 17px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    height: 35px;
    line-height: 35px;
    border-radius: .09rem;
}
.ip-btn-icon {
    line-height: 1;
}
.ip-btn-disable {
    opacity: .5;
}
.ip-popup {
    position: absolute;
}
.icon-disabled {
    color: #ccc;
}
.ip-inner {
    font-size: 16px;
}
.triage-voice-btn-wrap {
    display: flex;
    flex-direction: column;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    justify-content: center;
}
.triage-voice-btn {
    width: 22px;
    height: 22px;
    // border: 1px solid;
    // border-radius: 50%;
    text-align: center;
    margin-right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ip-textarea-wrap {
    position: relative;
    flex: 1;
    line-height: 0;
    border-radius: 20px;
    background: #f1f1f1;
    box-sizing: border-box;
    overflow: hidden;
    color: #333;
    font-size: 16px;
}
.ip-inner-textarea {
    flex: 1;
    display: inline-block;
    overflow: scroll;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: calc(100% - 30px);
    height: calc(100% - 15px);
    vertical-align: middle;
    word-break: normal;
    outline: 0;
    background-color: #f1f1f1;
    -webkit-appearance: none;
    resize: none;
    border: none;
    position: absolute;
    line-height: 26px;
    margin: 7.5px 15px;
    &::-webkit-scrollbar {
        display: none;
    }
}
textarea::-webkit-input-placeholder{
    color: #cccccc;
}
.ip-inner-ph {
    min-height: 20px;
    max-height: 60px;
    line-height: 26px;
    margin: 7.5px 15px;
    visibility: hidden;
}
</style>
