<template>
    <c-popup
        show-title-line
        :show="show"
        :z-index="'921'"
        :show-close="true"
        :show-close-handler="false"
        max-height="80%"
        height="77.3%"
        :title="title"
        border-radius="12px"
        close-icon="close-circle"
        class="rule-popup"
        stop-scroll-through
        @close="handlePopupClose"
        @masktap="handlePopupClose"
    >
        <view v-if="data && data.length" class="qa-popup">
            <scroll-view
                scroll-y
                class="scroll-view"
            >
                <view v-if="data && data.length" class="qa-item-wrapper">
                    <view
                        v-for="(item, index) in data"
                        :key="'qa' + index"
                        class="qa-item"
                    >
                        <view class="c-font-large qa-text">{{ item.text }}</view>
                        <view v-if="item && item.value && item.value.length">
                            <view
                                v-for="(t, i) in item.value"
                                :key="'item' + i"
                                :class="{
                                    'qa-img-wrap': t.type === 'image',
                                }"
                            >
                                <view v-if="t.type === 'text'">
                                    <view class="c-font-15 qa-detail">{{ t.value }}</view>
                                </view>
                                <c-image
                                    v-if="t.type === 'image'"
                                    has-compress
                                    :src="t.value"
                                    width="100%"
                                    height="100%"
                                    :extra="{column: 3}"
                                    :hack-white-stroke="false"
                                    :is-round="false"
                                    round="0.08rem"
                                    @tap="previewQaImg(t.value, item.value)"
                                />
                            </view>
                        </view>
                    </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 CImage from '@components/common/image';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    components: {
        CPopup,
        CImage
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            'type': Boolean,
            'default': false
        },
        /**
         * 资质数据
         */
        data: {
            'type': Array,
            'default': () => {
                return [];
            }
        },
        /**
         * 标题
         */
        title: {
            'type': String,
            'default': ''
        }
    },
    data() {
        return {
            screenHeight: 0,
            maxHeight: 0
        };
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.screenHeight = systemInfoSync.screenHeight;
        if (process.env.MARS_ENV === 'h5') {
            this.maxHeight = (this.screenHeight - 74) * 0.85 - 56;
        } else {
            this.maxHeight = this.screenHeight * 0.85 - 56;
        }
    },
    methods: {
        handlePopupClose() {
            /**
             * 关闭弹窗
             *
             * @event close
             */
            this.$emit('onClose');
        },
        previewQaImg(current, list) {
            let urls = [];
            list && list.length && list.forEach(item => {
                if (item.type === 'image') {
                    let value = item.value;
                    if (value.indexOf('?') > -1) {
                        urls.push(value.slice(0, value.indexOf('?')));
                    } else {
                        urls.push(value);
                    }
                }
            });
            if (current.indexOf('?') > -1) {
                current = current.slice(0, current.indexOf('?'));
            }
            this.$api.previewImage({
                current,
                urls
            });
        }
    }
};
</script>
<style lang="less" scoped>
.qa-popup {
    display: flex;
    flex-direction: column;
    height: calc(100% - 28px);

    &-head {
        width: calc(100% - 34px);
        height: 28px;
        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 {
        text-align: center;
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #333;
        margin-top: 20px;
        padding-left: 24px;
    }

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

.qa-item-wrapper {
    height: 100%;
    padding-top: 11px;
}

.qa-item {
    padding-bottom: 13px;
}

.qa-text {
    margin-bottom: 7px;
    font-family: PingFangSC-Medium;
    color: #1f1f1f;
}

.qa-detail {
    color: #1f1f1f;
}

.detail-wrap {
    display: flex;
}

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

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