<template>
  <div class="in-app-purchase-details-drawer">
    <el-drawer
      :title="$t('pages.inAppPurchaseDetails.dialog.title')"
      :visible="true"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="drawer-auto-layout"
    >
      <div v-if="order" v-loading="orderLoading" class="in-app-purchase-details-content">
        <div v-if="orderIsNull" style="text-align: center;">
          {{ $t("pages.inAppPurchaseDetails.message.noMoreInfo") }}
        </div>
        <div v-else>
          <div v-if="order.acceptUserProfile" class="order-row">
            <div class="blockquote">{{ $t("pages.inAppPurchaseDetails.section.acceptUser") }}</div>
            <div class="content">
              <user-table-exhibit :user-profile="order.acceptUserProfile" :query-details="true" />
            </div>
          </div>
          <div v-if="order.createUserProfile" class="order-row">
            <div class="blockquote">{{ $t("pages.inAppPurchaseDetails.section.createUser") }}</div>
            <div class="content">
              <user-table-exhibit :user-profile="order.createUserProfile" :query-details="true" />
            </div>
          </div>
          <div v-if="order.createNickname" class="order-row">
            <div class="blockquote">{{ $t("pages.inAppPurchaseDetails.section.createUser") }}</div>
            <div class="content" style="margin-bottom: 10px;">
              {{ order.createNickname }}
            </div>
          </div>
          <div v-if="order.details" class="order-row">
            <div class="blockquote">{{ $t("pages.inAppPurchaseDetails.section.orderInfo") }}</div>
            <div class="content">
              <div class="order-info flex-b flex-wrap">
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.environment') }}:
                  <el-tag v-if="order.details.env === 'PROD'" type="success" size="mini">{{ order.details.env }}</el-tag>
                  <el-tag v-else-if="order.details.env === 'TEST'" type="warning" size="mini">{{ order.details.env }}</el-tag>
                  <el-tag v-else type="danger" size="mini">{{ order.details.env }}</el-tag>
                </div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.type') }}: {{ orderReceiptTypeMap[order.details.receiptType] }}</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.status') }}:
                  <el-tag :type="orderStatusMap[order.details.status].tagType" size="mini">{{ orderStatusMap[order.details.status].label }}</el-tag>
                </div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.id') }}: {{ order.details.id }}</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.trackId') }}: {{ order.details.trackId }}</div>
                <div v-if="order.details.subscribeId" class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.subscribeId') }}: {{ order.details.subscribeId }}</div>
                <div class="order-info-col" :span="24">{{ $t('pages.inAppPurchaseDetails.label.orderId') }}: {{ order.details.orderId }}</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.platformChannel') }}:
                  <sys-origin-icon size="20px" :icon="order.details.sysOrigin" :desc="order.details.sysOrigin" />
                  <platform-svg-icon size="20px" :icon="order.details.factory.platform" />
                  <platform-svg-icon size="20px" :icon="order.details.factory.factoryCode" />
                </div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.countryCode') }}: {{ order.details.countryCode }}</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.currency') }}: {{ order.details.currency }}</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.amount') }}: {{ order.details.amount }} {{ order.details.currency }}</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.usd') }}: {{ order.details.amountUsd }} USD</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.freeTrial') }}: {{ order.details.trialPeriod === true ? $t('pages.inAppPurchaseDetails.word.yes') : $t('pages.inAppPurchaseDetails.word.no') }}</div>

                <div v-if="order.details.reason" class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.reason') }}: {{ order.details.reason }}</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.purchaseTime') }}: {{ order.details.purchaseDateMs }}</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.createdAt') }}: {{ order.details.createTime }}</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.updatedAt') }}: {{ order.details.updateTime }}</div>
                <div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.version') }}: {{ order.details.version }}</div>
              </div>
            </div>
          </div>
          <div v-if="order.details && order.details.statusSteps && order.details.statusSteps.length>0" class="order-row">
            <div class="blockquote">{{ $t('pages.inAppPurchaseDetails.section.statusFlow') }}</div>
            <div class="content">
              <el-steps align-center :space="200" :active="order.details.statusSteps.length" finish-status="success" style="margin: 10px 0px;">
                <el-step v-for="(item, index) in order.details.statusSteps" :key="index" :title="orderStatusMap[item.status].label" :description="item.createTime" />
              </el-steps>
            </div>
          </div>
          <div v-if="order.details && order.details.products && order.details.products.length > 0" class="order-row">
            <div class="blockquote">{{ $t('pages.inAppPurchaseDetails.section.productInfo') }}</div>
            <div class="content">
              <div class="product-card">
                <div v-if="order.details.productDescriptor" class="prodcut-desc">
                  {{ order.details.productDescriptor }}
                </div>
                <div v-for="(item, index) in order.details.products" :key="index" class="product-item">
                  <div class="flex-b">
                    <div class="product-cover">
                      <img :src="item.cover || $application.defaultImgUrl" alt="">
                    </div>
                    <div class="product-info">
                      <el-row>
                        <el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.id') }}: {{ item.id }}</el-col>
                        <el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.name') }}: {{ item.name }}</el-col>
                        <el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.code') }}: {{ item.code }}</el-col>
                        <el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.content') }}: {{ item.content }}</el-col>
                        <el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.amount') }}: {{ item.amountUsd }} USD</el-col>
                        <el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.quantity') }}: {{ item.quantity }}</el-col>
                        <el-col :span="24">{{ $t('pages.inAppPurchaseDetails.label.description') }}: {{ item.describe }}</el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="order.details && order.details.metadata && Object.keys(order.details.metadata).length > 0" class="order-row">
            <div class="blockquote">{{ $t('pages.inAppPurchaseDetails.section.metadata') }}</div>
            <div class="content">
              <el-table
                :data="metadataList"
                :element-loading-text="$t('pages.inAppPurchaseDetails.message.loading')"
                fit
                highlight-current-row
              >
                <el-table-column prop="key" :label="$t('pages.inAppPurchaseDetails.label.field')" align="center" />
                <el-table-column prop="value" :label="$t('pages.inAppPurchaseDetails.label.value')" align="center" />
              </el-table>
            </div>
          </div>
          <div v-if="order.details && order.details.payNotices" class="order-row">
            <div class="blockquote">{{ $t('pages.inAppPurchaseDetails.section.eventNotice') }}</div>
            <div class="content">
              <el-timeline :reverse="true">
                <el-timeline-item
                  v-for="(item, index) in order.details.payNotices"
                  :key="index"
                  placement="top"
                  :timestamp="item.createTime"
                >
                  <div class="event-info">
                    <div class="event-info-item">{{ $t('pages.inAppPurchaseDetails.label.eventId') }}: {{ item.eventId }}</div>
                    <div class="event-info-item">{{ $t('pages.inAppPurchaseDetails.label.eventType') }}: {{ item.noticeType }}</div>
                  </div>
                  <div class="request-data">
                    <json-editor v-model="item.noticeData" :read-only="true" />
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

  </div>
