<template>
  <view class="xd-tips" @touchmove.stop.prevent :style="{zIndex:tips.zIndex}" v-if="show">
    <view
      class="xd-tips__mask"
      :style="[{backgroundColor: tips.maskBackgroundColor}]"
    ></view>
    <view
      class="xd-tips__body"
      :style="[{
        borderRadius: tips.radius,
        background: tips.background,
        color: tips.contentColor,
        width: tips.width,
        top: isPreview ? '400rpx': '50%',
        transform: isPreview ? 'translate(-50%, 0)': 'translate(-50%, -50%)'
      }, bodyBoxStyle]"
    >
      <view class="xd-tips__body-cover" :style="[bodyCoverBoxStyle]"></view>
      <view class="xd-tips__body-close" @click="close" v-if="tips.isClose">
        <xd-font-icon icon="iconguanbi" width="30" height="30" size="25" :color="tips.contentColor"></xd-font-icon>
      </view>
      <!-- <view class="xd-tips__body-icon" v-if="tips.iconShow">
        <xd-font-icon :icon="tips.icon" :size="tips.iconSize" :color="tips.iconColor"></xd-font-icon>
      </view> -->
      <view class="xd-tips__body-content" v-if="tips.isHtml" :style="[bodyContentStyle]">
        <xd-content-xss :html="tips.content"></xd-content-xss>
      </view>
      <view v-else class="xd-tips__body-content" :style="[bodyContentStyle]">
        {{tips.content}}
      </view>
    </view>
  </view>
</template>

<script>
import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
import {mapState,  mapMutations} from 'vuex';
import XdContentXss from "@/components/XdContentXss/XdContentXss";
import Color from "color"
import {
  getParentsStyle, //获取页面风格单个键值值
  getParentsStyles //获取页面风格列表
} from '@/utils/xd.base';

export default {
  name: "XdTips",
  components: {
    XdContentXss,
    XdFontIcon
  },
  props:{
    getLayoutInfo: {
      type: Object | null,
      default: null
    }
  },
  computed: {
    ...mapState([
      'xdTips',
      'brandInfo',
      'styleCommon',
    ]),
    bodyBoxStyle(){
      let type = this.brandInfo.base_style;
      let style = {};
      if(type !== 'default'){
        style.background = '#FFFFFF';
      }
      return style
    },
    bodyCoverBoxStyle(){
      let type = this.brandInfo.base_style;
      let color1 = Color(this.uiStyle.$mainColor).alpha(0.25).toString();
      let style = {
        background: '',
      }
      if(type === 'bgColorGradient'){
        style.background = `linear-gradient(180deg, ${color1} 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%)`
      }
      return style
    },
    bodyContentStyle(){
      let type = this.brandInfo.base_style;
      let style = {};
      if(type !== 'default'){
        style.color = '#333';
      }
      return style
    }
  },
  data(){
    return {
      isPreview: false,
      show: false,

      /**
       * @description 提示框
       * @type {Object}
       * @property tips.zIndex {number} 样式层级关系 默认：1000
       * @property tips.content {string|Element} html 只支持原生元素（请不要使用小程序相关元素组件，有兼容问题）,例如：<div style="color: green">html test</div>
       * @property tips.contentColor {string} 文本颜色  默认：#eee
       * @property tips.background {string} 提示框背景  默认：#333
       * @property tips.isHtml {boolean} 是否支持html 默认：false
       * @property tips.radius {string} 边框圆角  默认：确认10rpx
       * @property tips.width {string} 宽度  默认：确认：50%
       * @property tips.time {number} 关闭时间 默认: 1500ms
       * @property tips.icon {string} icon标 支持iconfont 标准 默认：iconinfo
       * @property tips.iconSize {string} icon大小 标准 默认：55
       * @property tips.iconColor {string} icon标样式 标准 默认：#eee
       * @property tips.iconShow {boolean} 是否显示icon 默认：true
       * @property tips.close {function} 按钮回调事件
       */
      tips: {},

      defaultTips: {
        width: '500rpx',
        isClose: false,
        zIndex: 1700,
        content: '',
        contentColor: '#eee',
        background: '#333',
        isHtml: false,
        time: 1500,
        icon: 'iconduigou-xian',
        iconSize: '80',
        iconColor: '#eee',
        iconShow: true,
        radius: '30rpx',
        close: null,
        type: 'success',
        maskBackgroundColor:'rgba(0,0,0,.1)',
      },
      uiStyle: {},
      timer: null,
    }
  },
  watch:{
    xdTips(value){
      this.init(value);
    },
    styleCommon(val){
      this.uiStyle = val;
    }
  },
  created(){
    this.init(this.xdTips);
    if (this.$configProject && this.$configProject.isPreview) {
      this.isPreview = this.$configProject.isPreview
    }
  },
  methods: {
    ...mapMutations(['setTips']),

    init(value){
      //切换页面时候关闭所有提示框逻辑
      if(value && value.allClose === true) {
        this.show = false;
        this.tips = {};
        if(this.timer){
          clearTimeout(this.timer);
          this.timer = null;
        }
        return;
      }

      //只有当前访问页面触发逻辑
      if(this.$root.$isShow === false) {
        return;
      }

      if(value === null) {
        this.show = false;
        this.tips = {};
      }
      else{
        this.show = true;

        let tips = Object.assign({},
          this.$xdUniHelper.cloneDeep(this.defaultTips),
          value
        );

        if (tips.type === 'error') {
          tips['icon'] = 'icondanchuangguanbi_xian';
          tips['iconSize'] = '60';
        }

        this.tips = tips;
        const delay= this.tips.time < this.defaultTips.time ? this.defaultTips.time : this.tips.time;

        /**
         * @description 自动关闭
         */
        if (this.tips.time > 0) {
          this.timer = setTimeout(() => {
            this.timer = null;
            this.close();
          }, delay)
        }

      }
    },

    handleConfirm(status){
      if(typeof this.confirm.success === 'function') {
        let params = {};
        params[status] = true;
        this.confirm.success(params);
        this.close();
      }else {
        this.close();
      }
    },

    close(){
      if(typeof this.tips.close === 'function') {
        this.tips.close();
      }
      this.setTips(null);
    },
  }
}
</script>

<style scoped lang="less">
.xd-tips {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  &__mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  &__body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: unit(300, rpx);
    box-shadow: 0 0 unit(20,rpx) rgba(0,0,0,0.3);
    box-sizing: border-box;
    padding: unit(60,rpx) unit(30, rpx);
    overflow: hidden;

    &-cover{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    &-close {
      position: absolute;
      top: unit(10,rpx);
      right: unit(10,rpx);
      width: unit(40,rpx);
      height: unit(40,rpx);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &-icon {
      padding-bottom: unit(30, rpx) ;
      width: 100%;
      height: unit(80, rpx);
      display: flex;
      justify-content: center;
      align-items: center;
    }


    &-content {
      text-align: center;
      font-size: unit(32, rpx);
      position: relative;
    }

  }
}
</style>
