<template>
    <!-- 外层包围 -->
    <view
        v-if="item && item.type === 'guide-card'"
        class="cw__outer"
    >
        <!-- 内容框 -->
        <view class="cw__contain">
            <!-- 标题 -->
            <view v-if="item.title">
                <view
                    class="cw__proTitle"
                >{{ item.title }}</view>
            </view>
            <!-- 流程 -->
            <view
                v-if="item.list && item.list.length"
                class="cw__process"
            >
                <view
                    v-for="(itemTxt, index) in item.list"
                    :key="index"
                    class="cw__pro_mid"
                >
                    <view class="cw__proPer">
                        <view class="cw__pro-icon-box">
                            <c-icon
                                :name="itemTxt.iconname"
                                :font-size="index === 0 ? '14px' : '17px'"
                            />
                        </view>
                        <view class="cw__proPerWord">{{ itemTxt.text }}</view>
                    </view>
                    <c-icon
                        v-if="index !== item.list.length - 1"
                        name="next-icon"
                        class="cw__nextpro"
                    />
                </view>
            </view>
            <!-- 提示 -->
            <view v-if="item.warmTip">
                <view class="cw__nicetip">{{ item.warmTip }}</view>
            </view>
            <!-- 按钮 -->
            <view v-if="item.btnTxt" class="cw__btnBox">
                <c-button
                    :height="42"
                    :font-size="16"
                    font-weight="700"
                    primary-color="#FFFFFF"
                    background="linear-gradient(134deg, #00CFA3 0%, #00D3EA 100%)"
                    shadow
                    border-radius="22px"
                    class="cw__btn"
                    :style="{
                        width: '100%',
                    }"
                    @tap="onCopyBtnText('百度健康服务号')"
                >百度健康服务号【立即复制】</c-button>
            </view>
        </view>
    </view>
</template>
<script>
/**
 * @file 问诊-匹配提示+引导关注公众号
 * @author zhoushisen
 * @categories 业务组件
 * @tags [component]
 */

import CButton from '@baidu/med-ui/components/Button/Button';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true,
    },
    props: {
        /**
        * 数据对象
        */
        item: {
            'type': Object,
            'default': () => ({}),
        },
    },
    components: {
        CButton,
        CIcon,
    },
    lifetimes: {
        attached() {
            ubcSend({
                type: 'view',
                value: 'im_card_wx',
            });
        },
    },
    methods: {
        onCopyBtnText(text) {
            const data = text;
            ubcSend({
                type: 'clk',
                value: 'im_card_wx',
            });
            this.$api.setClipboardData({
                data,
                success: () => {
                    this.$api.showToast({
                        title: '复制成功，请通过微信搜索关注公众号',
                        icon: 'none',
                    });
                },
                fail: () => {
                    this.$api.showToast({
                        title: '复制失败',
                        icon: 'none',
                    });
                },
            });
        },
    },
};

</script>
<style lang="less" scoped>
.cw__outer {
    background-color: #fff;
    border-radius: 0.09rem;
    overflow: hidden;
    width: 100%;
    margin: 0 auto 0.2rem;
}

.cw__contain {
    width: scale(100% - 24px);
    padding: 0.1rem 0.12rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.cw__proTitle {
    font-size: 0.17rem;
    color: #1f1f1f;
    font-weight: 600;
    text-align: center;
    line-height: 0.15rem;
    margin: 0.08rem 0 0.14rem;
}

.cw__process {
    display: flex;
    justify-content: space-between;
    margin: 0.08rem 0 0.12rem;
}

.cw__pro_mid {
    display: flex;
    justify-content: space-between;
}

.cw__pro_mid .cw__nextpro {
    align-self: flex-end;
    margin-bottom: -0.05rem;
}

.cw__proPer {
    text-align: center;
}

.cw__pro-icon-box {
    width: 0.16rem;
    height: 0.16rem;
    margin: 0 auto 0.15rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cw__nextpro {
    font-size: 0.1rem;
    color: #ddd;
    padding: 0 0.03rem;
    white-space: nowrap;
}

.cw__proPerWord {
    font-size: 0.13rem;
    line-height: 0.13rem;
    color: #1f1f1f;
}

.cw__proPerWordLogo {
    color: #1f1f1f;
    line-height: 0.11rem;
    margin-bottom: 0.15rem;
    display: block;
}

.cw__proPerWordLogoNote {
    color: #1f1f1f;
    line-height: 0.11rem;
    margin-bottom: 0.16rem;
    margin-top: -0.01rem;
    display: block;
}

.cw__nicetip {
    font-size: 0.13rem;
    color: #858585;
    line-height: 0.13rem;
    margin: 0.06rem 0 0.09rem;
}

.cw__btnBox {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.03rem;
}

.cw__btn {
    margin: 0.08rem 0;
}

</style>
