<template>
    <view
        class="warning-pop-wrap">
        <view class="pop-content">
            <image
                v-if="item.warningIcon"
                :src="item.warningIcon"
                class="warning-icon"/>
            <view class="warning-content"> 
                <view v-for="para,index in item.paras" class="each-para">
                    <block v-for="o in para">
                        <text v-if="o.type === 'text'">{{o.content}}</text>
                        <text v-if="o.type === 'link'" :style="{color: o.color || '#00c8c8'}" @tap="onJump(o.url)">{{o.content}}</text>
                    </block>
                </view>
            </view>
            <view v-if="item.btn" class="bottom-btn" @tap="onJump(item.btn.url)">{{item.btn.text}}</view>
        </view>
    </view>
</template>

<script>
/**
 * @file 用户诚信守则弹窗
 * @author huanghongwei
 */
import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    props: {
        item: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {};
    },
    methods: {
        onJump(url) {
            navigate({
                url: url
            });
        }
    }
};
</script>

<style lang="less">
.warning-pop-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.5);
}
.pop-content {
    width: 100%;
    margin: 0 40px;
    background: #fff;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.warning-icon {
    margin: 24px 0 15px;
    width: 44px;
    height: 44px;
}
.warning-content {
    margin: 0 24px 24px;
}
.bottom-btn {
    width: 100%;
    height: 47px;
    border-top: 1px solid #eee;
    text-align: center;
    line-height: 47px;
    font-size: 19px;
    color: #000;
}
.each-para {
    text-indent: 20px;
}
.each-text {
    display: inline;
}
</style>