</template>
<script>
import { getInAppPurchase } from '@/api/purchase'
import PlatformSvgIcon from '@/components/PlatformSvgIcon'
import JsonEditor from '@/components/JsonEditor'
export default {
  name: 'InAppPurchaseDetails',
  components: { PlatformSvgIcon, JsonEditor },
  props: {
    orderId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      orderLoading: false,
      order: {},
      orderIsNull: false
    }
  },
  computed: {
    orderReceiptTypeMap() {
      const locale = this.$i18n.locale
      void locale
      return {
        PAYMENT: this.$t('pages.inAppPurchaseDetails.receiptType.payment'),
        RECEIPT: this.$t('pages.inAppPurchaseDetails.receiptType.receipt')
      }
    },
    orderStatusMap() {
      const locale = this.$i18n.locale
      void locale
      return {
        CREATE: {
          label: this.$t('pages.inAppPurchaseDetails.status.create'),
          tagType: ''
        },
        SUCCESS: {
          label: this.$t('pages.inAppPurchaseDetails.status.success'),
          tagType: 'success'
        },
        FAIL: {
          label: this.$t('pages.inAppPurchaseDetails.status.fail'),
          tagType: 'danger'
        },
        CANCEL: {
          label: this.$t('pages.inAppPurchaseDetails.status.cancel'),
          tagType: 'info'
        },
        HANG: {
          label: this.$t('pages.inAppPurchaseDetails.status.hang'),
          tagType: 'warning'
        },
        REFUND: {
          label: this.$t('pages.inAppPurchaseDetails.status.refund'),
          tagType: 'danger'
        }
      }
    },
    metadataList() {
      if (!this.order.details || !this.order.details.metadata) {
        return []
      }
      const resultList = []
      for (const key in this.order.details.metadata) {
        resultList.push({
          key,
          value: this.order.details.metadata[key]
        })
      }
      return resultList
    }
  },
  watch: {
    orderId: {
      handler() {
        this.loadInAppPurchase()
      },
      immediate: true
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    loadInAppPurchase() {
      const that = this
      that.orderLoading = true
      getInAppPurchase(that.orderId).then(res => {
        that.orderLoading = false
        that.order = res.body || {}
        that.orderIsNull = !(that.order && that.order.details && that.order.details.id)
      }).catch(() => {
        that.orderLoading = false
      })
    }
  }
}
</script>
  <style scoped lang="scss">
  .in-app-purchase-details-content {
      padding: 0px 10px;
      .order-info {
        .order-info-col {
            padding: 10px 0px;
            width: 50%;
            flex-shrink: 0;
        }
      }
      .event-info {
        .event-info-item {
            padding: 10px 0px;
        }
      }
      .product-card {
        .prodcut-desc {
          padding-bottom: 10px;
        }
        .product-item {
          margin-bottom: 15px;
          .product-cover {
            width: 100px;
            height: 100px;
            flex-shrink: 0;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .product-info {
            width: 100%;
            padding: 0px 10px;
            line-height: 24px;
          }
        }
      }
  }
  </style>

