<template>
  <view class="xd-success">
    <view class="xd-success__header">
      <view class="xd-success__header-bg" :style="{background:bgColor}"></view>
      <view class="xd-success__header-content">
        <view class="xd-success__header-content-body">
          <view class="xd-success__header-content-body-icon" v-if="order === null">
            <view>
              <xd-font-icon
                size="80"
                icon="iconshijian"
                color="#333"
              ></xd-font-icon>
            </view>
            <view>处理中</view>
          </view>
          <template v-else>
            <view>
              <xd-font-icon
                :size="order['iconSize']"
                :icon="order['icon']"
                :color="order['iconColor']"
              ></xd-font-icon>
            </view>
            <view v-if="order && order['orderName']">{{order['orderName']}}</view>
            <view v-if="info">{{info['tips']}}</view>
            <template v-if="code">
              <!--电子码(号码+密码)-->
              <template v-if="code['numberAndPassword']">
                <view class="xd-success__numberAndPassword"
                  v-for="(nap,nindex) in code['numberAndPassword']"
                  :key="nindex"
                >
                  <view v-for="(it,codeIndex) in nap" :key="codeIndex">
                    <view>
                      <view>{{it['label']}}</view>
                      <view>{{it['value']}}</view>
                    </view>
                    <view>
                      <xd-button @click="copy(it['value'])" type="primary" size="mini">复制</xd-button>
                    </view>
                  </view>
                </view>
              </template>
              <!--电子码(号码+密码)-->
              <!--电子码（密码)-->
              <view class="xd-success__code" v-if="code['code']">
                <view v-for="(it,codeIndex) in code['code']" :key="codeIndex">
                  <view>
                    <view>{{it['label']}}</view>
                    <view>{{it['value']}}</view>
                  </view>
                  <view>
                    <xd-button @click="copy(it['value'])" type="primary" size="mini">复制</xd-button>
                  </view>
                </view>
              </view>
              <!--电子码（密码)-->
              <!--二维码-->
              <view class="xd-success__codeimg" v-if="code['twocode']">
                <view v-for="(it,codeIndex) in code['twocode']" :key="codeIndex">
                  <image class="twocode" :src="it['value']"></image>
                  <view>{{it['label']}}</view>
                </view>
              </view>
              <!--二维码-->
              <!--条形码-->
              <view class="xd-success__codeimg" v-if="code['barcode']">
                <view v-for="(it,codeIndex) in code['barcode']" :key="codeIndex">
                  <image mode="aspectFit" class="barcode" :src="it['value']"></image>
                  <view>{{it['label']}}</view>
                </view>
              </view>
              <!--条形码-->
            </template>
            <!--app使用提示-->
            <view class="xd-success__tips" v-if="app && app['use_desc']">
              <view>（为了方便使用请<text :style="{color: styleMainColor}">截屏保存</text>兑换码）</view>
              <view :style="{color: styleMainColor}">{{app['use_desc']}}</view>
            </view>
            <!--app使用提示 结束-->
            <!--按钮操作-->
            <view class="xd-success__header-btn">
              <view v-for="(btn,index) in info['btn']" :key="index">
                <xd-button
                  v-if="btn['label']"
                  size="small"
                  :type="btn['type']"
                  @click="handleBtnClick(btn)"
                >{{btn['label']}}</xd-button>
              </view>
            </view>
            <!--按钮操作 结束-->
          </template>
        </view>
      </view>
    </view>
    <view class="xd-success__content" v-if="info && info['content']">
      <xd-more :background="titleBackground">宝贝详情</xd-more>
      <view class="xd-success__content-body">
        <xd-content-xss :html="info['content']"></xd-content-xss>
      </view>
    </view>
    <view class="xd-success__notice" v-if="info && info['desc'] && info['descTitle']">
      <view>{{info['descTitle']}}</view>
      <view>
        <xd-content-xss :html="info['desc']"></xd-content-xss>
      </view>
    </view>
  </view>
</template>

