<template>
    <c-dialog
        :show="isShow"
        :gap-top="15"
        :title-height="44"
        :btn-opts="custom ? custom.btn : btns"
        @btntap="onClose"
        @masktap="onClose"
    >
        <template v-if="custom">
            <view
                slot="title"
                class="cl-title c-gap-inner-bottom c-font-sigma">
                {{custom.title || '使用须知'}}
            </view>
            <view>
                <view v-for="(item, index) in custom.text" :key="index">
                    <view v-if="item.type === 'agreelink'">
                        <text>{{item.beforeText}}</text>
                        <text class="c-color-green" @tap="onAgreeTap('all')">《服务协议》</text>
                        <text>、</text>
                        <text class="c-color-green" @tap="onAgreeTap('allsecret')">《隐私政策》</text>
                        <text>和</text>
                        <text class="c-color-green" @tap="onAgreeTap('allagree')">《免责申明》</text>
                        <text>{{item.afterText}}</text>
                    </view>
                    <view v-else>{{item}}</view>
                </view>
            </view>
        </template>
        <template v-else>
            <view
                slot="title"
                class="cl-title c-gap-inner-bottom c-font-sigma">
                欢迎使用百度健康
            </view>
            <view>
                <text>感谢您信任并使用百度健康产品和服务，请您在使用前务必先认真阅读并同意</text>
                <text class="c-color-green" @tap="onAgreeTap('all')">《服务协议》</text>
                <text>、</text>
                <text class="c-color-green" @tap="onAgreeTap('allsecret')">《隐私政策》</text>
                <text>和</text>
                <text class="c-color-green" @tap="onAgreeTap('allagree')">《免责申明》</text>
                <view>您点击【继续使用】，即表示您已阅读并同意上述协议条款，百度健康将尽全力保障您的合法权益并继续为您提供优质产品和服务；如您点击【不同意】，将可能导致无法继续使用我们产品和服务。</view>
            </view>
        </template>
    </c-dialog>
</template>

<script>
/**
 * @file 授权弹窗
 * @author chenshuo04
 */

import Dialog from '@baidu/med-ui/components/Dialog/Dialog';
import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    props: {
        isShow: {
            'type': Boolean,
            'default': false
        },
        custom: {
            type: Object
        }
    },
    data() {
        return {
            btns: [
                {
                    color: '#333',
                    event: 'cancel',
                    text: '不同意'
                },
                {
                    color: '#00c8c8',
                    event: 'allow',
                    text: '继续使用'
                }
            ]
        };
    },
    components: {
        'c-dialog': Dialog
    },
    methods: {
        onClose(info) {
            if (info && info.btn.event === 'allow' && !this.custom) {
                this.$api.setStorage({
                    key: 'allowAgreement',
                    data: true
                });
            }
            const ev = info ? info.btn.event : '';
            this.$emit('close', ev);
        },
        onAgreeTap(type) {
            /* eslint-disable */
            switch (type) {
                case 'all':
                    navigate({url: '/pages/wz/agreement/index?pd=med&openapi=1&from_sf=1&resource_id=5216&vn=med&title=《服务协议》&type=all&atn=agreement'});
                    break;
                case 'allagree':
                    navigate({url: '/pages/wz/agreement/index?pd=med&openapi=1&from_sf=1&resource_id=5216&vn=med&title=《免责声明》&type=allagree&atn=agreement'});
                    break;
                case 'allsecret':
                    navigate({url: '/pages/wz/agreement/index?pd=med&openapi=1&from_sf=1&resource_id=5216&vn=med&title=《隐私政策》&type=allsecret&atn=agreement'});
                    break;
                default:
                    break;
            }
            /* eslint-disable */
        }
    }
};
</script>
<style lang="less">
.cl-title {
    text-align: center;
    color: #333;
}
.cl-content-item {
    display: flex;
    align-items: center;
}
.cl-img {
    box-sizing: border-box;
    height: .3rem;
    width: .3rem;
}
.cl-text {
    width: calc(100% - .3rem);
    overflow: hidden;
}
.cl-btn {
    margin: 20px;
    margin-top: 0;
    border-radius: 22px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    background: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
}
</style>