<template>
  <view>
    <view :class="['message-mask',{show:config.mask && visible},{opacity:config.type==='toast'}]" @click="maskClick" @touchmove.prevent></view>
    <view :class="['toast-main',{diamond:config.image},{show:visible}]" v-if="config.type==='toast'">
      <image class="toast-image" :src="config.image" v-if="config.image" :style="{width:config.imageWidth+'rpx',height:config.imageHeight+'rpx'}" mode="aspectFit" />
      <view class="toast-text">
        <text space="nbsp">{{config.title}}</text>
      </view>
    </view>
    <view :class="['loading-main',{diamond:!config.mask},{show:visible}]" v-if="config.type==='loading'">
      <image class="loading-image" :src="config.image" :style="{width:config.imageWidth+'rpx',height:config.imageHeight+'rpx'}" v-if="config.image" mode="aspectFit" />
      <view class="loading-text">
        <text space="nbsp">{{config.title}}</text>
      </view>
    </view>
    <view :class="['sheet-main',config.popover,{show:visible}]" v-if="config.type==='action-sheet'">
      <view class="sheet-item" v-for="(item,index) in config.itemList" :key="index">
        <!-- #ifdef MP-QQ -->
        <button class="btn" v-if="item.type==='share'" open-type="share" :share-mode="['qq', 'qzone','wechatFriends','wechatMoment']" :style="{color:itemColor}" @click="confirm(index,item)">
          <image :src="item.icon" mode="aspectFit" v-if="item.icon" />
          <text space="nbsp">{{item.title}}</text>
        </button>
        <!-- #endif -->
        <!-- #ifndef MP-QQ -->
        <button class="btn" v-if="item.type==='share'" open-type="share" :style="{color:itemColor}" @click="confirm(index,item)">
          <image :src="item.icon" mode="aspectFit" v-if="item.icon" />
          <text space="nbsp">{{item.title}}</text>
        </button>
        <!-- #endif -->
        <button class="sheet-text" v-else :style="{color:itemColor}" @click="confirm(index,item)">
          <image :src="item.icon" mode="aspectFit" v-if="item.icon" />
          <text space="nbsp">{{item.title}}</text>
        </button>
      </view>
      <view class="sheet-item cancel">
        <button class="sheet-text" @click="cancel()">
          <text space="nbsp">取消</text>
        </button>
      </view>
      
    </view>
  </view>
</template>

<script>
export default {
  name: 'yt-message',
  /* props: {
    option: {
      type: Object,
      default(){
        return {}
      }
    },
  }, */
  data() { 
    return {
      visible:false,
      config:{},
      default:{
        type:'confirm',
        title:'',
        content:'',
        showCancel:true,
        cancelText:'取消',
        cancelColor:'#666666',
        confirmColor:'#3c76ff',
        confirmText:'确认',
        mask:true,
        image:'',
        imageWidth:180,
        imageHeight:180,
        duration:2400,
        itemList:[],
        itemColor:'#333333',
        popover:'bottom',
        maskClose:false
      },
      images:{
        'longtap':{
          url:'https://ttmini.yizhiwechat.com/yzAiList/index/finger-hint.gif',
          width:218,
          height:218
        },
        'loading':{
          url:'https://ttmini.yizhiwechat.com/yitui/assets/loading.svg',
          width:96,
          height:96
        },
        'pie':{
          url:'https://ttmini.yizhiwechat.com/static_npm/harmony4.svg',
          width:140,
          height:140
        },
        'agentia':{
          url:'https://ttmini.yizhiwechat.com/static_npm/flask.svg',
          width:140,
          height:140
        },
        'sketch':{
          url:'https://ttmini.yizhiwechat.com/static_npm/sketch.svg',
          width:280,
          height:280
        },
        'tail':{
          url:'https://ttmini.yizhiwechat.com/static_npm/tail.svg',
          width:140,
          height:140
        },
        'sandglass':{
          url:'https://ttmini.yizhiwechat.com/static_npm/sandglass.svg',
          width:160,
          height:160
        },
      },
      resolve:null,
      reject:null
    }
  },
  methods: {
    maskClick(){
      if(this.config.maskClose){
        this.cancel()
      }
    },
    show(options){
      if(this.reject){
        this.reject()
        this.resolve = null;
        this.reject = null;
      }
      const that = this;
      const paramKeys = {
        alert:[],
        confirm:[],
        toast:[],
        loading:[],
        'action-sheet':[]
      }
      return new Promise(function (resolve,reject) {
        if(options.type === 'alert'){
          options.showCancel = false
        }else if(options.type==="toast"){
          if(typeof(options.mask)!=='boolean'){
            options.mask = !!options.image;
          }
        }else if(options.type==="action-sheet"){
          that.config.itemList = []
          if(typeof(options.mask)!=='boolean'){
            options.mask = true;
          }
          if(typeof(options.maskClose)!=='boolean'){
            options.maskClose = true;
          }
          
        }
        /* 合并传入参数覆盖默认配置 */
        let config = that.$yt.deepMerge(that.default,options);
        // 如果是alert,confirm 依旧使用系统方法
        const use_system_fun = ['alert','confirm'].includes(config.type);
        if(use_system_fun){
          const params = that.$yt.deepMerge(config,{
            success (res) {
              if (res.confirm) {
                resolve({msg:'用户点击确定'});
              } else {
                reject({msg:'用户点击取消'});
              }
            },
            fail(){
              reject({msg:'API 调用异常'})
            }
          });
          uni.showModal(params);
        }else if(config.type==="toast"){
          // 如果是toast
          let _default_image = that.images[config.image]
          if(_default_image){
            config.image = _default_image.url
            config.imageWidth = _default_image.width
            config.imageHeight = _default_image.height
          }
          if(config.duration){
            setTimeout(() => {
              that.visible = false
              resolve({msg:'提示已结束'})
            }, config.duration);
          }else{
            that.resolve = resolve
            that.reject = reject
          }
        }else if(config.type==="loading"){
          // 如果是loading
          if(!config.image){
            config.image = 'loading'
          }
          let _default_image = that.images[config.image]
          if(_default_image){
            config.image = _default_image.url
            config.imageWidth = _default_image.width
            config.imageHeight = _default_image.height
          }
          that.resolve = resolve
          that.reject = reject
        }else if(config.type==="action-sheet"){
          // 如果是action-sheet
          /* 如果选项不是对象类型 */
          if(!that.$yt.test.object(config.itemList[0])){
            config.itemList = config.itemList.map((v,i)=>{
              return {
                type:'default',
                title:v
              }
            })
          }
          that.resolve = resolve
          that.reject = reject
        }
        that.config = config
        that.visible = !use_system_fun
      })
      // this.config.image = this.images['longtap']
    },
    cancel(){
      this.visible = false
      this.reject && this.reject({msg:"取消或关闭"})
    },
    confirm(){
      this.visible = false
      const [index,data] = arguments
      this.resolve && this.resolve({index,data,msg:"操作成功"})
    }
  }
 }