<script>
  import XdButton from "@/components/XdButton/XdButton";
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import XdContentXss from "@/components/XdContentXss/XdContentXss";
  import XdMore from "@/components/XdMore/XdMore";
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';

  export default {
    name: "XdSuccess",
    components: {
      XdContentXss,
      XdFontIcon,
      XdButton,
      XdMore
    },
    props:{
      
      //最大N次方
      maxTime: {
        type: Number,
        default: 5
      },
      
      //文字颜色
      titleBackground: {
        type: String,
        default: '#eee'
      },
      
      //状态显示区域状态
      bgColor: {
        type: String,
        default: ''
      },
    },
    
    data(){
      return {
        order: null, //订单信息
        info: null, //基础信息
        app: null, //app使用提示
        code: null,

        date: 2, //时间底数
        time: 1, //时间幂指数

        //status => 3000:成功  3002:失败  3001:进行中
        status: '3001',
        styleMainColor: '', //插件主题风格样式
      }
    },
  
    async created() {
      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
      
      this.intval();
    },

    methods: {
      
      /**
       * @description 是否为空
       * @param data
       */
      isEmpty(data) {
        return this.$xdUniHelper.isEmpty(data);
      },

      /**
       *@description 复制功能
       * @param  text
       */
      copy(text) {
        // #ifdef H5
        this.$copyText(text).then(
          res => {
            this.$xdAlert({content: '复制成功'})
          }
        )
        // #endif
        // #ifndef H5
        uni.setClipboardData({
          data: text,
          success: () => {
            this.$xdAlert({content: '复制成功'})
          }
        })
        // #endif
      },

      handleBtnClick(btn, item){
        this.$emit('onBtn',{btn, item})
      },

      intval(){
        
        //订单完成
        if(this.status === '3000') {
          this.$emit('onOrderDone');
          return;
        }

        //订单失败
        if(this.status === '3002') return;

        //订单进行中
        this.$emit('getStatus', ({info, order, app, code, ...other})=>{
          if (this.$xdUniHelper.checkVarType(order) === 'object') {
            if (order) this.order= order;
            if (info) this.info = info;
            if (app) this.app = app;
            if (code) this.code = code;
            this.status = order.orderStatus;
            this.time++;
            
            console.log('getStatus', info, order, other);
            
            setTimeout(()=>{
              this.intval();
            }, Math.pow(this.date, (this.time > this.maxTime ? this.maxTime: this.time)) * 1000);
          }
        });
      },
    }
  }
</script>

