<template>
    <c-popup
        :show="show"
        :z-index="'921'"
        :show-close="true"
        :show-close-handler="false"
        max-height="80%"
        height="60%"
        :title="data.title"
        :title-style="{color: '#1f1f1f', fontSize: '0.18rem', lineHeight: '0.26rem'}"
        border-radius="0.21rem"
        close-icon="close"
        class="agency-popup"
        stop-scroll-through
        scroll-view
        @close="handlePopupClose"
        @masktap="handlePopupClose"
    >
        <view class="agency-popup__info">
            <view class="agency-popup__info__header">
                <c-image
                    has-compress
                    class="agency-popup__info__header__img"
                    :src="data.avatar"
                    width="12.56vw"
                    height="12.56vw"
                    mode="widthFix"
                    :extra="{column: 2}"
                    :hack-white-stroke="false"
                />
                <view class="agency-popup__info__header__title--wrap">
                    <view class="agency-popup__info__header__title c-font-big-less c-color-title">{{ data.name }}</view>
                    <view
                        class="agency-popup__info__header__address c-font-normal c-color-gray"
                    >{{ data.address }}</view>
                </view>
            </view>
            <view class="agency-popup__info__desc c-gap-top c-font-normal c-color">{{ data.desc }}</view>
        </view>
        <view
            v-if="data.qualification && data.qualification.list && data.qualification.list.length"
            class="agency-popup__qualification c-gap-top-ll"
        >
            <view
                class="agency-popup__qualification__title c-gap-bottom c-font-big-less c-color-title"
            >{{ data.qualification.title }}</view>
            <view class="agency-popup__qualification__list">
                <view
                    v-for="(item, index) in data.qualification.list"
                    :key="index"
                    class="agency-popup__qualification__list__item"
                    @tap="previewImg(item, data.qualification.list)"
                >
                    <c-image
                        has-compress
                        class="agency-popup__qualification__list__item__img"
                        :src="item"
                        width="100%"
                        height="22.7vw"
                        :extra="{column: 4}"
                        :hack-white-stroke="false"
                        :is-round="false"
                    />
                </view>
            </view>
        </view>
    </c-popup>
</template>

<script>
/* global Page swan  getApp */
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CImage from '@components/common/image';

/**
 * @file 检测-机构弹窗
 * @author mayifan02@baidu.com
 * @categories 业务组件
 * @tags [component]
*/
export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    components: {
        CPopup,
        CImage
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            type: Boolean,
            default: false
        },
        /**
         * 资质数据
         */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {};
    },
    methods: {
        handlePopupClose() {
            /**
             * 关闭弹窗
             *
             * @event close
             */
            this.$emit('onClose');
        },
        previewImg(current, list) {
            this.$api.previewImage({
                current,
                urls: list
            });
        }
    }
};
</script>
<style lang="less" scoped>
.agency-popup {
    &__info {
        &__header {
            display: flex;
            align-items: center;

            &__img {
                display: block;
                width: 12.56vw;
                height: 12.56vw;
                border-radius: 50%;
                margin-right: 0.04rem;
            }

            &__title {
                font-weight: bold;
            }
        }
    }

    &__qualification {
        &__title {
            font-weight: bold;
        }

        &__list {
            display: flex;
            flex-wrap: wrap;

            &__item {
                width: calc(33% - 0.06rem);
                margin-right: 0.06rem;
                margin-bottom: 0.06rem;
                background: radial-gradient(transparent 30%, rgba(0, 0, 0, .08) 100%);

                &:nth-child(3n + 0) {
                    margin-right: 0;
                    border-radius: 0 0.09rem 0.09rem 0;
                }

                &:nth-child(3n + 1) {
                    border-radius: 0.09rem 0 0 0.09rem;
                }

                &__img {
                    display: block;
                    width: 100%;
                    height: 22.7vw;
                }
            }
        }
    }
}
</style>
