<template>
  <div class="promoter-page">
    <div class="bg">
      <div class="logo">订单跟团查询</div>
      <div class="search">
        <input
          v-model="orderId"
          class="search-input"
          placeholder="请输入订单编号"
          @keyup.enter="getList"
        >
        <button class="search-btn" :disabled="loading" @click="getList">
          {{ loading ? '查询中...' : '查询' }}
        </button>
      </div>
    </div>

    <div v-if="orderList && orderList.length" class="body">
      <div v-for="(item, index) in orderList" :key="index" class="order-info">
        <div class="shopinfo">
          <img
            :src="item.shopLogo || defaultLogo"
            class="shopinfo-logo"
            referrerpolicy="no-referrer"
            @error="onLogoError"
          >
          <div class="shopinfo-name">{{ item.shopName }}</div>
        </div>
        <div class="info-header">
          <div class="info-header-left">
            <span v-if="item.orderSource" class="tag tag-default">{{ item.orderSource }}</span>
            <span
              v-if="item.traceTypeStr"
              :class="['tag', item.traceTypeStr === '跨店' ? 'tag-danger' : 'tag-success']"
            >{{ item.traceTypeStr }}</span>
          </div>
        </div>
        <div v-if="item.parentId" class="info-header">
          <div>父单编号：{{ item.parentId }}</div>
        </div>
        <div class="info-header">
          <div>订单编号：{{ item.orderId }}</div>
          <div class="valid-msg">{{ item.validCodeMsg }}</div>
        </div>
        <div class="info-body">
          <img
            v-if="item.skuImageUrl && !item._imgFailed"
            :src="item.skuImageUrl"
            class="info-img"
            referrerpolicy="no-referrer"
            @error="onImageError(item, $event)"
          >
          <div v-else class="info-img-placeholder">🖼</div>
          <div class="info-cell">
            <div class="info-cell-name">{{ item.skuName }}</div>
            <div class="info-cell-order">商品单ID：{{ item.itemId }}</div>
            <div class="info-cell-price">
              <span>共{{ item.skuNum }}件</span>
              <span style="padding: 0 8px;">实付 <span class="price-val">¥{{ item.cosPrice }}</span></span>
            </div>
          </div>
        </div>
        <div class="info-footer">
          <div>下单时间：{{ item.orderTime }}</div>
          <div>完成时间：{{ item.finishTime }}</div>
          <div v-if="item.proPriceAmount && item.proPriceAmount !== '0.00'" class="pro-price-line">
            价保赔付：<span class="pro-price-val">¥{{ item.proPriceAmount }}</span>
          </div>
        </div>
      </div>
    </div>

    <div v-if="errText && !orderList" class="empty-wrap">
      <el-empty :description="errText" />
    </div>

    <div class="footer">
      <div class="footer-title">订单查询须知</div>
      <div class="footer-desc">
        1. 为保障您充分享受下单权益，建议下单10分钟后查询能否正常抓取，如查询结果为"暂无相关订单"即为无效订单，请尽快重拍。<br><br>
        2. 淘宝/天猫订单仅展现已付款状态的订单，若订单尚未付款，无法通过此页面查询到；京东订单支持查询已下单待付款状态的订单。<br><br>
        3. 京东/淘宝订单号可能存在更新的情况，请用京东/淘宝平台后台最新订单号进行查询。<br><br>
        4. 下单不可使用超级红包，京享礼金，京东e卡，会导致订单无效。<br><br>
        5. 请勿勾选非推荐商品合并付款，可能会导致订单无效。
      </div>
    </div>
  </div>
</template>

<script>
import { queryTkOrder } from '@/api/open/jd/promoter'

