<template>
  <view
    class="xd-up-drawer"
    :style="getStyle"
    @click="bodyClose"
  >
    <view class="xd-up-drawer__warper"  :style="{minHeight: heightComp}" @click.stop>
      <view class="xd-up-drawer__close" v-if="isClose" @click="close">
        <xd-font-icon
          size="36"
          icon="icondanchuangguanbi_xian"
          color="#999"
          :width="40"
          :height="40"
        ></xd-font-icon>
      </view>
      <view class="xd-up-drawer__content" :style="[contentStyleComp]">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
  /**
   * XdDowncDrawer 抽屉UI
   * @description 从下往上抽屉插件
   * @tutorial
   * @property {boolean} isBodyClose             点击body区域是否关闭
   * @property {number} zIndex                   插件层级显示 默认: 2000
   * @property {babel}  show                     插件是否显示 默认:false=>不显示
   * @property {number}  margin                  插件左右下边距 默认: 0rpx(设计稿750px)
   * @property {String}  radius                  插件圆角数字 默认：20rpx(设计稿750px)
   * @property {Boolean} isClose                 是否显示关闭按钮
   *
   * @event {Function} close                     点击关闭ICON事件 e
   */

  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import {mapActions} from "vuex";

  export default {
    name: "XdDownDrawer",
    components: {
      XdFontIcon
    },
    props:{
      zIndex: {
        type: Number,
        default: 1000
      },

      isBodyClose:{
        type: Boolean,
        default: true,
      },
      maskBackgroundColor:{
        type: String,
        default: 'rgba(0,0,0,.2)',
      },

      show: {
        type: Boolean,
        default: false,
      },

      isClose: {
        type: Boolean,
        default: true,
      },

      height: {
        type: String,
        default: '50vh'
      },

      /**
       * @description 是否启动全屏遮罩
       */
      fullscreen: {
        type: Boolean,
        default: true,
      }
    },
    computed:{
      getStyle(){
        let style = `z-index: ${this.uizIndex}; background-color: ${this.maskBackgroundColor}`;
        if(this.isShow) {
          style = `${style};top:0; bottom: ${this.bottomTabberHeight}px;`;
        }
        else {
          style = `${style};top:120vh; bottom:-9999px;`;
        }
        return style
      },
      contentStyleComp(){

        let cssStyle = {
          maxHeight:'80vh'
        };
        //#ifdef H5
        if(this.$configProject['isPreview']){
          cssStyle = {
            maxHeight:'1000rpx'
          }
        }
        //#endif

        return cssStyle
      },
    },
    data() {
      return {
        isShow: true,
        bottomTabberHeight: 0, //
        uizIndex: 1000,

        popId:null, //ID
      };
    },
    watch:{
      show(val){
        this.isShow = val;
        this.setBodyHide();
      },
    },
    created(){
      this.popId = this.$xdUniHelper.randomChar(20);

      //是否有底部导航
      if(this.$xdUniOptions && this.$xdUniOptions['list'] && this.$xdUniOptions['list'].length > 0) {
        this.bottomTabberHeight = 100 * this.$rpxNum;
      }

      //全屏遮罩
      if(this.fullscreen) {
        this.bottomTabberHeight = 0;
        this.uizIndex = 2000;
      }

      if(this.zIndex!==1000) {
        this.uizIndex = this.zIndex;
      }
      this.isShow = this.show;
      this.setBodyHide();

    },
    methods: {
      ...mapActions(['setHasPopStatus']),

      setBodyHide(){
        if(this.isShow) this.setHasPopStatus({popId: this.popId, action: 'add'});
        else this.setHasPopStatus({popId: this.popId, action: 'del'});
      },
      bodyClose(e){
        console.log('bodyClose')
        if(this.isBodyClose) {
          this.close(e)
        }
      },

      close(e){
        console.log('close')
        this.isShow = false;
        this.setBodyHide();
        this.$emit('update:show', this.isShow);
        this.$emit('close', e);
      },
    },

  }
</script>

<style scoped lang="less">
  .xd-up-drawer {
    position: fixed;
    top:100vh;
    left: 0;
    right: 0;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
    transition: bottom 0.2s;
    bottom: unit(8000, rpx);

    &__close {
      width: unit(80,rpx);
      height: unit(80,rpx);
      position: absolute;
      top: unit(10,rpx);
      right: unit(10,rpx);
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;

    }

    &__warper {
      width: 100%;
      background: #fff;
      border-radius: unit(10,rpx) unit(10, rpx) 0 0;
      position: absolute;
      bottom:0;
      left: 0;
      right: 0;
      .safe-area()
    }

  }

</style>
