<template>
    <view class="advance-wrap c-gap-top c-gap-left c-gap-right">
        <view class="advance-wrap__sub">
            <view v-if="data.label" class="advance-wrap__label">{{ data.label }}</view>
            <view v-if="data.text" class="advance-wrap__text">{{ data.text }}</view>
            <view
                v-if="data.icon"
                class="m-icon c-color-gray advance-wrap__icon"
                :class="'m-icon-' + data.icon"
                @tap.stop="showDialog"
            />
        </view>
        <login-btn
            v-if="data.option && data.option.text"
            class="advance-wrap__option"
            :style="[{
                background: status === 3 ? '#00C8C8' : '#F5F5F5',
                color: status === 3 ? '#FFFFFF' : '#858585',
            }]"
            @onTapStart="onTapStart(data.option)"
            @onLoginSuccess="onRemind(data.option)"
        >
            <view v-if="status === 1" class="m-icon m-icon-yugao advance-wrap__option__icon c-inline-block"/>
            <view class="c-inline-block">{{ text }}</view>
        </login-btn>
        <c-dialog
            v-show="dialogCont.show"
            :show="dialogCont.show"
            content-text-align="left"
            :btn-opts="dialogCont.btnOpts"
            @close="dialogClose"
            @confirm="dialogClose"
        >
            <view v-if="data.explain && data.explain.length">
                <view
                    v-for="(t, i) in data.explain"
                    :key="i"
                    :class="i > 0 && 'c-gap-top'"
                >{{ t }}</view>
            </view>
        </c-dialog>
    </view>
</template>

<script>
/**
 * @file 体检预约提醒
 * @author zhanngqian51@baidu.com
 * @categories 业务组件
 * @tags [component]
*/
import LoginBtn from '@commonComponents/login-btn';
import CDialog from '@baidu/med-ui/components/Dialog/Dialog';

import {request} from '@utils/request';
import * as login from '@utils/login';
import * as conf from '@utils/conf';
import {toLoginPage} from '@utils/login';


const statusText = ['提醒我', '取消提醒', '即将开始'];
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        LoginBtn,
        CDialog
    },
    props: {
        /**
         * 预约信息
         */
        data: {
            'type': Object,
            'default': () => {}
        },
        /**
         * 用户登录态
         */
        isLogin: {
            'type': Number,
            'default': 0
        },
    },
    data() {
        return {
            status: 0,
            text: '',
            // 弹窗
            dialogCont: {
                show: false,
                btnOpts: [{
                    event: 'confirm',
                    text: '我知道了',
                    color: '#FD503E'
                }]
            },
        };
    },
    created() {
        this.status = this.data.status;
        this.text = statusText[this.status - 1] || '';
    },
    watch: {
        status(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.status = newVal;
                this.text = statusText[newVal - 1];
            }
        }
    },
    lifetimes: {
        detached() {
            this.$set(this, 'status', 0);
            this.$set(this, 'text', '');
        }
    },
    methods: {
        onTapStart(option) {
            if (process.env.MARS_ENV === 'h5') {
                if (!this.isLogin && this.button.status < 3) {
                    login.toH5LoginPage({isReplaceUrl: true});
                } else {
                    this.onRemind(option);
                }
            }
        },
        onRemind(option) {
            toLoginPage;
            if (option.url) {
                request({
                    url: conf.apiHost + option.url,
                    method: 'POST',
                    isNeedLogin: true,
                    data: Object.assign({}, {status: this.status}),
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    }
                }).then(res => {
                    let {data} = res;
                    this.$api.showToast({
                        icon: 'none',
                        title: data.toast
                    });
                    this.$set(this, 'status', data.status);
                    this.$set(this, 'text', statusText[data.status - 1]);
                    this.$emit('updateStatus', this.status);
                }).catch(err => {
                    console.error(err);
                });
            }
        },
        showDialog() {
            this.dialogCont.show = true;
        },
        dialogClose() {
            this.dialogCont.show = false;
        }
    }
};
</script>
<style lang="less" scoped>
.advance-wrap {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 9px;
    padding: 12px 13px;
    &__sub {
        display: flex;
        align-items: center;
    }
    &__label {
        width: .15rem;
        height: .15rem;
        line-height: .15rem;
        text-align: center;
        background: #FD503E;
        border-radius: .03rem;
        font-size: .12rem;
        color: #FFFFFF;
        margin-right: .03rem;
    }
    &__text {
        font-size: .14rem;
        color: #FD503E;
        line-height: .14rem;
        margin-right: .04rem;
    }
    &__icon {
        font-size: .12rem;
        line-height: .15rem;
    }
    &__option {
        font-size: .12rem;
        line-height: .15rem;
        padding: 0 .06rem;
        border-radius: .1rem;
        display: flex;
        &__icon {
            font-size: .12rem;
            margin-right: .03rem;
        }
    }
}
</style>

