<template>
    <layer v-bind="$attrs" :appear="true" :show="value" :class="['vui-dialog',`vui-dialog-${page.type}`]">
        <div class="vui-dialog-box">
            <span class="va-close-icon vui-dialog-close" v-if="close" @click="onClose"></span>
            <p class="vui-dialog-title" v-if="title">{{title}}</p>
            <div class="vui-dialog-content">
                <slot></slot>
            </div>
            <div class="vui-dialog-footer" v-if="btns.length">
                <template v-for="(btn,index) in btns">
                    <span :class="{[`vui-dialog-${btn.type}`]:btn.type}"
                          :style="{width:`${btns.length>1?90/btns.length:100}%`}"
                          @click="$emit('btn-click',index)">{{btn.text}}</span>
                    <template></template>
                </template>
            </div>
        </div>
    </layer>
</template>

<style>
    .vui-dialog-box {
        position: fixed;
        left: 50%;
        top: 50%;
        padding: .6rem .5rem .5rem;
        min-width: 60%;
        line-height: normal;
        text-align: center;
        background: #fff;
        border-radius: .1rem;
        transform: translate(-50%, -50%);
    }

    .vui-dialog-close {
        right: .24rem;
        top: .24rem;
    }

    .vui-dialog-title {
        margin: 0 0 .6em;
        color: #000;
        font-size: .5rem;
    }

    .vui-dialog-content {
        padding: .48em 0;
        color: #666;
        font-size: .42rem;
    }

    .vui-dialog-footer {
        padding-top: .4rem;
        font-size: 0;
        text-align: justify;
    }

    .vui-dialog-footer::after {
        content: "";
        display: inline-block;
        width: 100%;
    }

    .vui-dialog-footer > span {
        display: inline-block;
        box-sizing: border-box;
        color: #aaa;
        font-size: .38rem;
        line-height: 2.1;
        text-align: center;
        border-radius: .08rem;
        border: .03rem solid #c1c1c1;
    }

    .vui-dialog-footer > .vui-dialog-primary {
        color: #fff;
        border-color: #ff7b2c;
        background: #ff7b2c;
    }

    /*pc样式*/
    .vui-dialog-pc .vui-dialog-box {
        padding: 30px 25px 25px;
        min-width: 300px;
        border-radius: 5px;
    }

    .vui-dialog-pc .vui-dialog-close {
        right: 18px;
        top: 18px;
        width: 22px;
        height: 22px;
        cursor: pointer;
    }

    .vui-dialog-pc .vui-dialog-close::before,
    .vui-dialog-pc .vui-dialog-close::after {
        height: 2px;
    }

    .vui-dialog-pc .vui-dialog-title {
        font-size: 20px;
    }

    .vui-dialog-pc .vui-dialog-content {
        font-size: 16px;
    }

    .vui-dialog-pc .vui-dialog-footer {
        padding-top: 16px;
    }

    .vui-dialog-pc .vui-dialog-footer > span {
        cursor: pointer;
        font-size: 16px;
        border-radius: 3px;
        border-width: 1px;
    }
</style>

<script>
  import '../../assets/common.css'
  import Layer from '../layer/index.vue'
  import mixinType from '../../mixins/type'

  export default {
    name: 'vdialog',
    inheritAttrs: false,
    mixins: [mixinType],
    props: {
      value: {
        type: Boolean,
        default: false
      },
      close: { // 右上角是否有关闭按钮
        type: Boolean,
        default: false
      },
      autoClose: { // 点击关闭按钮或者后退是否自动关闭
        type: Boolean,
        default: true
      },
      title: {
        type: String,
        default: ''
      },
      btns: {
        type: Array,
        default () {
          return [{
            text: '取消'
          }, {
            text: '确定',
            type: 'primary' // 主按钮，颜色不一样
          }]
        }
      }
    },
    computed: {
      $style () {
        return this.$options.cssModules
      }
    },
    watch: {
      value: {
        immediate: true,
        handler (value) {
          if (value) {
            window.history.pushState({
              vuiDialog: true
            }, '')
            window.addEventListener('popstate', this.onpopstate)
          } else {
            if (window.history.state && window.history.state.vuiDialog) {
              window.history.back()
            }
          }
        }
      }
    },
    methods: {
      onpopstate () {
        window.removeEventListener('popstate', this.onpopstate)
        this.onClose()
      },
      onClose () {
        this.autoClose && this.$emit('input', false)
        this.$emit('btn-click', -1)
      }
    },
    components: {
      Layer
    }
  }
</script>