<template>
    <view
        :class="env === 'swan' && !isFocus ? 'swan-security-padding-bottom ip-swan-security' : ''"
        @touchmove="onTouch"
    >
        <view v-if="!item.inputHidden">
            <!-- 小程序输入框 -->
            <template-mars target="swan">
                <!-- 商城 & 疫苗 im-input顶部操作按钮 -->
                <view v-if="handleBtns && handleBtns.length" class="btns c-font-13 c-color-title">
                    <view
                        v-for="item, index in handleBtns"
                        :key="index"
                        class="btns-btn"
                    >
                        <c-icon
                            v-if="!item.icon || (item.icon && item.icon !== 'none')"
                            :name="item.icon || 'pingjiayisheng'"
                            font-size="0.13rem"
                            class="btn-evaluation"
                        />
                        <text
                            @tap.stop="$emit('btnTap', item, index)"
                        >{{ item.text }}</text>
                    </view>
                </view>
                <input-swan
                    v-show="inputShow"
                    :hide-border-top="!!(handleBtns && handleBtns.length)"
                    :handle-btns="handleBtns"
                    :value="val"
                    :adjust-position="adjustPosition"
                    :is-exp-enable="tools && tools.length > 0 && isShowBoxExp"
                    :placeholder="item.placeholder"
                    :is-enable="isEnable"
                    :primary-color="primaryColor"
                    :is-show-pic="isShowPic"
                    :is-show-voice="isShowVoice"
                    :is-show-history="isShowHistory"
                    :is-exp-history="isExpHistory"
                    :is-show-multi-col="isShowMultiCol"
                    :is-tool-multi="isToolMulti"
                    :max-len="item.maxLen"
                    :min-input-len="item.minInputLen || 0"
                    :with-use-push="withUsePush"
                    :subscribe-params="subscribeParams"
                    @input="onInput"
                    @expand="onExpand"
                    @uploadImg="onUploadImg"
                    @send="onSend"
                    @sendFormId="onSendFormId"
                    @focus="onFocus"
                    @blur="onBlur"
                    @voicePopup="showVoicePopup"
                    @tapHistory="onTapHistory"
                    @togglemulti="toggleMulti"
                    @btnTap="btnTap"
                    @lineChange="$emit('lineChange', e)"
                />
                <!--<view class="swan-security-padding-bottom ip-swan-security"></view>-->
            </template-mars>
            <!-- H5输入框 -->
            <template-mars target="h5">
                <!-- 商城 & 疫苗 im-input顶部操作按钮 -->
                <view v-if="handleBtns && handleBtns.length" class="btns c-font-13 c-color-title">
                    <view
                        v-for="item, index in handleBtns"
                        :key="index"
                        class="btns-btn"
                    >
                        <c-icon
                            v-if="!item.icon || (item.icon && item.icon !== 'none')"
                            :name="item.icon || 'pingjiayisheng'"
                            font-size="0.13rem"
                            class="btn-evaluation"
                        />
                        <text
                            @tap.stop="$emit('btnTap', item, index)"
                        >{{ item.text }}</text>
                    </view>
                </view>
                <input-h5
                    ref="inputh5"
                    :hide-border-top="!!(handleBtns && handleBtns.length)"
                    :handle-btns="handleBtns"
                    :value="val"
                    :is-exp-enable="tools && tools.length > 0 && isShowBoxExp"
                    :placeholder="item.placeholder"
                    :is-enable="isEnable"
                    :is-show-pic="isShowPic"
                    :is-show-history="isShowHistory"
                    :is-exp-history="isExpHistory"
                    :is-show-multi-col="isShowMultiCol"
                    :is-tool-multi="isToolMulti"
                    :is-textarea-popup="isTextareaPopup"
                    :primary-color="primaryColor"
                    :max-len="item.maxLen"
                    :min-input-len="item.minInputLen || 0"
                    @styChange="onStyChange"
                    @input="onInput"
                    @expand="onExpand"
                    @uploadImg="onUploadImg"
                    @send="onSend"
                    @focus="onFocus"
                    @cancel="onCancel"
                    @blur="onBlur"
                    @tapHistory="onTapHistory"
                    @togglemulti="toggleMulti"
                    @btnTap="btnTap"
                />
            </template-mars>
        </view>
        <!-- 折叠层 -->
        <view
            v-if="isExp"
            class="ip-exp"
        >
            <!-- 新版折叠层 -->
            <view
                v-if="item.box2 && item.box2.length"
                class="c-gap-inner-bottom-small c-gap-inner-top-small c-flexbox"
            >
                <view :class="['ipt-tools-wrap', isShowMultiCol ? '' : 'ipt-tools-line']">
                    <view
                        v-for="(row, i) in tools"
                        :key="i"
                        class="c-flexbox c-gap-bottom-large"
                    >
                        <view
                            v-for="(col, j) in row"
                            :key="j"
                            class="c-span3 ip-exp-item"
                            :class="{'disabled-tools': !isEnable
                                && col.info
                                && (col.info.type == 'uploadpic' || col.info.type == 'voice')
                            }"
                            @tap="onTapTool(col.info, j)"
                        >
                            <view
                                v-if="col !== 'empty'"
                                :style="{
                                    'color': col.isExp ? primaryColor : '#1f1f1f',
                                }"
                            >
                                <view
                                    class="med-icon c-font-medium c-inline-block"
                                    :class="'med-icon-' + col.icon"
                                />
                                <text class="c-font-normal c-gap-left-small c-inline-block">{{ col.txt }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view
                v-else-if="item.box && item.box.length"
                class="c-gap-inner-bottom-xmiddle"
            >
                <view
                    v-for="(row, i) in tools"
                    :key="i"
                    class="c-flexbox"
                >
                    <view
                        v-for="(col, j) in row"
                        :key="j"
                        class="c-span3 ip-exp-item"
                        :class="{'disabled-tools': !isEnable
                            && col.info
                            && (col.info.type == 'uploadpic' || col.info.type == 'voice')
                        }"
                        @tap="onTapTool(col.info, j)"
                    >
                        <view v-if="col !== 'empty'">
                            <view class="ip-exp-icon">
                                <view
                                    v-if="col.micon"
                                    class="ip-exp-ic med-icon"
                                    :class="'med-icon-' + col.micon"
                                />
                                <c-icon
                                    v-else
                                    :name="col.icon"
                                    font-size="25px"
                                    class="ip-exp-ic"
                                />
                            </view>
                            <view class="ip-exp-txt c-font-13">{{ col.txt }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 语音转文字 -->
        <template-mars target="swan">
            <voice-popup
                v-if="isExpVoice"
                :voice-value="voiceValue"
                @voiceSend="voiceSend"
                @voiceStart="voiceStart"
                @recognizeVoice="voiceRecognize"
                @clearVoice="clearVoiceContent"
                @closeVoice="closeVoice"
            />
        </template-mars>
        <!-- 历史主诉 -->
        <wz-history
            v-if="isExpHistory"
            @tapItem="onTapHistoryItem"
        />
        <view
            v-if="needPh"
            :style="{
                'height': isFocus ? '20px' : '0px',
            }"
            class="input-bottom-ph"
        />
    </view>
