<template>
    <view class="brocade-flag">
        <!-- 锦旗头部导航 -->
        <view class="bf-top">
            <view class="bf-title-ope">
                <view class="bf-title-text">{{ pennant.title }}</view>
                <c-icon
                    name="exclamation-circle"
                    font-size="15px"
                    color="#858585"
                    @tap="handleNoFlagTipTap"
                />
            </view>
            <!-- 查看更多 -->
            <view
                v-if="pennant.tab && pennant.tab.link"
                class="c-color-gray c-font-medium-less"
                @tap="goList(pennant.tab.link)"
            >
                {{ pennant.tab.text }}<c-icon name="youjiantou"/>
            </view>
        </view>
        <!-- 有锦旗 -->
        <view class="flag-list">
            <view v-if="pennant.tag && pennant.tag.length" class="bf-scroll-wrap">
                <!-- tab区域-->
                <view class="tab-container">
                    <view class="tab-item-scroller">
                        <template>
                            <text
                                v-for="(tagItem, index) in pennant.tag"
                                :key="index"
                                :class="{'active': index === 0}"
                                class="tab-item c-gap-inner-left-xmiddle c-gap-inner-right-xmiddle c-gap-right-middle"
                                @tap.stop="navigateToFlaglist(tagItem.url)"
                            >
                                {{ tagItem.text }}({{ tagItem.count }})
                            </text>
                        </template>
                    </view>
                </view>
            </view>
            <view v-if="pennant.detail && pennant.detail.length" class="bf-scroll-wrap">
                <scroll-view scroll-x class="bf-scroll-view">
                    <view
                        v-for="(flagItem, index) in pennant.detail"
                        :key="index"
                        class="bf-row-view"
                        @tap="navigateLetterView(flagItem.h5URL)"
                    >
                        <c-flag
                            width="80px"
                            height="80px"
                            :flag-src="flagBackground"
                            :text="flagItem.pennant_content"
                        />
                        <view class="bf-doctor-name c-color-title">
                            {{ flagItem.doctor_name }}
                        </view>
                        <view class="bf-patient-username">
                            患者：{{ flagItem.user_name }}
                        </view>
                        <view class="bf-patient-comment c-line-clamp2">
                            {{ flagItem.letter }}
                        </view>
                        <view class="bf-release-time">
                            {{ flagItem.timeStr }}
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <!-- 没有锦旗   -->
        <view v-if="!(pennant.detail && pennant.detail.length)" class="bf-no-content">
            <image src="https://med-fe.cdn.bcebos.com/doctor/homepage/pennant.png" class="bf-noflag-img"/>
            <view class="bf-noflag-notip">
                {{ pennant.emptyContent1 }}
            </view>
            <view class="bf-noflag-tip">
                {{ pennant.emptyContent2 }}
            </view>
        </view>
        <!-- 赠送锦旗按钮 -->
        <view v-if="pennant.givePennantBtn && pennant.givePennantBtn.text" style="text-align: center;">
            <view class="bf-btn-send-btn" @tap="sendFlag">
                <view class="bf-btn-send">
                    <c-icon
                        name="plus"
                        font-size="16px"
                        color="#FD503E"
                        class="c-gap-right-xsmall"
                    />
                    <text>{{ pennant.givePennantBtn.text }}</text>
                </view>
            </view>
        </view>
        <!-- 锦旗墙解释 -->
        <c-dialog
            :show="isShowNoFlagTip"
            :btn-opts="btnOpts"
            :content="pennant.desc"
            :content-color="'#525252'"
            :content-padding="'0px 24px 23px'"
            @close="handleNoFlagTipTap"
        />
    </view>
