<template>
    <div class="nus_dialog">
        <nu-funicon
            class="nu_dialog-close"
            v-if="isCloseBtn"
            :icon="'\ue606'"
            @click="_close"
            @tap="_close">
        </nu-funicon>
        <div class="nu_dialog-wrap">
            <div class="nu_dialog-hd" v-if="title || icon">
                <nu-textt
                    v-if="title"
                    type="textt"
                    :row="1">
                    <nu-funicon
                        v-if="icon"
                        class="nu_hd-icon"
                        :icon="icon">
                    </nu-funicon><span
                        class="nu_hd-text">
                        {{title}}
                    </span>
                </nu-textt>
            </div>
            <div class="nu_dialog-bd"
                v-html="content">
            </div>
        </div>
        <div class="nu_dialog-ft"
            :class="[myBtns && myBtns.length> 2 && 'nu_btn-vertical']"
            v-if="myBtns && myBtns.length">
            <btn-item
                class="nu_btn-item"
                v-for="(item, index) in myBtns"
                :style="myBtns.length < 3 && {width: width}"
                :data="filterBtnName(item)"
                :key="index"
                @click="_click($event, index, item)"
                @tap="_tap($event, index, item)">
            </btn-item>
        </div>
    </div>
</template>

<script>
import WidgetTmp from '../_comm/WidgetTmp';
import BtnItem from './btnItem/BtnItem';
import NuFunicon from '../funicon';
import nuTextt from '../text/textt';
import confirm from '../../../Mixins/confirm';

export default {
    extends: WidgetTmp,
    name: 'NuDialog',
    props: {
        /**
         * 标题
         */
        title: {
            type: String
        },
        /**
         * 正文
         */
        content: {
            type: String,
            default: ''
        },
        /**
         * 图标
         */
        icon: {
            type: String
        },
        /**
         * 是否显示关闭按钮
         */
        isCloseBtn: {
            type: Boolean,
            default: false
        },
        /**
         * 按钮列表
         */
        btns: {
            type: [String, Array, Object]
        }
    },
    components: {
        BtnItem,
        NuFunicon,
        nuTextt
    },
    computed: {
        myBtns() {
            let btns = this.btns;
            let res = btns;
            if (btns && typeof btns === 'string') {
                res = [btns];
            }
            if (!(res instanceof Array && res.length)) {
                res = null;
            }
            return res;
        },
        width() {
            let btns = this.myBtns;
            let len = (btns && btns.length) || 1;
            return (100 / len) + '%';
        }
    },
    mixins: [confirm()],
    methods: {
        /**
         * 过滤按钮名称
         * @param {*} item 按钮项数据
         * @returns {String}
         */
        filterBtnName(item) {
            let res = item;
            if (!(item instanceof Object)) {
                res = {
                    text: item || ''
                };
            }
            return res;
        },
        /**
         * 关闭
         * @param {*} evt 事件对象
         */
        _close(evt) {
            this.$emit('closePopup', evt);
        },
        /**
         * 确认
         * @param {Number} index 当前按钮的索引
         * @param {*} item 当前按钮数据
         */
        _onConfirm(index, item) {
            this._confirm({
                index: index,
                itemData: item
            });
        },
        /**
         * tap事件
         * @param {*} evt 事件对象
         * @param {Number} index 当前按钮的索引
         * @param {*} item 当前按钮数据
         */
        _tap(evt, index, item) {
            this._onTap(evt);
            this._onConfirm(index, item);
        },
        /**
         * click事件
         * @param {*} evt 事件对象
         * @param {Number} index 当前按钮的索引
         * @param {*} item 当前按钮数据
         */
        _click(evt, index, item) {
            this._onClick(evt);
            this._onConfirm(index, item);
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nu_dialog-popup {
    &.nus_popup{
        .nu_content-wrap{
            width: 72%;
        }
    }
}
.nus_dialog {
    text-align: center;
    line-height: 2em;
    color: $nudialog-color-default;
    border-color: $nudialog-border-color;
    background: $nudialog-bg-color;
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    border-radius: $nudialog-border-radius;
    box-shadow: $nudialog-box-shadow;
    font-size: $nudialog-font-size;
    text-align: center;
    max-width: $nudialog-max-width;
    .nu_dialog-close{
        line-height: 1;
        position: absolute;
        right: $nudialog-close-right;
        top: $nudialog-close-top;
        cursor: pointer;
        .nu_tcicon {
            font-size: $nudialog-close-size;
            width: $nudialog-close-size;
        }
        @include iconPadding();
    }
    .nu_dialog-hd {
        text-align: center;
        font-size: $nudialog-large-font-size;
        line-height: 1.375;
        margin-top: 18px;
    }
    .nu_hd-icon{
        font-size: inherit;
        vertical-align: middle;
        margin-right: 8px;
        .nu_tcicon{
            line-height: 1;
            vertical-align: middle;
            width: 1em;
            font-size: inherit;
        }
    }
    .nu_hd-text {
        display: inline-block;
        vertical-align: middle;
    }
    .nu_dialog-bd {
        display: inline-block;
        width: 100%;
        margin: 12px 0;
        line-height: 1.44;
        padding: 0 9.3333%;
    }
    .nu_dialog-ft {
        overflow: hidden;
        line-height: 44px;
        position: relative;
        border-color: inherit;
        font-size: $nudialog-large-font-size;
        font-weight: 500;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
        &::after{
            content: '';
            position: absolute;
            border-width: $nudialog-border-width;
            border-top-style: solid;
            border-color: inherit;
            top: 0;
            left: 0;
            right: 0;
            transform: scaleY(.5);
        }
    }
    .nu_btn-vertical{
        border-color: inherit;
        .nu_btn-item {
            display: block;
            position: relative;
            border-color: inherit;
            &::after{
                content: '';
                height: 0;
                position: absolute;
                border-width: $nudialog-border-width;
                border-top-style: solid;
                border-color: inherit;
                bottom: 0;
                left: 0;
                right: 0;
                transform: scaleY(.5);
            }
        }
    }
    .nu_btn-item {
        position: relative;
        border-color: inherit;
        border-width: inherit;
        &:first-child {
            &::after{
                display: none;
            }
        }
        &::after{
            content: '';
            position: absolute;
            border-width: $nudialog-border-width;
            border-left-style: solid;
            border-color: inherit;
            top: 0;
            left: 0;
            bottom: 0;
            transform: scaleX(.5);
        }
    }
    .nu_btn-highlight {
        color: $nudialog-color;
    }
}
</style>
