<template>
    <c-popup
        :show="show"
        :z-index="'921'"
        :show-close="true"
        :show-close-handler="false"
        height="5.65rem"
        :title="title"
        :title-style="newCss ? {
            fontSize: '.18rem',
            color: '#1f1f1f',
        } : {}"
        :border-radius="newCss ? '21px' : '12px'"
        :close-icon="newCss ? 'close' : 'close-circle'"
        close-icon-size=".22rem"
        :class="newCss ? 'new-rule-popup' : 'rule-popup'"
        stop-scroll-through
        :btns="btns"
        @close="handlePopupClose"
        @masktap="handlePopupClose"
    >
        <view v-if="data && data.length" class="qa-popup">
            <scroll-view
                scroll-y
                class="scroll-view"
                :style="{'max-height': maxHeight + 'px'}"
            >
                <view
                    v-if="tip"
                    class="qa-tip c-color-gray c-font-medium-less"
                >
                    {{ tip }}
                </view>
                <view v-if="data && data.length" class="qa-item-wrapper">
                    <view
                        v-for="(item, index) in data"
                        :key="'item' + index"
                        class="qa-item"
                    >
                        <view
                            v-if="item.subTitle"
                            class="qa-text"
                            :class="[newCss ? 'c-font-big-less c-color-title' : 'c-font-normal c-color-333']"
                        >
                            <c-icon
                                v-if="item.icon"
                                class="qa-icon"
                                :name="item.icon"
                                font-size=".16rem"
                                color="#FD503E"
                            />
                            <text>{{ item.subTitle }}</text>
                            <text v-if="!newCss">：</text>
                        </view>
                        <view
                            v-if="item && item.subContent && item.subContent.length"
                            :style="subContentStyle"
                        >
                            <view
                                v-for="(t, i) in item.subContent"
                                :key="'img' + i"
                                :class="{
                                    'qa-img-wrap': t.type === 'image' && !newCss,
                                    'qa-img-wrap-new': t.type === 'image' && newCss,
                                }"
                            >
                                <view
                                    v-if="t.type === 'text'"
                                    :class="[
                                        subTextClass ? subTextClass :
                                        newCss ? 'c-color-gray c-font-normal new-qa-detail'
                                        : 'c-color c-font-normal qa-detail',
                                    ]"
                                >
                                    <text>{{ t.value }}</text>
                                    <text
                                        v-if="t.link"
                                        class="qa-link"
                                        @tap="tapLink(t.link)"
                                    >
                                        {{ t.link.value || t.link.text }}
                                    </text>
                                </view>
                                <c-image
                                    v-if="t.type === 'image' && newCss && t.value"
                                    class="qa-img-new"
                                    :src="t.value"
                                    has-compress
                                    width="100%"
                                    height="auto"
                                    mode="widthFix"
                                    :is-round="false"
                                    :hack-white-stroke="false"
                                />
                                <c-image
                                    v-if="t.type === 'image' && !newCss && t.value"
                                    class="qa-img"
                                    :src="t.value"
                                    has-compress
                                    width="100%"
                                    height="auto"
                                    mode="widthFix"
                                    :is-round="false"
                                    :hack-white-stroke="false"
                                    @tap="previewQaImg(t.value, item.value)"
                                />
                            </view>
                        </view>
                        <view v-if="subDivider && (index !== data.length - 1)" class="qa-divider"/>
                    </view>
                </view>
            </scroll-view>
        </view>
    </c-popup>
</template>

<script>
/**
 * @file 保险popup
 * @author zhanngqian51@baidu.com
 * @categories 业务组件
 * @tags [component]
*/

