<template>
    <div>
        <van-nav-bar
                title="dialog弹层"
                left-arrow
                @click-left="back"
        />
        <div class="page">
            <ul>
                <li class="section">
                    <y-button topic="main" text="confirm" @click="fnClick(1)"></y-button>
                </li>
                <li class="section">
                    <y-button topic="main" text="local" v-on:click="uiShow = true"></y-button>
                    <y-dialog dis-global
                              prop-type="confirm"
                              prop-tips-cancel="联系客服1"
                              :prop-uishow.sync="uiShow"
                              prop-title="tttt">
                        <y-button topic="main"
                                  slot="cancel"
                                  plain
                                  text="联系客服"
                                  size="small"
                                  custom-class="y_dialog_button"></y-button>
                    </y-dialog>
                </li>
                <li class="section">
                    <y-button topic="main" text="b" v-on:click="uiShowB = true"></y-button>
                    <y-dialog dis-global
                              prop-type="confirm"
                              prop-tips-cancel="联系客服2"
                              :prop-uishow.sync="uiShowB">
                        <div slot="title">dfadf</div>
                    </y-dialog>
                </li>
                <li class="section">
                    <y-button topic="main" text="c" v-on:click="uiShowC = true"></y-button>
                    <y-dialog dis-global
                              prop-type="confirm"
                              prop-tips-cancel="联系客服3"
                              prop-desc="celdksjfalfj的身份卡积分"
                              :prop-options="{autoHide:false}"
                              :prop-uishow.sync="uiShowC"
                              :loading-enter="loadingEnter"
                              @clickCancel="fnCancel"
                              @clickEnter="fnEnter"
                              prop-title="">
                    </y-dialog>
                </li>
                <li class="section">
                    <y-button topic="main" text="d" v-on:click="uiShowD = true"></y-button>
                    <y-dialog dis-global
                              prop-topic="normal"
                              prop-type="confirm"
                              prop-tips-cancel="联系客服4"
                              :prop-uishow.sync="uiShowD"
                              prop-title="abc">
                    </y-dialog>
                </li>
                <li class="section">
                    <y-button topic="main" text="宠物类主题" v-on:click="uiShowE = true"></y-button>
                    <y-dialog dis-global
                              prop-topic="pet"
                              prop-type="confirm"
                              prop-desc="这是一个宠物主题的弹窗,这是一个宠物主题的弹窗,这是一个宠物主题的弹窗"
                              prop-tips-cancel="宠物类主题"
                              :prop-uishow.sync="uiShowE"
                              prop-title="宠物类主题">
                    </y-dialog>
                </li>
                <li class="section">
                    <y-button topic="main" text="宠物类主题" v-on:click="uiShowF = true"></y-button>
                    <y-dialog dis-global
                              prop-topic="pet"
                              prop-type="dialog"
                              prop-desc="这是一个宠物主题的弹窗,这是一个宠物主题的弹窗,这是一个宠物主题的弹窗"
                              prop-tips-cancel="宠物类主题"
                              :prop-uishow.sync="uiShowF">
                        <div slot="title" class="ui_title">
                            宠物类标题变色
                        </div>
                    </y-dialog>
                </li>
                <li class="section">
                    <y-button topic="main" text="失败" v-on:click="fnClickB(3)"></y-button>
                </li>
                <li class="section">
                    <y-button topic="main" text="HTML" v-on:click="fnClickC()"></y-button>
                </li>
                <li class="section">
                    <y-button topic="main" text="topic:window" v-on:click="fnClickD()"></y-button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {NavBar,Calendar } from 'vant';
    import yButton from '../components/yButton'
    import yDialog from "../components/v2/yDialog";

    export default {
        components: {
            [NavBar.name]: NavBar,
            [Calendar .name]: Calendar ,
            yButton,
            yDialog
        },
        data:()=>{
            return {
                tipsShow:false,
                tipsShowB:false,
                uiShow:false,
                uiShowB:false,
                uiShowC:false,
                uiShowE:false,
                uiShowF:true,
                loadingEnter:false,
                uiShowD:false,
                show:false,
            }
        },
        methods:{
            fnClick(e){
                yDialog.confirm("你好");
            },
            fnClickB(e){
                yDialog.dialog("你好",{
                    buttonEnterTopic:"gray",
                });
            },
            fnClickC(e){
                yDialog.dialog("sdlkfjklsadf<br/>dsafsdfasdf",{
                    isHtml:true
                });
            },
            fnCancel(cb){
                console.log(1);
                cb &&cb();
            },
            fnEnter(cb){
                const self = this;
                self.loadingEnter = true
                setTimeout(()=>{
                    cb();
                    self.loadingEnter = false
                },1500)
            },
            fnClickD(e){
                yDialog.dialog(
                    "<div>" +
                    "<h5>活动说明</h5>" +
                    "<div><ul> " +
                    "<li>新用户注册即可获得XXX元大礼包</li>" +
                    "<li>本活动属于新注册用户专享福利，每位用户仅享受1次<li/>" +
                    "*在法律许可范围内，yesaway保留对活动的解释权</div>" +
                    "</ul></div>" +
                    "</div>",{
                    isHtml:true,
                    topic:"window"
                });
            },
            back:()=>{
                window.history.go(-1);
            }
        },
        mounted(){
            //yDialog.confirm("你好");
        }
    }
</script>

<style scoped>
    .page {
        padding: 10px;
    }
    .ui_title{
        color:#f00
    }
</style>
