<template>
    <view
        class="err-correct"
        :style="{
            'padding': padding,
            'padding-bottom': screenWidth >= 414 ? '.05rem' : (textList[3] && textList[3].text.length > 5 ? '.1rem' : '.05rem'),
            'margin-top': marginTop ? marginTop : 0,
            'display': display,
        }"
    >
        <text
            v-for="(item, index) in textList"
            :key="index"
        >
            <text
                v-if="item.type === 'text'"
                class="c-height-40"
                :class="item.isRight ? 'c-gap-right-xsmall' : ''"
                :style="textStyle"
            >{{ item.text }}</text>
            <text v-if="item.type === 'highlight'" class="c-height-40 highlight">{{ item.text }}</text>
            <text
                v-if="item.type === 'button'"
                class="c-inline-block btn"
                :style="btnStyle"
                @tap="onJump(item.word, item.isContinue)"
            >{{ item.text }}</text>
        </text>
    </view>
</template>

<script>
/**
 * @file 纠错卡
 * @categories 业务组件
 * @tags [component]
 * @author shizhongwei02
 */
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
export default {
    config: {
        component: true
    },
    data() {
        const {screenWidth} = getSystemInfo();
        return {
            screenWidth
        };
    },
    props: {
        /**
         * 文字数组
         */
        textList: {
            type: Array,
            default: () => []
        },
        /**
         * 上间距
         */
        marginTop: {
            type: String,
            default: '0'
        },
        /**
         * 内边距
         */
        padding: {
            type: String,
            default: '.05rem .1rem .05rem .1rem'
        },
        /**
         * 文字样式
         */
        textStyle: {
            type: Object,
            default() {
                return {};
            }
        },
        display: {
            type: String,
            default: 'flex'
        },
        /**
         * 按钮样式
         */
        btnStyle: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    methods: {
        onJump(word, isContinue) {
            this.$emit('goSearch', word, '', isContinue);
        }
    }
};
</script>
<style lang="less" scoped>
.err-correct {
    background: #FFFFFF;
    border-radius: .09rem;
    padding: .05rem .1rem .05rem .1rem;
    margin: 0 .1rem .1rem .1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #1F1F1F;
    .highlight {
        color: #FD503E;
    }
    .btn {
        background: #F5F5F5;
        border-radius: .09rem;
        padding: .035rem .08rem;
    }
}
.c-height-40 {
    line-height: 40px
}
</style>