</template>
<script>
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CDialog from '@baidu/med-ui/components/Dialog/Dialog';
import CFlag from '@components/doctor/flag';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        CDialog,
        CFlag,
    },
    props: {
        pennant: {
            type: Object,
            default: () => ({})
        },
        expertName: {
            type: String,
            default: ''
        },
        expertId: {
            type: String,
            default: ''
        },
        jqType: {
            type: String,
            default: ''
        },
        traceData: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            isShowNoFlagTip: false,
            flagBackground: 'https://med-fe.cdn.bcebos.com/doctor/homepage/pennant_small.png',
            btnOpts: [
                {
                    event: 'confirm',
                    text: '确定',
                    color: '#00C8C8',
                    fontSize: '18px',
                },
            ]
        };
    },
    methods: {
        // 提示信息
        handleNoFlagTipTap() {
            this.isShowNoFlagTip = !this.isShowNoFlagTip;
        },
        // 点击锦旗进入锦旗详情
        navigateLetterView(url) {
            const {jqType} = this;
            let ubc = jqType === 'hospital' ? 'hos_jq_main_clk' : 'depart_jq_main_clk';
            this.go(url, ubc);
        },
        // 送锦旗
        sendFlag() {
            const {jqType} = this;
            const {givePennantBtn, hasPennant} = this.pennant;
            let ubc = jqType === 'hospital' ? 'hos_jq_sjq_clk' : 'depart_jq_sjq_clk'; // 有锦旗
            if (!hasPennant) {
                ubc = jqType === 'hospital' ? 'hos_njq_sjq_clk' : 'depart_njq_sjq_clk'; // 没锦旗
            };
            this.go(givePennantBtn.link, ubc);
        },
        // 查看更多
        goList(url) {
            const {jqType} = this;
            let ubc = jqType === 'hospital' ? 'hos_jq_more_clk' : 'depart_jq_more_clk';
            this.go(url, ubc);
        },
        // 点击tag锦旗墙列表
        navigateToFlaglist(link) {
            const {jqType} = this;
            let ubc = jqType === 'hospital' ? 'hos_jq_tag_clk' : 'depart_jq_tag_clk';
            this.go(link, ubc);
        },
        // 跳转
        go(link, ubc) {
            if (!link) {
                return;
            }
            const {traceData} = this;
            navigate({
                url: link,
                log: {
                    type: 'clk',
                    value: traceData[ubc]
                }
            });
        }
    },
};
</script>
<style lang="less" scoped>

.brocade-flag {
    background: #fff;
    border-radius: 10px;
    /* 头部样式开始 */
    .bf-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .bf-title-ope {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .bf-title-text {
                font-size: 19px;
                font-weight: bold;
                color: #333;
                line-height: 19px;
                margin-right: 7px;
            }
        }
    }
    /* 头部样式结束 */
    /* 有锦旗列表样式开始 */
    .flag-list {
        margin: 15px 0;

        .bf-scroll-wrap {
            overflow: hidden;
        }

        .bf-scroll-view {
            white-space: nowrap;
            text-align: center;

            .bf-row-view {
                display: inline-block !important;
                width: 180px;
                height: 217px;
                padding: 15px 12px;
                box-sizing: border-box;
                margin-right: 8px;
                background: #f8f8f8;
                border-radius: 9px;
                text-align: left;

                .bf-doctor-name {
                    font-size: 14px;
                    text-align: center;
                    line-height: 14px;
                    font-weight: bold;
                    margin-top: 8px;
                }

                .bf-patient-username {
                    margin: 9px 0 0;
                    font-size: 14px;
                    line-height: 20px;
                    color: #525252;
                }

                .bf-patient-comment {
                    margin: 0 0 5px;
                    font-size: 14px;
                    line-height: 20px;
                    color: #525252;
                }

                .bf-release-time {
                    font-size: 13px;
                    color: #858585;
                    line-height: 13px;
                }
            }

            .bf-row-view:last-child {
                margin-right: 0;
            }
        }
    }
    /* 锦旗列表结束 */
    /* 没有锦旗样式 */
    .bf-no-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .bf-noflag-img {
            width: 100px;
            height: 59px;
            margin: 15px 0;
        }

        .bf-noflag-notip {
            font-size: 16px;
            color: #525252;
        }

        .bf-noflag-tip {
            font-size: 14px;
            color: #858585;
            margin: 5px 0 9px;
        }
    }

    .bf-btn-send-btn {
        display: inline-block;
    }

    .bf-btn-send {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid #f1f1f1;
        border-radius: 25px;
        font-size: 16px;
        color: #fd503e;
        font-weight: bold;
        padding: 7px 27px;
    }

    // 医院锦旗墙tag
    .tab-container {
        height: 32px;
        overflow: hidden;
        margin-bottom: 15px;

        .tab-item-scroller {
            display: flex;
            flex-direction: row;
            margin-top: -30px;
            transform: translateY(30px);
            padding-bottom: 30px;
            overflow-y: hidden;
            overflow-x: auto;

            .tab-item {
                display: inline-block;
                height: 33px;
                line-height: 33px;
                color: #1f1f1f;
                background: #f5f5f5;
                text-align: center;
                border-radius: 9px;
                flex: 0 0 auto;

                &.active {
                    font-family: PingFang-SC-Medium !important;
                    font-weight: 700;
                    color: #00c8c8;
                }
            }
        }
    }
}
</style>