<style scoped lang="less">
  .xd-success {
    &__header {
      position: relative;
      padding-top: unit(100,rpx);
      
      &-btn {
        padding-top: unit(40, rpx);
        display: flex;
        justify-content: center!important;
        
        & > view {
          margin: 0 unit(20, rpx);
        }
      }

      &-bg {
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        height: unit(260,rpx);
        border-radius: 0 0 unit(20,rpx) unit(20, rpx);
        z-index: 1;
      }

      &-content {
        position: relative;
        z-index: 3;
        background: #fff;
        margin:0 unit(20,rpx);
        box-sizing: border-box;
        border-radius: unit(15,rpx);
        box-shadow: 0 0 unit(15,rpx) rgba(0,0,0,.2);
        padding: unit(40,rpx) unit(20, rpx);

        &-body {
          min-height: unit(320, rpx);

          &-icon {
            height: unit(320, rpx) !important;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;

            & > view {
              padding: 0!important;
              margin: 0!important;
            }
          }

          & > view {
            text-align: center;
          }

          &> view:first-child {
            line-height: unit(100, rpx);
            height: unit(100, rpx);
          }

          &> view:nth-child(2) {
            font-size: @xd-font-size-lg + 4;
            padding: unit(20,rpx);
            line-height: unit(40,rpx);
            height: unit(40, rpx);
          }

          & > view:nth-child(3) {
            font-size: @xd-font-size-base;
            color: #999;
          }

          & > view:last-child {
            display: flex;
            justify-content: center;
            align-items: center;
            
          }
        }


      }


    }

    &__numberAndPassword {
      .uni-box-radius();
      margin-top: unit(20, rpx);
      background: #fff;
      font-size: @xd-font-size-base;
      padding: unit(20, rpx);
      box-sizing: border-box;


      & > view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: unit(20, rpx);

        &:last-child {
          padding-bottom: 0;
        }

        & > view:first-child {
          flex: 1;
          .uni-break-word();
          margin-right: unit(20, rpx);
          background: #f8f8f8;
          padding: unit(10, rpx);
          border-radius: unit(15, rpx);
          font-size: @xd-font-size-lg - 2;

          &:hover {
            background: #ececec;
          }

          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          color: #333;

          & > view:first-child {
            flex-shrink: 0;
          }

          & > view:last-child {
            flex: 1;
            width: 0;
            text-align: left;
          }
        }

        & > view:last-child {
          width: unit(120, rpx);
        }
      }
    }

    &__code {
      .uni-box-radius();
      margin-top: unit(20, rpx);
      background: #fff;
      font-size: @xd-font-size-base;
      padding: unit(20, rpx);
      box-sizing: border-box;

      & > view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: unit(20, rpx);

        &:last-child {
          padding-bottom: 0;
        }

        & > view:first-child {
          flex: 1;
          .uni-break-word();
          margin-right: unit(20, rpx);
          background: #f8f8f8;
          padding: unit(10, rpx);
          border-radius: unit(15, rpx);
          font-size: @xd-font-size-lg - 2;

          &:hover {
            background: #ececec;
          }

          display: flex;
          justify-content: center;
          align-items: flex-start;

          & > view:first-child {
            flex-shrink: 0;
          }

          & > view:last-child {
            flex: 1;
            width: 0;
            text-align: left;
          }
        }

        & > view:last-child {
          width: unit(120, rpx);
        }
      }

      & .twocode {
        width: unit(160, rpx);
        height: unit(160, rpx);
      }

      & .barcode {
        width: unit(320, rpx);
        height: unit(160, rpx);
      }
    }

    &__codeimg {
      .uni-box-radius();
      margin-top: unit(20, rpx);
      background: #fff;
      font-size: @xd-font-size-base;
      padding: unit(20, rpx);
      box-sizing: border-box;

      & > view {
        text-align: center;
        padding-bottom: unit(10, rpx);
        margin-bottom: unit(10, rpx);
        border-bottom: 1px solid #efefef;

        &:last-child {
          border-bottom: 0;
          padding-bottom: 0;
        }

        & > view:first-child {
          flex: 1;
          .uni-break-word();
          margin-right: unit(20, rpx);
          background: #f8f8f8;
          padding: unit(10, rpx);
          border-radius: unit(15, rpx);

          &:hover {
            background: #ececec;
          }
        }

        & > view:last-child {
          width: 100%;
          text-align: center;
          font-size: @xd-font-size-lg - 2;
        }
      }

      .twocode {
        width: unit(300, rpx);
        height: unit(300, rpx);
      }

      .barcode {
        max-height: unit(180, rpx);
        max-width: 100%;
      }
    }

    &__tips {
      font-size: @xd-font-size-base + 2;
      padding-top: unit(20, rpx);
      line-height: unit(40, rpx);
    }

    &__notice {
      margin-top: unit(40, rpx);
      padding: unit(30,rpx) unit(60,rpx);
      font-size: @xd-font-size-base;
      line-height: unit(44,rpx);
      color: #666;

      & > view:first-child {
        font-weight: bold;
        font-size: unit(36, rpx);
        padding-bottom: unit(20, rpx);
      }
    }

    &__content {
      margin: 0 unit(20, rpx);

      /deep/ .app-no-more {
        font-size: @xd-font-size-base + 6
      }

      &-body {
        background: #fff;
        border-radius: unit(15, rpx);
        padding: unit(20, rpx);
        box-sizing: border-box;
        font-size: unit(30, rpx);
        line-height: unit(55, rpx);
        box-shadow: 0 0 unit(15, rpx) rgba(0, 0, 0, .2);
      }
    }
  }
</style>