</template>

<script>
/**
* @file 问诊-输入框
* @author haoyan
* @categories 业务组件
* @tags [component]
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import InputH5 from './im-input-h5';
import InputSwan from './im-input-swan';
import VoicePopup from '../../wz/voice-popup';
import WzHistory from '../../wz/WzHistory';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import {upload} from '../../../utils/upload';
import {contentType, answerType} from '../../../utils/constant';
import {send, ubcSend} from '../../../utils/log';
import * as core from '../../../utils/core';

export default {
    options: {
        addGlobalClass: true
    },
    config: {
        component: true
    },
    props: {
        // 输入框中值
        value: {
            'type': String,
            'default': ''
        },
        // 输入框展开方式
        adjustPosition: {
            'type': Boolean,
            'default': true
        },
        // 输入框结构对象
        item: {
            'type': Object,
            'default': () => {
                return {
                    placeholder: '',
                    box: []
                };
            }
        },
        // 是否显示输入框工具栏展开按钮
        isShowBoxExp: {
            'type': Boolean,
            'default': true
        },
        // 是否展开输入框工具栏
        isBoxExp: {
            'type': Boolean,
            'default': false
        },
        // 输入框主题色
        primaryColor: {
            'type': String,
            'default': '#00c8c8'
        },
        // h5输入框是否是弹层
        isTextareaPopup: {
            'type': Boolean,
            'default': true
        },
        // 隐藏上传图片icon
        hidePicIcon: {
            'type': Boolean,
            'default': false
        },
        // 扩展添加im-push能力
        withUsePush: {
            type: Boolean,
            default: false
        },
        // im-push 订阅模板消息参数
        subscribeParams: {
            type: Object,
            default: () => {
                return {
                    templateId: '',
                    subscribeId: ''
                };
            }
        },
        // 上部操作按钮
        handleBtns: {
            type: Array
        }
    },
    watch: {
        isExpHistory(v) {
            if (this.item.box2 && this.item.box2.length > 0) {
                this.item.box2.map((d, i) => {
                    if (d.info.type === 'history') {
                        this.$set(this.item.box2[i], 'isExp', v);
                    }
                });
            }
        },
        isExpVoice(v) {
            this.inputShow = !v;
            if (v) {
                this.isExp = false;
                this.isExpHistory = false;
            }
            else {
                if (!this.isShowBoxExp) {
                    this.isExp = true;
                }
            }
        },
        value(v) {
            this.val = v;
        },
        item(v) {
            if (v.box2 && v.box2.length > 0) {
                v.box2.map(d => {
                    if (d.info.type === 'history') {
                        this.isExpHistory = d.isExp;
                    }
                    // if (d.info.type === 'voice') {
                    //     this.isExpVoice = d.isExp;
                    // }
                });
            }
            // 补全栅格
            const emptyText = v.box2 ? (v.box2.length < 3 ? '' : 'empty') : 'empty';
            this.tools = core.equal(v.box2 || v.box, v.box2 ? 3 : 4, emptyText);
            this.isToolMulti = v.box2 ? (!(v.box2.length < 4)) : false;
            // 输入框是否可用
            if (!v.beforeSendMode) {
                // 此字段用于控制好大夫非定向时，收集用户信息时，一问一答（不可一问多答）的情况
                this.isEnable = v.showmodel === 'input';
            }
            else {
                this.isEnable = v.beforeSendMode === 'input';
            }
            // 是否外露图片上传
            if (this.item.picUpload && this.item.picUpload.info && !this.hidePicIcon) {
                this.isShowPic = true;
            }
            // 是否语音输入
            if (this.item.isShowVoice) {
                this.isShowVoice = true;
            }
            // 是否显示历史主诉
            if (this.item.isShowHistory) {
                this.isShowHistory = true;
            }
        }
    },
    data() {
        return {
            val: '',
            isEnable: false,
            isExp: false,
            tools: [],
            // 语音输入面板
            isExpVoice: false,
            voiceValue: '',
            inputShow: true,
            isShowPic: false, // input组件是否显示上传图片
            isShowVoice: false, // input组件是否显示语音输入
            isShowHistory: false, // input组件是否显示历史主诉
            isExpHistory: false,
            env: process.env.MARS_ENV,
            isFocus: false,
            isToolMulti: false,
            isShowMultiCol: false, // 工具栏单行或者多行显示
            needPh: false// h5 ios uc聚焦时，高度塌陷，需要一块撑起
        };
    },
    components: {
        CIcon,
        InputH5,
        InputSwan,
        VoicePopup,
        WzHistory
    },
    lifetimes: {
        attached() {
            this.isExp = this.isBoxExp;
            this.val = this.value;
            // 补全栅格
            const emptyText = this.item.box2 ? (this.item.box2.length < 3 ? '' : 'empty') : 'empty';
            this.tools = core.equal(this.item.box2 || this.item.box, this.item.box2 ? 3 : 4, emptyText);
            this.isToolMulti = this.item.box2 ? (!(this.item.box2.length < 4)) : false;
            // 处理输入框可用
            if (!this.item.beforeSendMode) {
                // 此字段用于控制好大夫非定向时，收集用户信息时，一问一答（不可一问多答）的情况
                this.isEnable = this.item.showmodel === 'input';
            }
            else {
                this.isEnable = this.item.beforeSendMode === 'input';
            }
            // 是否外露图片上传
            if (this.item.picUpload && this.item.picUpload.info && !this.hidePicIcon) {
                this.isShowPic = true;
            }
            // 是否语音输入
            if (this.item.isShowVoice) {
                this.isShowVoice = true;
            }
            // 是否显示历史主诉
            if (this.item.isShowHistory) {
                this.isShowHistory = true;
            }
            // 重新计算content高度，避免遮挡
            if (this.isExp) {
                this.$mpUpdated(() => {
                    this.$emit('bottomheightchange');
                });
            }
            // ios uc浏览器高度塌陷
            if (process.env.MARS_ENV === 'h5') {
                const UA = require('@searchfe/user-agent');
                if (UA && UA.isIOS() && UA.isUC()) {
                    this.needPh = true;
                }
            }
            if (this.handleBtns && this.handleBtns.length) {
                this.handleBtns.forEach(o => {
                    if (o.text) {
                        ubcSend({
                            type: 'view',
                            value: `input_top_${o.text}`
                        });
                    }
                });
            }
        }
    },
    methods: {
        onTapHistory(isExp) {
            this.isExpHistory = !isExp;
        },
        onTapHistoryItem: core.throttle(function (item) {
            const params = {
                questionID: '',
                qid: item.qid,
                age: item.age,
                nextkey: 'end',
                key: 'directedAge',
                from: 'history'
            };
            // 点击单个历史主诉选项
            this.$emit('tapHistoryItem', {
                // callbackUrl,
                name: item.text,
                value: item.age + '',
                params
            });
        }, 1 * 2000),
        // 语音
        showVoicePopup() {

            // 语音面板展开
            this.$emit('voiceScrollUp');
            // this.inputShow = false;
            this.isExpVoice = true;
            send({
                type: 'b',
                action: 'isExpVoice'
            });
        },
        voiceStart() {
            send({
                type: 'b',
                action: 'voiceStart'
            });
        },
        voiceSend() {
            this.onSend(this.voiceValue, 'voice');
            send({
                type: 'b',
                action: 'voiceSend'
            });
        },
        voiceRecognize(result) {
            this.voiceValue = result;
        },
        clearVoiceContent() {
            this.voiceValue = '';
            send({
                type: 'b',
                action: 'voiceClear'
            });
        },
        closeVoice() {
            // this.inputShow = true;
            this.isExpVoice = false;

            // 语音面板关闭时执行
            this.$emit('voiceClose');
            this.$mpUpdated(() => {
                // 工具栏高度变化时执行
                this.$emit('heightChange');
            });
            send({
                type: 'b',
                action: 'voiceClose'
            });
        },
        // 点击[+]
        onExpand() {
            this.isExp = !this.isExp;
            setTimeout(() => {
                // 点击工具栏展开按钮
                this.$emit('tapPlus', this.isExp);
            }, 10);
            send({
                type: 'b',
                action: this.isExp ? 'openTools' : 'closeTools'
            });
            ubcSend({
                type: 'clk',
                value: this.isExp ? 'openTools' : 'closeTools'
            });
        },
        onUploadImg() {
            send({
                type: 'b',
                action: 'uploadImgIcon'
            });
            this.onTapTool(this.item.picUpload.info);
        },
        // 点击展开层中工具
        onTapTool(tool, i) {
            if (!tool || (!this.isEnable && !(tool.clickable && tool.clickable === '1'))) {
                // clickable='1'代表该选项一直可点，不受isEnable限制
                return;
            }
            if (tool.type === 'url') {
                const url = tool.msUrl || tool.url;
                if (url && url.indexOf('feedback' > -1)) {
                    ubcSend({
                        type: 'clk',
                        value: 'imInputBottom'
                    });
                }
                navigate({
                    url
                });
            }
            if (tool.type === 'feedbackUrl' && tool.url) {
                if (process.env.MARS_ENV === 'swan') {
                    navToBdBoxH5(tool.url);
                }
                else if (process.env.MARS_ENV === 'h5') {
                    window.location.href = tool.url;
                }
            }
            else if (tool.type === 'uploadpic') {
                this.isExpVoice = false;
                this.isExpHistory = false;
                // 上传前增加上传图片张数校验
                let beforeChoose = true;
                // 上传选择图片前
                this.$emit('beforeChoose', tool, rt => {
                    if (tool.limit > 0) {
                        beforeChoose = rt < tool.limit;
                    }
                    return beforeChoose;
                });
                if (!beforeChoose) {
                    return;
                }

                upload({
                    url: tool.callback || tool.callbackUrl,
                    count: tool.limit || 9,
                    multi: true,
                    name: 'picFile',
                    onChoose: info => {
                        if (this.isExp && this.isShowBoxExp) {// 选择完，展开工具关闭
                            this.isExp = !this.isExp;
                        }
                        send({
                            type: 'b',
                            action: 'chooseImg'
                        });
                        // 选择图片
                        this.$emit('chooseImg', info, tool);
                    },
                    onPreview: info => {
                        // 预览图片
                        send({
                            type: 'b',
                            action: 'previewImg'
                        });
                        this.$emit('previewImg', info, tool);
                    },
                    onUploadSuccess: info => {
                        const resp = info.resp;
                        send({
                            type: 'b',
                            action: 'uploadSuccess'
                        });
                        // 上传图片成功
                        this.$emit('uploadSuccess', {
                            callbackUrl: tool.subCallbackUrl || this.item.messageCallback,
                            params: {
                                content: resp.origin,
                                pic_ids: resp.picID,
                                orientation: resp.orientation,
                                answerType: answerType.USER,
                                contentType: contentType.PIC
                            },
                            file: info.file
                        }, tool);
                    },
                    onUploadError: err => {
                        // 上传图片失败
                        send({
                            type: 'b',
                            action: 'uploadError'
                        });
                        this.$emit('uploadError', err);
                        if (!err.toast) {
                            err.toast = '图片上传失败，请重新上传';
                        }
                        this.$api.showToast({
                            title: err.toast,
                            icon: 'none'
                        });
                    },
                    onUploadAll: res => {
                        // 单批次上传完毕
                        this.$emit('uploadAll', {
                            callbackUrl: this.item.picsCallback || '',
                            res,
                        }, tool);
                    }
                });

                send({
                    type: 'b',
                    action: 'upload'
                });
            }
            else if (tool.type === 'phone') {
                if (process.env.MARS_ENV === 'swan') {
                    const api = this.$api;
                    api.makePhoneCall({
                        phoneNumber: tool.num,
                        fail() {
                            api.showToast({
                                title: '拨号失败',
                                icon: 'none'
                            });
                        }
                    });
                    send({
                        type: 'b',
                        action: 'makePhoneCall'
                    });
                }
                else if (process.env.MARS_ENV === 'h5') {
                    const el = document.createElement('a');
                    el.setAttribute('href', 'tel:' + tool.num);
                    el.click();
                }
            }
            else if (tool.type === 'ajax') {
                // 点击发起请求
                this.$emit('request', {
                    url: tool.callback,
                    act: tool.act || 'comment'
                });
            }
            else if (tool.type === 'history') {
                this.isExpHistory = !this.isExpHistory;
                this.isExpVoice = false;
            }
            else if (tool.type === 'voice') {
                this.isExpVoice = !this.isExpVoice;
                this.isExpHistory = false;
            }
            else if (tool.type === 'goods') {
                this.$emit('chooseGoods', tool);
            }
            else if (tool.type === 'orders') {
                this.$emit('chooseOrders', tool);
            }
            send({
                type: 'b',
                action: tool.type
            });
            if (i > -1 && this.item.box && this.item.box.length
                && this.tools && this.tools[0].length && this.tools[0][i].txt) {
                ubcSend({
                    type: 'clk',
                    value: `input-tools-${this.tools[0][i].txt}`
                });
            }
        },
        // 输入框值改变
        onInput(value) {
            // 输入框输入时执行
            this.$emit('input', value);
        },
        // 输入框失去焦点
        onBlur() {
            // this.isShowMultiCol = false;
            this.isFocus = false;
            if (this.isShowBoxExp) {
                this.isExp = false;
            }
            // 输入框失去焦点时执行
            this.$emit('blur');
            setTimeout(() => {
                // 点击工具栏按钮
                this.$emit('tapPlus', this.isExp);
            }, 400);
        },
        // 点击输入框[发送]按钮
        onSend(value, type = '') {
            value = value.trim();
            if (!value) {
                return;
            }

            // 输入长度校验
            const msg = this.validateLen(value, this.item.minLen, this.item.maxLen);
            if (msg.length > 0) {
                this.$api.showToast({
                    title: msg,
                    icon: 'none'
                });
                return;
            }

            send({
                type: 'b',
                action: 'sendMsg'
            });

            const params = core.getQueryObject(this.item.messageCallback);
            // 发送消息时执行
            this.$emit('send', {
                callbackUrl: this.item.messageCallback,
                resetUrl: this.item.resetUrl,
                sdtype: type,
                params: core.extend({
                    content: value,
                    answerType: answerType.USER,
                    contentType: contentType.TEXT
                }, {
                    content: params.value,
                    answerType: params.answerType,
                    contentType: params.contentType
                })
            });
            this.val = '';
            this.voiceValue = '';

            // 回复后不可用，直到下次refresh返回item.beforeSendMode

            if (this.item.afterSendMode === 'disableInput') {
                this.isEnable = false;
            }
        },
        // 传递用于发送模板消息的formId
        onSendFormId(value) {
            this.$emit('sendFormId', value);
        },
        onFocus(e) {
            this.isFocus = true;
            if (this.isShowBoxExp) {
                this.isExp = false;
            }
            this.isExpHistory = false;
            // 输入框获取焦点时执行
            this.$emit('focus', e);
        },
        // H5输入框关闭
        onCancel(value) {
            this.val = value;
            setTimeout(() => {
                // 点击H5输入框取消/mask是执行
                this.$emit('cancel', this.isExp);
            }, 400);
        },
        validateLen(v, min, max) {
            let rs = '';
            const minLen = Number(min);
            const maxLen = Number(max);
            if (maxLen > 0 && minLen > 0 && !(v.length >= minLen && v.length <= maxLen)) {
                rs = `${minLen}-${maxLen}`;
            }
            if (minLen > 0 && isNaN(maxLen) && v.length < minLen) {
                rs = `至少${minLen}`;
            }
            if (maxLen > 0 && isNaN(minLen) && v.length > maxLen) {
                rs = `最多${maxLen}`;
            }
            return rs.length ? `请输入${rs}个字` : '';
        },
        toggleMulti() {
            this.isShowMultiCol = !this.isShowMultiCol;
        },
        onStyChange(info) {
            this.isShowMultiCol = false;
            this.$emit('styChange', info);
        },
        onTouch(e) {
            // h5 uc、qq浏览器在聚焦时上滑手势，输入框会滑动
            if (this.$refs.inputh5 && this.$refs.inputh5.getTextareaDom()) {
                this.$refs.inputh5.getTextareaDom().blur();
                e.stopPropagation && e.stopPropagation();
            }
        },
        btnTap(info) {
            this.$emit('btnTap', info);
        }
    }
};
</script>

<style lang="less" scoped>
.ip-exp {
    // padding: 0 .17rem .15rem .17rem;
    background-color: #fff;
}

.ipt-plus-item {
    width: 16%;
    display: flex;
    justify-content: center;
}

.ipt-tools-line {
    max-height: 30px;
    overflow: hidden;
}

.ipt-tools-wrap {
    width: 100%;
}

.ip-exp-item {
    text-align: center;
}

.disabled-tools {
    opacity: .6;
}

.ip-exp-icon {
    background: #f4f5f6;
    border-radius: .1rem;
    display: inline-block;
    width: .62rem;
    height: .62rem;
    margin-top: .14rem;
    position: relative;
    text-align: center;

    .ip-exp-ic {
        font-size: 23px;
        color: #444;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

.ip-exp-txt {
    color: #575757;
    margin-top: -0.04rem;
}

.ip-swan-security {
    background-color: #fff;
}

.input-bottom-ph {
    width: 100%;
    background: #fff;
}

.btns {
    padding: 8px 17px 3px;
    border-top: 1px solid #f6f6f6;
    background-color: #fff;

    &-btn {
        display: inline-block;
        border-radius: .18rem;
        line-height: .13rem;
        border: 1px solid #f1f1f1;
        padding: 7px 12px;
        margin-right: 0.13rem;
    }
}

.btn-evaluation {
    margin-right: 0.03rem;
}
</style>