export default {
  name: 'OpenJdPromoter',
  data() {
    return {
      orderId: '',
      orderList: null,
      errText: '',
      loading: false,
      userId: null,
      defaultLogo: 'https://www.jd.com/favicon.ico'
    }
  },
  created() {
    const params = new URLSearchParams(window.location.search)
    this.userId = params.get('t')
    document.title = '跟团查询'
  },
  methods: {
    getList() {
      if (!this.orderId) return
      this.loading = true
      this.orderList = null
      this.errText = ''
      queryTkOrder({
        orderId: this.orderId,
        t: this.userId
      }).then(data => {
        if (data && data.orderInfoList && data.orderInfoList.length) {
          this.orderList = data.orderInfoList
        } else {
          this.errText = (data && data.msg) || '暂无相关订单'
        }
      }).catch(() => {
        this.errText = '查询失败，请稍后重试'
      }).finally(() => {
        this.loading = false
      })
    },
    onLogoError(e) {
      e.target.src = this.defaultLogo
    },
    onImageError(item, e) {
      const tryCount = item._imgTry || 0
      const fallbacks = item.skuId
        ? [
          `https://img14.360buyimg.com/n5/s450x450_${item.skuId}.jpg`,
          `https://img10.360buyimg.com/n1/s450x450_${item.skuId}.jpg`,
          `https://img14.360buyimg.com/n1/s240x240_${item.skuId}.jpg`
        ]
        : []
      if (tryCount < fallbacks.length) {
        this.$set(item, '_imgTry', tryCount + 1)
        e.target.src = fallbacks[tryCount]
        return
      }
      this.$set(item, '_imgFailed', true)
    }
  }
}
</script>

<style scoped>
* { box-sizing: border-box; }
.promoter-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f5f5f5;
  min-height: 100vh;
}
.bg {
  padding: 20px;
  background: linear-gradient(to bottom right, #ccdcfd, #f6f4f7);
  min-height: 14vh;
}
.logo {
  display: flex;
  align-items: center;
  margin: -20px 0 0 -20px;
  font-size: 16px;
  font-weight: bold;
  height: 50px;
  padding-left: 20px;
}
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.search-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}
.search-input:focus { border-color: #409eff; }
.search-btn {
  margin-left: 12px;
  height: 36px;
  padding: 0 20px;
  background: #f56c6c;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.search-btn:disabled { background: #fab6b6; cursor: not-allowed; }
.search-btn:hover:not(:disabled) { background: #f78989; }
.body { padding: 6px 20px; }
.empty-wrap { padding: 40px 20px; }
.footer {
  margin: 16px 20px;
  padding: 16px;
  border: 1px dashed rgb(119, 165, 199);
  border-radius: 25px;
}
.footer-title {
  text-align: center;
  font-size: 16px;
  padding-top: 15px;
  font-weight: bold;
}
.footer-desc {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.8;
  color: #555;
}
.order-info {
  padding: 8px;
  margin-top: 6px;
  border-radius: 4px;
  font-size: 11px;
  background-color: #ffffff;
}
.shopinfo {
  display: flex;
  align-items: center;
  padding-bottom: 6px;
}
.shopinfo-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
}
.shopinfo-name {
  margin-left: 6px;
  font-size: 12px;
  color: #222;
  font-weight: bold;
  width: 190px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.info-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.info-header-left { display: flex; flex-wrap: wrap; gap: 4px; }
.valid-msg { font-weight: bold; color: #ff6d6d; }
.info-body { margin-top: 16px; display: flex; }
.info-img { width: 70px; height: 70px; object-fit: cover; flex-shrink: 0; }
.info-img-placeholder {
  width: 70px; height: 70px; background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
  color: #ccc; font-size: 20px; flex-shrink: 0;
}
.info-cell { margin-left: 8px; overflow: auto; font-size: 10px; flex: 1; }
.info-cell-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.info-cell-order {
  margin-top: 6px;
  word-break: break-all;
  overflow-wrap: break-word;
}
.info-cell-price { margin-top: 6px; text-align: right; }
.price-val { color: #e02f2f; font-weight: bold; }
.info-footer { margin-top: 16px; color: #666; }
.pro-price-line { margin-top: 4px; }
.pro-price-val { color: #e02f2f; font-weight: bold; }
.tag {
  display: inline-block;
  font-size: 11px;
  height: 16px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 2px;
  border: 1px solid;
  margin: 0 4px 4px 0;
}
.tag-default { color: #409eff; border-color: #b3d8ff; background: #ecf5ff; }
.tag-danger  { color: #f56c6c; border-color: #fbc4c4; background: #fef0f0; }
.tag-success { color: #67c23a; border-color: #c2e7b0; background: #f0f9eb; }
</style>