/* global Page swan  getApp */
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CImage from '@commonComponents/image';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    components: {
        CPopup,
        CIcon,
        CImage
    },
    props: {
        // 是否显示
        show: {
            type: Boolean,
            default: false,
        },
        // 保险数据
        data: {
            type: Array,
            default: () => [],
        },
        // 标题
        title: {
            type: String,
            default: '',
        },
        // 标题下方的提示
        tip: {
            type: String,
            default: '',
        },
        // 是否开启新样式
        newCss: {
            type: Boolean,
            default: false,
        },
        // 副标题下每个文字区域样式
        subContentStyle: {
            type: Object,
            default: () => {},
        },
        // 副标题每个文字样式class
        subTextClass: {
            type: String,
            default: '',
        },
        // 是否开启内容区分割线
        subDivider: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            screenHeight: 0,
            maxHeight: 0,
            btns: [{
                text: this.newCss ? '完成' : '确认',
                type: 'primary',
                color: '#FD503E'
            }]
        };
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.screenHeight = systemInfoSync.screenHeight;
        const scale = this.newCss ? 0.8 : 0.85;
        if (process.env.MARS_ENV === 'h5') {
            this.maxHeight = (this.screenHeight - 74) * scale - 56;
        } else {
            this.maxHeight = this.screenHeight * scale - 56;
        }
    },
    methods: {
        handlePopupClose() {
            /**
             * 关闭
             *
             * @event click
             */
            this.$emit('onClose');
        },
        tapLink(link) {
            if (link && link.url) {
                this.$emit('tapLink', link.url);
            }
        },
        previewQaImg(current, list) {
            let urls = [];
            list && list.length && list.forEach(item => {
                if (item.type === 'image') {
                    let value = item.value;
                    urls.push(value.slice(0, value.indexOf('?')));
                }
            });
            current = current.slice(0, current.indexOf('?'));
            this.$api.previewImage({
                current,
                urls
            });
        }
    }
};
</script>
<style lang="less" scoped>
.new-rule-popup {
    /deep/.popup-box__btns {
        border-top: 1px solid #e0e0e0;
    }

    /deep/.c-gap-top {
        margin-top: 0.08rem;
    }

    /deep/.c-gap-bottom {
        margin-bottom: 0.08rem;
    }
}

.qa-popup {
    display: flex;
    flex-direction: column;
    height: calc(100% - 47px);

    &-head {
        width: calc(100% - 34px);
        height: 47px;
        position: absolute;
        top: 0;
        background: #fff;
        padding: 0 17px;
        z-index: 922;

        .close-wrapper {
            width: 24px;
            height: 24px;
            float: right;
        }
    }

    &-topline {
        position: relative;
        width: 100%;
        height: 4px;
        padding-top: 5px;

        &::after {
            content: '';
            position: absolute;
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            width: 33px;
            height: 4px;
            background: #eee;
            border-radius: 3px;
        }
    }

    .title {
        font-size: 18px;
        font-family: PingFangSC-Medium;
        text-align: center;
        margin-top: 16px;
        margin-left: 24px;
    }

    .scroll-view {
        height: 100%;
        max-height: 537px;
    }
}

.qa-tip {
    text-align: center;
    margin-top: .09rem;
    margin-bottom: .12rem;
}

.qa-item-wrapper {
    height: 100%;

    .qa-icon {
        margin-right: .1rem;
    }

    .qa-divider {
        margin-top: .1rem;
        margin-bottom: .1rem;

        &::after {
            content: "";
            display: block;
            width: 100%;
            height: 0.01rem;
            transform: scaleY(.333);
            background: #e6e6e6;
        }
    }
}

.qa-text {
    font-family: PingFangSC-Medium;
}

.qa-detail {
    line-height: 31px;
}

.qa-link {
    color: #fd503e;
    display: inline-block;
}

.detail-wrap {
    display: flex;
}

.qa-img-wrap {
    display: inline-block;
    width: 28vw;
    height: 19vw;
    margin-right: 8px;

    .qa-img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        background-size: cover;
    }
}

.qa-img-wrap-new {
    background: #fef9f8;
    margin-top: 0.11rem;
    padding: .05rem .15rem;
    border-radius: .12rem;

    .qa-img-new {
        width: 100%;
        margin-top: .08rem;
    }
}
</style>
