<template>
  <view class="xd-tips" @touchmove.stop.prevent :style="{zIndex:tips.zIndex}" v-if="show">
    <view class="xd-tips__mask"></view>
    <view
      class="xd-tips__body"
      :style="{
        borderRadius: tips.radius,
        background: tips.background,
        color: tips.contentColor,
        width: tips.width
      }"
    >
      <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">
        <xd-content-xss :html="tips.content"></xd-content-xss>
      </view>
      <view v-else class="xd-tips__body-content">
        {{tips.content}}
      </view>
    </view>
  </view>
</template>

<script>
import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
import {mapState,  mapMutations} from 'vuex';
import XdContentXss from "@/components/XdContentXss/XdContentXss";

export default {
  name: "XdTips",
  components: {
    XdContentXss,
    XdFontIcon
  },
  computed: {
    ...mapState([
      'xdTips'
    ])
  },
  data(){
    return {
      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: '300rpx',
        isClose: true,
        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'
      }
    }
  },
  watch:{
    xdTips(value){
      this.init(value);
    }
  },
  created(){
    this.init(this.xdTips);
  },
  methods: {
    ...mapMutations(['setTips']),

    init(value){
      //只有当前访问页面触发逻辑
      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;

        /**
         * @description 自动关闭
         */
        if (this.tips.time > 0) {
          setTimeout(() => {
            this.close();
          }, this.tips.time < this.defaultTips.time ?
            this.defaultTips.time :
            this.tips.time)
        }

      }
    },

    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;
    background: rgba(0,0,0,.3);
  }

  &__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);

    &-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(40, rpx)
    }

  }
}
</style>
