<template>
    <c-popup
        :show="false"
        :z-index="zIndex"
        :row-tile="rowTile"
        @close="onClose"
        @masktap="onClose"
    >
        <view class="popup-box">
            <view>
                <img
                    class="auth-logo"
                    :style="{width: '100px', height: '26px'}"
                    src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=862640574,2469927580&fm=179&app=35&f=PNG?w=769&h=199"
                >
            </view>
            <view>
                <view class="auth-title">授权 百度健康 获取以下信息为您服务</view>
                <view>
                    <view class="auth-rule">公开信息（用户头像、昵称）</view>
                    <view class="auth-rule">实名信息（姓名、身份证号）</view>
                    <view class="auth-rule">手机号信息</view>
                </view>
                <view class="status">
                    <c-icon
                        :name="status ? 'check-circle-solid' : 'check-circle'"
                        font-size="18px"
                        :style="{
                            color: '#00c8c8',
                        }"
                        class="icon"
                        @tap="handleCheck"
                    />
                    <text class="c-font-big c-gap-left-small text"> 已阅读并同意以下协议 </text>
                </view>
                <view>
                    查看
                    <text class="c-color-green" @tap="onAgreeTap('all')">《服务协议》</text>
                    <text class="c-color-green" @tap="onAgreeTap('allsecret')">《隐私政策》</text>
                    <text class="c-color-green" @tap="onAgreeTap('allagree')">《免责申明》</text>
                </view>
                <view class="cl-btn-row">
                    <view
                        v-for="(btn, btnIndex) in btns"
                        :key="btnIndex"
                        class="cl-btn-wrap"
                    >
                        <c-button
                            v-if="btn.event === 'cancel'"
                            :primary-color="btn.primaryColor"
                            :height="34"
                            :font-size="17"
                            :type="btn.type"
                            border-radius="6px"
                            class="cl-btn"
                            @tap="onClose(btn)"
                        >
                            {{ btn.text }}
                        </c-button>
                        <view 
                            v-else 
                            :class="status ? '' : 'cl-btn-disabled'"
                            class="cl-btn cl-btn-green"
                        >
                            <login-btn 
                                :text="btn.text"
                                :disabled="!status"
                                @onTapStart="onClose(btn)"
                                @onLoginSuccess="$emit('onLoginSuccess')"
                                @onLoginFail="onLoginFail"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </c-popup>
</template>

<script>
/**
 * @file 授权弹窗
 * @author zhangqian51
 * @categories 业务组件
 * @tags [component]
 */

import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CButton from '@baidu/med-ui/components/Button/Button';
import LoginBtn from '../common/login-btn';
import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 是否显示
         */
        isShow: {
            type: Boolean,
            default: false
        },
        /**
         * 层级
         */
        zIndex: {
            type: String,
            default: '921'
        },
        /**
         * 是否不要内边距
         */
        rowTile: {
            type: Boolean,
            default: false
        },
        /**
         * visibility
         * 是否只生效于 mask 上（在内容区 slot 上如果有输入框等容易在不同机型上出问题的控件，需要保持 content 一直显示）
         */
        visibilityOnlyMask: {
            type: Boolean,
            default: false
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            btns: [
                {
                    primaryColor: '#909090',
                    event: 'cancel',
                    text: '取消'
                },
                {
                    primary: true,
                    type: 'primary',
                    primaryColor: '#00c8c8',
                    event: 'allow',
                    text: '允许',
                    onlyClosePopup: isSwan
                }
            ],
            status: true, // 是否勾选协议
            loginFailStatus: false
        };
    },
    components: {
        CPopup,
        CIcon,
        CButton,
        LoginBtn
    },
    methods: {
        onLoginFail() {
            /**
             * emit 登录失败事件
             * @event onLoginFail
             */
            this.$emit('onLoginFail');
            this.onClose();
        },
        onClose(el) {
            if (el && el.primary && !this.status) {
                return;
            }
            else if (el && el.event === 'allow') {
                this.$api.setStorage({
                    key: 'allowAgreement',
                    data: true
                });
            }
            /**
             * emit 授权弹窗关闭事件
             * @event onLoginFail
             */
            this.$emit('close', el);
        },
        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 */
        },
        handleCheck() {
            this.status = !this.status;
        }
    }
};
</script>
<style lang="less">
.popup-box {
    padding: 30px 0 10px 0;
    font-size: 0.14rem;
    color: #333;
}
.auth-logo {
    width: 100px;
    height: 26px;
}
.auth-title {
    margin: 20px 0;
    font-size: 0.19rem;
    font-weight: bold;
    color: #000;
}
.auth-rule {
    color: #636363;
    line-height: 28px;
    position: relative;
    left: 8px;
}
.auth-rule::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #636363;
    position: relative;
    top: -3px;
    left: -8px;
}
.status {
    display: flex;
    align-items: center;
    height: 44px;
    background-color: #f8f8f8;
    border-radius: 0.08rem;
    padding-left: 10px;
    margin: 10px 0;
    .icon {
        vertical-align: middle;
    }
    .text {
        color: #333;
        display: inline-block;
        vertical-align: middle;
        font-size: 0.14rem;
    }
}
.cl-btn-row {
    display: flex;
    justify-content: space-between;
    padding: 26px 0 36px;
}
.cl-btn-wrap {
    width: calc(50% - 5px);
}
.cl-btn {
    height: 32px;
    line-height: 32px;
    font-size: 0.16rem;
    text-align: center;
    color: #fff;
    &.cl-btn-green {
        border: 1px solid #00c8c8;
        background: #00c8c8;
        border-radius: 6px;
        font-size: 17px;
    }
    &.cl-btn-disabled {
        opacity: .4;
    }
}
</style>
