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

  export default {
    name: "XdMySuccess",
    components: {
      XdContentXss,
      XdFontIcon,
      XdButton,
      XdMore
    },
    props:{
      //基础静态信息
      info: {
        type: Object | null,
        default: null
      },
      maxTime: {
        type: Number,
        default: 5
      },
      titleBackground: {
        type: String,
        default: '#eee'
      },
    },
    watch:{
      info(value){
        this.init(value);
      },
    },
    data(){
      return {
        orderInfo: null,
        item: null,

        //订单状态信息数据格式
        orderFormat: {
          icon: 'iconshijian', //iconfont里面的图标 ， 成功=>icondingdanwancheng，失败：icongerenzhongxinchufabaocuo
          iconSize: 80, //图标大小
          iconColor: 'red', //图标颜色
          orderName: '订单已支付成功', //订单状态名称
          orderStatus: '3000', //订单状态名称
        },

        //基础静态信息
        infoFormat: {
          //提示语言
          tips: '非常感谢您购买我们的产品',

          //电子码使用描述
          use_desc: '本兑换码：仅限于万达电影官方APP使用',

          //电子码 （密码）
          code: [
            {label: "兑换码：", value: "jfbcake.oss-cn-beijing.aliyuncs.comliyuncs.com"},
            {label: "兑换码：", value: "45122"}
          ],

          //电子码 （号码 + 密码）
          numberAndPassword: [
            [{label: "券号：", value: "1515"}, {label: "密码：", value: "45122"}],
            [{label: "券号：", value: "1515"}, {label: "密码：", value: "45122"}]
          ],

          //条形码
          barcode: [
            {
              label: "券号:cardcardcardcard0001 密码：21337",
              value: "http://sandbox-m-cake.jufubao.cn/rest/3.0/cakeshop/order/order/barcode_img?c=&p=21337"
            },
            {
              label: "券号:cardcardcardcard0001 密码：21337",
              value: "http://sandbox-m-cake.jufubao.cn/rest/3.0/cakeshop/order/order/barcode_img?c=cardcardcardcard0001&p=21337"
            }
          ],

          //二维码
          twocode: [
            {
              label: "券号:cardcardcardcard0001 密码：21337",
              value: "https://c.jufubao.cn/web/pb/qrcode/image?content=21337"
            },
            {
              label: "券号:cardcardcardcard0001 密码：21337",
              value: "https://c.jufubao.cn/web/pb/qrcode/image?content=21337"
            }
          ],

          content: `\u003Cp\u003E\u003Cimg src=\u0022https:\\/\\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\\/20210119153542102.png?x-oss-process=style\\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\\/p\u003E\\n                                                                                                                        \u003Cdiv\u003E\u003Cimg src=\u0022https:\\/\\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\\/7daysservice.jpeg\u0022 width=\u0022100%\u0022\u003E\u003C\\/div\u003E`,

          //温馨提示
          descTitle: '温馨提示',
          desc: '支付成功后，聚福宝不会以付款异常、卡单、系统升级为由联系您。请勿泄露银行卡号、手机验证码，否则会造成钱款损失！谨防电话诈骗！',

          //显示操作按钮（选填）（不显示按钮btn为空数组）
          btn: [
            {'label': '返回首页', value: 1, type: 'default', radius: '12rpx'},
            {'label': '查看订单', value: 2, type: 'primary', radius: '12rpx'},
          ]
        },

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

        //status => 3000:成功  3002:失败  3001:进行中
        status: '3001',
      }
    },

    created() {
      if(this.info === null) this.init(this.infoFormat);
      else this.init(this.info);
      this.intval();
    },

    methods: {
      init(value){
        this.item = value;
      },

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

      /**
       *@description 复制功能
       * @param  text
       */
      copy(text) {
        // #ifdef H5
        this.$copyText(text).then(
          res => {
            uni.showToast({
              title: '复制成功'
            })
          }
        )
        // #endif
        // #ifndef H5
        uni.setClipboardData({
          data: text,
          success: () => {
            uni.showToast({
              title: '复制成功'
            })
          }
        })
        // #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', (order)=>{
          //使用测试数据
          if(order === null) {
            this.orderInfo = this.orderFormat;
            return;
          }

          if (this.$xdUniHelper.checkVarType(order) === 'object') {
            console.log('order',this.time, Math.pow(this.date, (this.time > this.maxTime ? this.maxTime : this.time)) * 1000);
            this.orderInfo = order;
            this.status = order.orderStatus;
            this.time++;
            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);

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

            & > view {
              padding-top: unit(40,rpx);
              margin: 0 unit(20,rpx);
            }
          }
        }


      }


    }

    &__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(100, 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;
        background: rgb(238, 238, 238) !important;
      }

      &-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>
