<!--
  @name: 底部弹出层
  @description: -
  @author 张文
  @date: 2022-01-21
-->
<template>
  <van-popup
    class="ty-global-flex-between ty-bottom-popup-box"
    v-model="showPopup"
    :get-container="getContainer"
    :round="round"
    :close-on-click-overlay="(allowOff && closeOnClickOverlay)"
    :position="position"
    :style="{ height: height,width:width }"
    @click="ev=>$emit('click', ev)"
    @click-overlay="$emit('clickOverlay')"
    @open="$emit('open')"
    @opened="$emit('opened')"
    @close="$emit('close')"
    @closed="$emit('closed')"
  >
    <div class="ty-global-flex-center ty-bottom-popup-title">
      <slot name="title">{{ title }}</slot>
    </div>

    <div
      class="ty-bottom-content"
      :style="{ background: background }"
    >

      <div style="height: 10px" :id="anchor"><!-- 滚动到页面顶部的锚点 --></div>
      <slot></slot>
    </div>


    <div
      v-if="showBottomBar"
      class="ty-global-flex-around ty-bottom-popup-btn-box"
    >
      <slot name="bottomInfo"></slot>
      <ty-button
        v-if="allowOff && showOffBtn"
        :type="btnType"
        :mini="btnMini"
        :round="btnRound"
        :color="btnColor"
        :plain="btnPlain"
        @click="offBtnClick"
      >{{ offBtnText || $tyLanguage.get('wms_project.pda.components.ui.popup.off','关闭') }}</ty-button>
      <slot name="button"></slot>
    </div>

  </van-popup>
</template>

<script>

export default {
  name: "tyPopup",
  props:{
    // 显示隐藏
    value:{
      type:Boolean,
      default:false
    },
    // 挂载到指定节点
    getContainer:{
      type:String,
      default:'body'
    },
    // 弹出位置
    position:{
      type:String,
      default:'bottom'
    },
    // 是否显示圆角
    round:{
      type:Boolean,
      default:true
    },
    // 是否点击遮罩层后关闭弹窗
    closeOnClickOverlay:{
      type:Boolean,
      default:true
    },

    // 高度
    height:{
      type:[Number, String],
      default: 'auto'
    },
    // 宽度
    width:{
      type:[Number, String],
      default: '100%'
    },
    // 标题
    title:String,
    // 是否显示关闭按钮
    showOffBtn:{
      type:Boolean,
      default:true
    },
    // 关闭按钮的文字
    offBtnText:String,
    // 关闭按钮点击后触发的方法
    offBtnFn:Function,
    // 关闭按钮是否mini
    btnMini:{
      type:Boolean,
      default:false
    },
    // 关闭按钮是否圆角
    btnRound:{
      type:Boolean,
      default:false
    },
    // 关闭按钮颜色
    btnColor:String,
    // 是否是朴素按钮
    btnPlain:{
      type:Boolean,
      default:true
    },
    // 关闭按钮类型
    btnType:{
      type:String,
      default:'last'
    },
    // 允许关闭，为false时将不显示关闭按钮且不允许点击遮罩层关闭弹框
    allowOff:{
      type:Boolean,
      default:true
    },
    // 每次打开是否自动滚动到内容顶部
    autoTop:{
      type: Boolean,
      default: true
    },

    // 显示区主题背景颜色
    background: String,


    // 是否显示底部操作栏
    showBottomBar:{
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      anchor:''
    }
  },
  watch:{
    showPopup:{
      handler(n){
        if(n && this.autoTop){
          this.anchor = new Date().getTime().toString()
          this.$nextTick(()=>{
            document.getElementById(this.anchor).scrollIntoView({
              behavior: "instant",
              block:'start',
            })
          })
        }
      }
    }
  },
  computed:{
    showPopup:{
      get(){
        return this.value
      },
      set(v){
        this.$emit('input', v)
      }
    }
  },
  methods: {
    // 关闭按钮点击
    offBtnClick(){
      if (typeof this.offBtnFn === 'function'){
        this.offBtnFn()
      }else {
        this.showPopup = false
        this.$emit('clickCloseBtn')
      }

    }
  }
}
</script>

<style scoped lang="less">

@import "../../assets/css/var.less";

.ty-bottom-popup-box{
  flex-direction: column;
  max-height: 90%;
}


.ty-bottom-popup-title{
  text-align: center;
  height: 40px;
  width: 100%;
  font-weight: bold;
  border-bottom: solid 1px @borderColor;
  overflow: hidden;
  box-shadow: 0 2px 4px 1px @borderColor;
  //color: @baseColor;
  flex-shrink: 0;
}

.ty-bottom-content{
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px 10px;
  overflow: auto;
}

.ty-bottom-popup-btn-box{
  height: 50px;
  width: 100%;
  border-top: solid 1px @borderColor;
  overflow: hidden;
  box-shadow: 0 -2px 4px 1px @borderColor;
  padding: 10px;
  box-sizing: border-box;
  flex-shrink: 0;

  /deep/*{
    flex: 1;
  }
}

</style>