</script>

<style lang="scss" scoped>
.message-mask{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 9999;
  &.show{
    display: block;
    animation: fade-in linear 300ms forwards;
  }
  &.opacity{
    background: rgba(0, 0, 0, 0);
  }
}
.toast-main{
  min-width: 300rpx;
  max-width: 480rpx;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 30rpx;
  border-radius: 12rpx;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 10000;
  padding:24rpx 24rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  box-shadow: 0 0 1px #666666;
  display: none;
  &.show{
    display: flex;
    animation: fade-in linear 150ms forwards;
  }
  &.diamond{
    min-height: 300rpx;
    border-radius: 20rpx;
  }
  .toast-image{
    width:216rpx;
    height: 216rpx;
    margin: 0 auto;
  }
}
.loading-main{
  min-width: 300rpx;
  max-width: 480rpx;
  color: #fff;
  font-size: 30rpx;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 10000;
  padding:24rpx 24rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  display: none;
  &.show{
    display: flex;
    animation: fade-in linear 50ms forwards;
  }
  &.diamond{
    min-height: 300rpx;
    border-radius: 20rpx;
    box-shadow: 0 0 1px #666666;
    background: rgba(0, 0, 0, 0.9);
  }
  .loading-image{
    width:180rpx;
    height: 180rpx;
    margin: 0 auto;
  }
}
.sheet-main{
  background: #f5f5f5;
  position: fixed;
  z-index: 10000;
  display: none;
  &.bottom.show{
    border-radius: 20rpx;
    bottom:30rpx;
    display: block;
    width: 710rpx;
    left: 20rpx;
    animation: sheet-move 300ms forwards;
  }
  &.center.show{
    width: 570rpx;
    bottom:50%;
    left: 90rpx;
    display: block;
    animation: fade-in linear 300ms forwards;
    transform: translateY(50%);
  }
  button{
    font-size: 32rpx;
    height: 96rpx;
    line-height: 96rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  image{
    flex: 0 0 42rpx;
    height: 42rpx;
    width: 42rpx;
    margin-right: 5px;
  }
  .sheet-item{
    position: relative;
    &::after{
      content: "";
      display: block;
      background: #ccc;
      height: 1px;
      width: 100%;
      transform: scaleY(.5);
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .cancel{
    &::after{
      display: none;
    }
    button{
      color: #999999;
    }
  }
}
@keyframes sheet-move {
  0%{
    transform: translateY(calc(100% + 30rpx));
  }
  100%{
    transform: translateY(0%);
  }
}
</style>