<template>
    <view :class="item.pos && item.pos === 'bottom' ? '' : 'c-inline'">
        <view
            v-if="item.pos && item.pos === 'bottom'"
            class="innerlink-align-center"
            :style="{
                'color': item.color
            }">
            <navigate v-if="item.linkType && item.linkType === 'navigate'" :url="item.msUrl">
                {{item.linkText}}
                <c-icon
                    name="right"
                    font-size="17px"
                    :color="item.color"></c-icon>
            </navigate>
            <view v-if="item.linkType && item.linkType === 'popup'" @tap="onOpen">{{ item.linkText }}</view>
        </view>
        <view
            v-if="item.text"
            class="c-inline"
            :style="{
                'color': item.color
            }"
            @tap="onOpen">{{ item.text }}</view>
        <c-popup
            max-height="75%"
            height="75%"
            show-close
            :show="isOpen"
            @close="onClose"
            @masktap="onClose">
            <view class="case-wrap c-tal">
                <view class="case-content">
                    <!-- 基础信息 -->
                    <view
                        v-if="data.basic"
                        class="c-gap-top">
                        <view class="c-color-link case-bold c-font-17">{{ data.basic.title }}</view>
                        <view class="c-color-gray c-font-15 c-gap-top-small">
                            <text class="c-gap-right-large">{{ data.basic.gender }}</text>
                            <text class="c-gap-right-large">{{ data.basic.age }}</text>
                            <text>{{ data.basic.question }}</text>
                        </view>
                    </view>
                    <!-- 详情 -->
                    <view
                        v-for="(o, i) in data.info"
                        class="c-gap-top-ll">
                        <view class="c-color-link case-bold c-font-17">{{ o.title }}</view>
                        <view v-if="o.type === 'text'">
                            <view
                                v-for="(c, j) in o.list"
                                class="c-gap-top-small">
                                <view
                                    v-if="c.title"
                                    class="c-color-gray c-font-15 c-gap-top">{{ c.title }}：</view>
                                <view
                                    v-if="c.text"
                                    class="c-color-333 c-font-15 c-gap-top-small case-text">{{ c.text }}</view>
                            </view>
                        </view>
                        <view
                            v-if="o.type === 'pic'"
                            class="c-gap-top case-img-wrap">
                            <view
                                v-if="o.list && o.list.length > 0"
                                v-for="(c, j) in o.list"
                                class="c-inline-block"
                                :class="j === 0 ? '' : 'c-gap-left'"
                                @tap="onTapFile(c, o.list)">
                                <view
                                    :style="{
                                        'background-image': 'url('+ c.img +')',
                                        'background-size': 'cover'
                                    }"
                                    class="case-img"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </c-popup>
    </view>
</template>

<script>
/**
* @file 问诊-病例
* @author haoyan
*/
import Popup from '@baidu/med-ui/components/Popup/Popup';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import {request} from '../../utils/request';
import navigate from '../../components/common/navigate';
export default {
    config: {
        component: true
    },
    components: {
        'c-popup': Popup,
        'c-icon': Icon,
        navigate
    },
    props: {
        item: {
            'type': Object,
            'default': {}
        }
    },
    watch: {
        isOpen(v) {
            this.$emit('open', this.item, this.isOpen);
        }
    },
    data() {
        return {
            isOpen: false,
            data: {}
        };
    },
    methods: {
        // 打开弹层
        onOpen() {
            this.getData();
        },
        // 关闭弹层
        onClose() {
            this.isOpen = false;
        },
        // 点击图片
        onTapFile(file, list) {
            let urls = list.map(item => item.img);
            let current = file.img;
            this.$api.previewImage({
                current,
                urls
            });
        },
        // 获取弹层数据
        getData() {
            request({
                url: this.item.ajaxUrl
            }).then(resp => {
                this.data = resp.data;
                this.isOpen = true;
            });
        }
    }
};
</script>

<style lang="less" scoped>
.case-title {
    left: 0;
    right: 0;
    background-color: #fff;
    height: .52rem;
    line-height: .57rem;
    font-size: .18rem;
    top: 0;
}
.case-title-block {
    height: .57rem;
}
.case-close {
    position: absolute;
    right: .17rem;
    top: 0;
}
.case-wrap {
    padding-bottom: .24rem;
    position: relative;
}
.case-bold {
    font-weight: bold;
}
.case-img-wrap {
    white-space: nowrap;
    overflow-x: auto;
}
.case-img {
    width: .75rem;
    height: .75rem;
    border-radius: .05rem;
}
.case-text {
    line-height: 23px;
}
.innerlink-align-center {
    width: 100%;
    text-align: center;
    display: inline-block;
    border-top: 1px solid #E0E0E0;
    padding-top: 10px;
    margin-top: 10px;
}
</style>