<template>
  <section v-show="vValue" class="popup-screen center"
           @click.stop="trigger && changeValue(false)"
           :class="{'center':center}"
  >
    <section @click.stop :class="['popup-content-'+contentAnimate]" class="relative popup-content flex">
      <header v-if="headerTitle" class="absolute popup-header center">
        <div class="popup-header-background center"
          :style="{background:'url('+background[headerStyle]+') 0 0'}"
        >
          {{headerTitle}}
        </div>
      </header>
      <slot></slot>
    </section>
  </section>
</template>

<script lang="ts">
import props from '../props';
export default <LibMixins>{
  name: "popup",

  data(){
    return {
      vValue:false,
      background:{
        default: require('../images/background.png'),
        green: require('../images/background-green.png')
      }
    }
  },

  watch:{
    value:{
      handler:function (this:any) {
        this.changeValue(this.value);
      },
      immediate:true
    }
  },

  methods:{

    // 发生变更
    changeValue(value:boolean=false):any{
      if (this.vValue !== value) {
        this.vValue = value;
        this.$emit(value ? 'open' :'close');
        if (this.value !== value) {
          return this.$emit('update:value',value);
        }
      }
    }

  },

  props
}
</script>

<style scoped lang="scss" src="../style.scss"></style>