<template>
    <view>
        <view class="painco-title">
            <view v-if="infoItem.title" class="c-flex-row">
                <view
                    :style="{
                        color: infoItem.title.color,
                    }"
                >{{ infoItem.title.text }}</view>
                <c-icon 
                    v-if="infoItem.titleIcon && infoItem.titleIcon.name"
                    :name="infoItem.titleIcon.name"
                    class="c-gap-left"
                    :style="{color: infoItem.title.color || '#00C8C8'}"
                    font-size="18px"
                    @tap="onTap(infoItem.titleIcon)"
                />
            </view>
        </view>
        <view class="painco-content-wrap">
            <view v-if="infoItem.desc">{{ infoItem.desc }}</view>
            <view
                v-if="infoItem.patientInfo"
                class="patient-info c-flex-between"
                @tap="onTap(infoItem.patientInfo)"
            >
                <view
                    class="c-line-clamp1"
                    :style="{color: infoItem.patientInfo.color || '#333333'}"
                >
                    <view
                        v-if="infoItem.patientInfo.defaultName"
                        class="c-gap-right c-inline"
                    >{{ infoItem.patientInfo.defaultName }}
                    </view>
                    <view v-if="infoItem.patientInfo.defaultGender" class="c-inline">{{ infoItem.patientInfo.defaultGender }}</view>
                </view>
                <image
                    v-if="infoItem.patientInfo.rightIcon"
                    :src="infoItem.patientInfo.rightIcon"
                    mode="widthFix"
                    :style="{
                        width: infoItem.patientInfo.rightIconWidth || '9px',
                    }"
                />
            </view>
            <view v-if="infoItem.disclaimers" class="c-inline-block disclaimers-wrap">
                <c-icon
                    v-if="infoItem.disclaimers.icon"
                    :name="infoItem.disclaimers.icon"
                    class="c-gap-right-small c-color-green c-inline-block"
                    font-size="16px"
                />
                <view v-if="infoItem.disclaimers.text" class="c-inline c-font-normal c-color-gray">
                    {{ infoItem.disclaimers.text }}
                </view>
            </view>
            <view class="btn-wrap-out">
                <view
                    v-if="infoItem.btnInfo"
                    class="btn-wrap" 
                    :style="{
                        background: infoItem.btnInfo.bgColor || '#00C8C8',
                        color: infoItem.btnInfo.color || '#FFFFFF',
                    }"
                    @tap="onTap(infoItem.btnInfo)"
                >
                    <image
                        v-if="infoItem.btnInfo.btnIcon"
                        class="c-gap-right"
                        :src="infoItem.btnInfo.btnIcon"
                        mode="widthFix"
                        :style="{
                            width: infoItem.btnInfo.iconWidth || '15px',
                        }"
                    />
                    {{ infoItem.btnInfo.btnText }}
                </view>
            </view>
        </view>
        <im-popup-slide 
            :popup-info="popupInfo"
            :popup-show="popupShow"
            :popup-params="popupParams"
            :qid="qid"
            @popupClose="onClose"
            @popupTap="onTap"
            @update="onUpdate"
            @updatePhys="onUpdatePhys"
        />
    </view>
</template>
<script>
/**
 * @file patient-infocollect
 * 就诊信息收集卡片
 * @author huanghongwei
 * @categories 业务组件
 * @tags [component]
 */
import Icon from '@baidu/med-ui/components/Icon/Icon';
import {request} from '../../utils/request';
import ImPopupSlide from './ImPopupSlide';
import {ubcSend} from '../../utils/log';

export default {
    config: {
        component: true
    },
    components: {
        'CIcon': Icon,
        ImPopupSlide
    },
    props: {
        /**
        * 组件数据
        */
        item: {
            'type': Object,
            'default': {}
        },
        qid: {
            type: [Number, String],
            default: ''
        }
    },
    watch: {
        item: {
            handler (result) {
                if (result.btnInfo && result.btnInfo.autoCallBackURL) {
                    let questionID = this.qid && this.qid.toString();
                    this.$api.getStorage({
                        key: questionID + 'pa'
                    }).then(res => {
                        if (!res.data) {
                            this.onTap(result.btnInfo);
                            this.$api.setStorage({
                                key: questionID + 'pa',
                                data: questionID
                            });
                        }
                    });
                };
            },
            immediate: true
        }
    },
    data() {
        return {
            infoItem: this.item,
            popupShow: false,
            popupParams: {
                showClose: true, // 弹层样式，固定不变
                showCloseHandler: false, // 弹层样式，固定不变
                showTitleLine: true, // 弹层样式，固定不变
                closeIcon: 'close-circle', // 弹层样式，固定不变
                rowTile: true,
                title: ''// 弹层title
            },
            popupInfo: {}
        };
    },
    methods: {
        onTap(info) {
            if (info.callBackurl) {
                request({
                    url: info.callBackurl
                }).then(resp => {
                    if (resp.data && resp.data.type && resp.data.type === 'popup' && resp.data.popupInfo) {
                        if (resp.data.toast) {
                            this.$api.showToast({
                                icon: 'none',
                                title: resp.data.toast
                            });
                        }
                        this.popupParams = resp.data.popupInfo.params || this.popupParams;
                        this.popupInfo = resp.data.popupInfo;
                        this.onPopup();
                    }
                    if (resp.data && resp.data.type && resp.data.type === 'patientInfoCollect') {
                        this.onClose();
                        this.infoItem = resp.data;
                        if (resp.data.toast) {
                            this.$api.showToast({
                                icon: 'none',
                                title: resp.data.toast
                            });
                        }
                    }
                });
            }
            else if (info.popupInfo) {
                this.popupParams = info.popupInfo.params || this.popupParams;
                this.popupInfo = info.popupInfo;
                this.onPopup();
            }
        },
        onPopup() {
            this.popupShow = true;
            // 收集患者信息弹层
            ubcSend({
                type: 'view',
                value: 'patient_info_show',
                ext: {
                    pd: 'wz'
                }
            });
            /**
            * 弹窗事件打开
            */
            this.$emit('popup', {type: 'popupSlide'}, false);
        },
        onClose() {
            this.popupShow = false;
            /**
            * 弹窗事件关闭
            */
            this.$emit('popup', {type: 'popupSlide'}, true);
        },
        onUpdate(item) {
            this.onClose();
            this.infoItem = item;
        },
        onUpdatePhys(updateUrl){
            if (updateUrl){
                request({
                    methods: 'POST',
                    url: updateUrl.updateUrl,
                    isNeedLogin: true,
                    isFirstScreen: false
                }).then(resp => {
                    if (resp.data.popupInfo){
                        this.popupInfo = resp.data.popupInfo;
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.painco-title {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    padding: 9px 12px;
    display: flex;
    justify-content: space-between;
}
.painco-content-wrap {
    padding: 7px 12px 12px;
    background: #ffffff;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
}
.patient-info {
    padding: 0 15px;
    margin-top: 7px;
    margin-bottom: 5px;
    height: 38px;
    background: #F8F8F8;
    border-radius: 4px;
    line-height: 38px;
}
.c-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.disclaimers-wrap {
    margin-top: 2px;
}
.btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 19px;
    font-size: 16px;
    &-out {
        padding-top: 7px;
    }
}
</style>
