<template>
    <view>
        <van-popup
            :show="showClone"
            :z-index="zIndex"
            :overlay="overlay"
            :transition="transition"
            :custom-class="'van-dialog ' + className"
            :custom-style="'width: ' + utils.addUnit(width) + ';' + customStyle"
            :overlay-style="overlayStyle"
            :close-on-click-overlay="closeOnClickOverlay"
            @close="onClickOverlay"
        >
            <view v-if="title || useTitleSlot" :class="'van-dialog__header ' + (message || useSlot ? '' : 'van-dialog--isolated')">
                <slot v-if="useTitleSlot" name="title" />
                <block v-else-if="title">{{ title }}</block>
            </view>

            <slot v-if="useSlot" />
            <view
                v-else-if="message"
                :class="'van-dialog__message ' + (title ? 'van-dialog__message--has-title' : '') + ' ' + (messageAlign ? 'van-dialog__message--' + messageAlign : '')"
            >
                <text class="van-dialog__message-text">{{ message }}</text>
            </view>

            <view class="van-hairline--top van-dialog__footer">
                <van-button
                    v-if="showCancelButton"
                    size="large"
                    :loading="loading.cancel"
                    class="van-dialog__button van-hairline--right"
                    custom-class="van-dialog__cancel"
                    :custom-style="'color: ' + cancelButtonColor"
                    @click="onCancel"
                >
                    {{ cancelButtonText }}
                </van-button>
                <van-button
                    v-if="showConfirmButton"
                    size="large"
                    class="van-dialog__button"
                    :loading="loading.confirm"
                    custom-class="van-dialog__confirm"
                    :custom-style="'color: ' + confirmButtonColor"
                    :open-type="confirmButtonOpenType"
                    :lang="lang"
                    :business-id="businessId"
                    :session-from="sessionFrom"
                    :send-message-title="sendMessageTitle"
                    :send-message-path="sendMessagePath"
                    :send-message-img="sendMessageImg"
                    :show-message-card="showMessageCard"
                    :app-parameter="appParameter"
                    @click="onConfirm"
                    @getuserinfo="bindGetUserInfo"
                    @contact="bindContact"
                    @getphonenumber="bindGetPhoneNumber"
                    @error="bindError"
                    @launchapp="bindLaunchApp"
                    @opensetting="bindOpenSetting"
                >
                    {{ confirmButtonText }}
                </van-button>
            </view>
        </van-popup>
    </view>
</template>
<script module="utils" lang="wxs" src="@/node_modules/@vant/weapp/dist/wxs/utils.wxs"></script>
<script>
import { VantComponent } from '../common/component';
import { button } from '../mixins/button';
import { openType } from '../mixins/open-type';
import { GRAY, BLUE } from '../common/color';
export default {
    data() {
        return {
            loading: {
                confirm: false,
                cancel: false
            },

            lang: '',
            businessId: '',
            sessionFrom: '',
            sendMessageTitle: '',
            sendMessagePath: '',
            sendMessageImg: '',
            showMessageCard: '',
            appParameter: '',
            showClone: false
        };
    },
    mixins: [button, openType],
    props: {
        show: {
            type: Boolean
        },
        title: String,
        message: String,
        useSlot: Boolean,
        className: String,
        customStyle: String,
        asyncClose: Boolean,
        messageAlign: String,
        overlayStyle: String,
        useTitleSlot: Boolean,
        showCancelButton: Boolean,
        closeOnClickOverlay: Boolean,
        confirmButtonOpenType: String,
        width: null,
        zIndex: {
            type: Number,
            default: 2000
        },
        confirmButtonText: {
            type: String,
            default: '确认'
        },
        cancelButtonText: {
            type: String,
            default: '取消'
        },
        confirmButtonColor: {
            type: String,
            default: BLUE
        },
        cancelButtonColor: {
            type: String,
            default: GRAY
        },
        showConfirmButton: {
            type: Boolean,
            default: true
        },
        overlay: {
            type: Boolean,
            default: true
        },
        transition: {
            type: String,
            default: 'scale'
        }
    },
    methods: {
        onConfirm() {
            this.handleAction('confirm');
        },

        onCancel() {
            this.handleAction('cancel');
        },

        onClickOverlay() {
            this.onClose('overlay');
        },

        handleAction(action) {
            if (this.asyncClose) {
                this.setData({
                    [`loading.${action}`]: true
                });
            }
            this.onClose(action);
        },

        close() {
            this.setData({
                showClone: false
            });
        },

        stopLoading() {
            this.setData({
                loading: {
                    confirm: false,
                    cancel: false
                }
            });
        },

        onClose(action) {
            if (!this.asyncClose) {
                this.close();
            }
            this.$emit('close', action);
            // 把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
            this.$emit(action, {
                dialog: this
            });
            const callback = this[action === 'confirm' ? 'onConfirm' : 'onCancel'];
            if (callback) {
                callback(this);
            }
        },

        bindGetUserInfo() {
            console.log('占位：函数 bindGetUserInfo 未声明');
        },

        bindContact() {
            console.log('占位：函数 bindContact 未声明');
        },

        bindGetPhoneNumber() {
            console.log('占位：函数 bindGetPhoneNumber 未声明');
        },

        bindError() {
            console.log('占位：函数 bindError 未声明');
        },

        bindLaunchApp() {
            console.log('占位：函数 bindLaunchApp 未声明');
        },

        bindOpenSetting() {
            console.log('占位：函数 bindOpenSetting 未声明');
        }
    },
    watch: {
        show: {
            handler: function (show) {
                this.showClone = this.clone(this.show);
                if (!show) {
                    this.stopLoading();
                }
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
