<template>
    <view class="ask">
        <view
            v-if="item.title && isShowTitle"
            class="c-line-clamp2 c-font-17  c-color-333">{{ item.title }}</view>
        <view
            v-if="item.expertInfo"
            class="c-gap-top">
            <!-- 问答内容 -->
            <view class="ctn">
                <!-- 问答panel -->
                <view class="panel c-gap-top-small c-gap-inner-top c-gap-inner-bottom-large c-gap-inner-left-large c-gap-inner-right-large">
                    <c-avatar
                        :src="item.expertInfo.expertPic"
                        mode="widthFix"
                        :size="16"
                        :style="{'margin-top': '4px'}"
                        class="avatar c-gap-right-small"></c-avatar>
                    <view class="c-color-gray c-font-normal c-line-clamp1">
                        <text v-if="item.expertInfo.expertName">{{ item.expertInfo.expertName }}</text>
                        <text
                            v-if="item.expertInfo.expertHospital"
                            class="c-gap-left-small">{{ item.expertInfo.expertHospital }}</text>
                        <text
                            v-if="item.expertInfo.expertDepartment"
                            class="c-gap-left-small">{{ item.expertInfo.expertDepartment}}</text>
                        <text
                            v-if="item.expertInfo.expertLevel"
                            class="c-gap-left-small">{{ item.expertInfo.expertLevel }}</text>
                    </view>
                    <view class="panel-arrow"></view>
                    <view
                        class="panel-inner c-line-clamp3 c-font-normal"
                        v-if="item.answer">
                        <view>{{ item.answer }}</view>
                        <view class="panel-shadow"></view>
                    </view>
                    <view
                        v-if="btnPos === 'inline'"
                        class="panel-op c-gap-top">
                        <text class="c-color-gray c-font-13">{{ item.lookCount }}</text>
                        <view
                            v-if="item.buttonTxt"
                            class="c-inline-block">
                            <c-button
                                auto
                                type="primary"
                                primary-color="#00C8C8"
                                border-radius="20px"
                                :height="28"
                                :font-size="13"
                                class="c-gap-left">
                                <login-btn
                                    @onTapStart="onTapStart(item)"
                                    @onLoginSuccess="onTapBtn(item)"
                                >
                                    <text class="panel-btn">{{ item.buttonTxt }}</text>
                                </login-btn>
                            </c-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="panel-btn-block">
            <c-button
                v-if="btnPos==='block' && item.buttonTxt"
                auto
                type="primary"
                background="#00c8c8"
                border-radius="20px"
                :height="38"
                :font-size="14"
                class="c-blocka c-gap-top-large">
                <login-btn
                    @onTapStart="onTapStart(item)"
                    @onLoginSuccess="onTapBtn(item)"
                >
                    <text class="c-gap-inner-left-boundary c-gap-inner-right-boundary">{{ item.buttonTxt }}</text>
                </login-btn>
            </c-button>
        </view>
    </view>
</template>

<script>
/**
 * @file components/wz/ask-info
 * @author haoyan
 * @categories 业务组件
 * @tags [component]
 */
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
import CButton from '@baidu/med-ui/components/Button/Button';

import {request} from '../../utils/request';
import {navigate} from '../../utils/navigate';
import {pay} from '../../utils/pay';
import * as login from '../../utils/login';
import LoginBtn from '@components/common/login-btn';

export default {
    config: {
        component: true
    },
    components: {
        CAvatar,
        CButton,
        LoginBtn
    },
    props: {
        /**
         * x
         */
        item: {
            type: Object,
            'default'() {
                return {};
            }
        },
        /**
         * x
         */
        btnPos: {
            'type': String,
            'default': 'inline'
        },
        /**
         * x
         */
        isLogin: {
            'type': Number,
            'default': 0
        },
        /**
         * x
         */
        isShowTitle: {
            'type': Boolean,
            'default': true
        }
    },
    data() {
        return {
        };
    },
    lifetimes: {
        attached() {
        }
    },
    methods: {
        // 点击按钮
        onTapBtn(btn) {
            if (Number(btn.isPaid) === 1) {
                // 已解锁
                if (btn.buttonUrl) {
                    navigate({
                        url: btn.buttonUrl
                    });
                }
            }
            else {
                // 未解锁
                request({
                    url: btn.buttonUrl
                }).then(resp => {
                    const msUrl = resp.data.ms_url;
                    const payUrl = resp.data.pay_url;
                    // 支付
                    if (payUrl) {
                        pay({
                            url: payUrl
                        });
                    }
                    else if (msUrl) {
                        navigate({
                            url: msUrl
                        });
                    }
                });
            }  
        },
        onTapStart(item) {
            if (process.env.MARS_ENV === 'h5') {
                if (Number(this.isLogin) === 0) {
                    login.toH5LoginPage({isReplaceUrl: true});
                }
                else {
                    this.onTapBtn(item);
                }
            }
        }
    }
};
</script>

<style lang="less">
.c-color-333 {
    color: #333;
}
.avatar {
    float: left;
}
.ctn {
    overflow: hidden;
}
.panel {
    background-color: #f7f7f7;
    color: #333;
    border-radius: .08rem;
    position: relative;
}
.panel-arrow {
    height: 0;
    width: 0;
    border-top: 0px solid transparent;
    border-bottom: 11px solid transparent;
    border-right: 7px solid transparent;
    border-right-color: #f7f7f7;
    border-left: 0;
    position: absolute;
    left: -6px;
    top: 9px;
}

.panel-inner {
    overflow: hidden;
    position: relative;
}
.panel-shadow {
    background: linear-gradient(to top, #f7f7f7 2%, rgba(255, 255, 255, 0) 98%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.5rem;
    z-index: 5;
}
.panel-btn {
    padding: 0 1px;
}
.panel-op {
    text-align: right;
}
.panel-btn-block {
    text-align: center;
}
</style>