<template>
    <view class="selbtn">
        <view
            v-for="(btn, i) in item.list"
            :key="i"
            @tap="onTap(btn)"
            class="btn c-gap-top"
            :style="{'background': stl[item.displayType === 'gradual' && i <= stl.length - 1 ? i : 2].bg}">
            <view
                class="btnl c-gap-inner-right-small"
                :style="{'color': stl[item.displayType === 'gradual' && i <= stl.length - 1 ? i : 2].color}">
                <view class="c-font-normal">
                    <text class="btnl-title">{{ btn.title }}</text>
                    <c-icon
                        name="arrow-right-circle"
                        font-size="14px"
                        class="btnl-icon c-gap-left-small"></c-icon>
                </view>
                <view class="btnl-txt c-font-tiny">{{ btn.sub }}</view>
            </view>
            <view class="btnr">
                <div class="c-font-15">{{ btn.explanation }}</div>
                <view
                    v-if="btn.tag_content"
                    class="btnr-tag">{{ btn.tag_content }}</view>
            </view>
        </view>
        <!-- 免费对话框 -->
        <c-dialog
            :show="isShowFree"
            :btn-opts="[{
                'text': item.leftBtnText,
                'event': 'confirm'
            },
            {
                'text': item.rightBtnText,
                'event': 'cancel'
            }]"
            :title-height="34"
            @btntap="onTapFree">
            <view
                slot="title"
                class="c-font-sigma sel-title c-gap-bottom">
                {{ item.title }}
            </view>
            <view class="c-font-medium c-color-gray">{{ item.text && item.text[0] }}</view>
        </c-dialog>
    </view>
</template>

<script>
/**
* @file 付费选择
* @author haoyan
*/
import Icon from '@baidu/med-ui/components/Icon/Icon';
import Dialog from '@baidu/med-ui/components/Dialog/Dialog';

import {navigate} from '../../utils/navigate';
import {send} from '../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        item: {
            type: Object,
            default: {}
        },
        isLast: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isShow: false, // 是否显示免责声明
            isShowFree: false, // 是否显示免费弹层
            isConfirm: false, // 是否确认服务
            chkBtn: {}, // 选中的选项
            stl: [ // 选项样式
                {
                    bg: 'linear-gradient(90deg, #f5e6c2 0%, #fcf9ed 100%)',
                    color: '#ba9041'
                },
                {
                    bg: 'linear-gradient(90deg, #c2ecec 0%, #e5f8fa 100%)',
                    color: '#02b8bf'
                },
                {
                    bg: 'linear-gradient(90deg, #f5f5f5 0%, #fafafa 100%)',
                    color: '#555'
                }
            ]
        };
    },
    components: {
        'c-icon': Icon,
        'c-dialog': Dialog
    },
    methods: {
        // 点击[付费选择]
        onTap(btn) {
            let isUse = this.item.canAlwaysClick || (this.isLast && !this.isConfirm);
            if (!isUse) {
                return;
            }
            this.chkBtn = btn;
            if (Number(btn.price) === 0) {
                // 免费弹层
                this.isShowFree = true;
            }
            else {
                this.confirm();
            }
        },
        // 点击免费弹层按钮
        onTapFree(info) {
            const btn = info.btn;
            if (btn.event === 'confirm') {
                this.confirm();
            }
            this.isShowFree = false;
        },
        // 确认继续
        confirm() {
            if (Number(this.chkBtn.price) <= 0) {
                this.isConfirm = true;
            }
            if (this.item.callbackUrl) {
                if (Number(this.chkBtn.price) > 0) {
                    this.$api.showLoading({
                        title: '正在跳转支付...'
                    });
                }
                this.$emit('questionReply', {
                    callbackUrl: this.item.callbackUrl,
                    params: this.chkBtn.type
                });
            }
            else if (this.chkBtn.msUrl || this.chkBtn.sfUrl) {
                navigate({
                    url: this.chkBtn.msUrl || this.chkBtn.sfUrl
                });
            }
        }
    }
};
</script>

<style lang="less">
.sel-title {
    text-align: center;
}
.btn {
    display: table;
    table-layout: fixed;
    min-height: .64rem;
    padding-left: .09rem;
    padding-right: .05rem;
    border-radius: .1rem;
    width: 95%;
}
.btnl {
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    .btnl-title {
        font-weight: 900;
    }
    .btnl-icon {
        opacity: .5;
    }
    .btnl-txt {
        white-space: nowrap;
    }

}
.btnr {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    color: #F60;
    overflow: hidden;
    width: .54rem;

    .btnr-tag {
        margin-top: -.01rem;
        border: 1px solid #f3d9c5;
        color: #ff6050;
        display: inline-block;
        overflow: hidden;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        height: 10px;
        margin-bottom: 2px;
        padding: 1px 2px;
        font-size: 10px;
        font-weight: 400;
        font-style: normal;
        line-height: 11px;
        vertical-align: middle;
        text-decoration: none;
        border-radius: 2px;
    }
}

</style>