<template>
  <div class="record-detail">
    <van-nav-bar fixed title="奖品详情" left-arrow @click-left="onClickLeft" />
    <div class="record-detail__content">
      <div class="record-detail__info">
        <ul class="record-detail__info-wrapper">
          <li>
            <label>活动名称：</label>
            <span>{{ detailInfo.title }}</span>
          </li>
          <li>
            <label>中奖场次：</label>
            <span v-if="detailInfo.drawPlay">{{ `第 ${detailInfo.drawPlay} 场` }}</span>
          </li>
          <li>
            <label>参与时间：</label>
            <span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span>
          </li>
          <li v-if="detailInfo.drawIntro">
            <label>抽奖介绍：</label>
            <span>{{ detailInfo.drawIntro || '/' }}</span>
          </li>
          <li v-if="detailInfo.winningInstructions">
            <label>中奖说明：</label>
            <span>{{ detailInfo.winningInstructions || '/' }}</span>
          </li>
          <li>
            <label>获得奖品：</label>
            <div>
              <p>{{ detailInfo.prizeName }}</p>
              <img v-if="detailInfo.prizeIcon" v-lazy="detailInfo.prizeIcon" class="record-detail__info-img" alt="" />
            </div>
          </li>
          <li v-if="detailInfo.prizeId !== 0">
            <label>领奖方式：</label>
            <span>{{ LOTTERY_EXCHANGE_TYPE_TXT[detailInfo.exchangeType] }}</span>
          </li>
        </ul>
      </div>
      <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.offline && detailInfo.prizeId !== 0" class="record-detail__code-info">
        <QRCode :url="detailInfo.code" :width="70" :height="70"></QRCode>
        <p class="record-detail__code-text">
          <label>兑换码：</label>
          <template v-if="detailInfo.code">
            {{ detailInfo.code }}
            <span class="record-detail__copy-btn" @click="onCopy(detailInfo.code)"
              ><i class="iconfont icon-fuzhi"></i>复制
            </span>
          </template>
        </p>
        <p class="record-detail__notice">*兑换信息请勿泄露给他人，以防冒充代领</p>
      </div>
      <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.mailing && detailInfo.prizeId !== 0" class="record-detail__addressee-info">
        <span v-if="!detailInfo.name" class="record-detail__edit-btn" @click="isShowAddressPopup = true"
          >填写收货地址</span
        >
        <template v-else>
          <span class="record-detail__addressee-title">收货信息</span>
          <ul class="record-detail__info-wrapper">
            <li>
              <label>收货人：</label>
              <span>{{ detailInfo.name }}</span>
            </li>
            <li>
              <label>手机号码：</label>
              <span>{{ detailInfo.contactPhone }}</span>
            </li>
            <li>
              <label>收货地址：</label>
              <span v-if="detailInfo.address">{{ detailInfo.address }}</span>
            </li>
            <li>
              <label>运单信息：</label>
              <div class="record-detail__tracking-info">
                <p v-if="detailInfo.trackingCompany">{{ detailInfo.trackingCompany }}</p>
                <span v-if="detailInfo.trackingNo">
                  {{ detailInfo.trackingNo }}
                  <span class="record-detail__copy-btn" @click="onCopy(detailInfo.trackingNo)"
                    ><i class="iconfont icon-fuzhi"></i>复制
                  </span>
                </span>
                <span v-else class="record-detail__tracking-msg">您的收货信息已提交，稍后可查看运单号</span>
              </div>
            </li>
          </ul>
        </template>
      </div>
    </div>
    <AddressListPopup
      v-model="isShowAddressPopup"
      left-text="保存"
      :uin="uin"
      :create-api="addAddress"
      :update-api="setAddress"
      :retrieve-api="getAddressList"
      :delete-api="removeAddress"
      @onBackHandler="onSaveAddress"
    ></AddressListPopup>
  </div>
</template>

<script>
import { getRecordDetail, setLotteryAddress } from '@/api/modules/records'
import { LOTTERY_EXCHANGE_TYPE, LOTTERY_EXCHANGE_TYPE_TXT } from '@/utils/constant'
import { AddressListPopup } from '@gdyfe/gdy-component-lib'
import '@gdyfe/gdy-component-lib/lib/index.css'
import { getAddressList, removeAddress, setAddress, addAddress } from '@/api/modules/address'

export default {
  name: 'Index',
  components: {
    QRCode: () => import('@/components/Common/QRCode'),
    AddressListPopup
  },
  data() {
    return {
      uin: +this.$route?.query?.uin || '',
      id: this.$route?.query?.detailId || '',
      tempId: this.$route?.query?.tempId || '',
      getAddressList,
      removeAddress,
      setAddress,
      addAddress,
      LOTTERY_EXCHANGE_TYPE,
      LOTTERY_EXCHANGE_TYPE_TXT,
      detailInfo: this.detailInfoTranslator(),
      isShowAddressPopup: false
    }
  },
  computed: {
    isInIframe() {
      return process.client ? window.self !== window.top : false
    }
  },
  watch: {
    $route: {
      handler() {
        this.loadData()
      },
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      getRecordDetail({ uin: this.$route?.query?.uin || '', id: this.id, tempId: this.tempId }).then(res => {
        const { code, errorCode, errorMessage, data } = res
        if (code === 200 && errorCode === 0) {
          this.detailInfo = this.detailInfoTranslator(data)
        } else {
          this.$toast(errorMessage)
        }
      })
    },
    onSaveAddress(val) {
      if (!val) {
        this.$toast('未选择地址')
        return
      }
      const params = {
        id: this.id,
        tempId: this.tempId,
        uin: this.$route?.query?.uin || '',
        address: `${val?.province || ''}-${val?.city || ''}-${val?.area || ''}-${val?.detail}`,
        contactPhone: val?.mobile || '',
        name: val?.name || ''
      }
      setLotteryAddress(params).then(res => {
        const { code, errorCode, errorMessage } = res
        if (code === 200 && errorCode === 0) {
          this.$toast('保存成功')
          this.isShowAddressPopup = false
          this.loadData()
        } else {
          this.$toast(errorMessage)
        }
      })
    },
    onCopy(content) {
      this.$copyText(content).then(
        () => {
          this.$toast('复制成功')
        },
        () => {
          this.$toast('您的浏览器不支持一键复制，请手动从地址栏复制')
        }
      )
    },
    onClickLeft() {
      window.history.back()
    },
    detailInfoTranslator(data) {
      return {
        ...data,
        title: data?.title || '',
        drawPlay: data?.drawPlay || '',
        drawTime: data?.drawTime || '',
        prizeName: data?.prizeName || '',
        prizeIcon: data?.prizeIcon || '',
        exchangeType: +data?.exchangeType || 1,
        address: data?.address || '',
        contactPhone: data?.contactPhone || '',
        code: data?.code || ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.record-detail {
  height: 100%;
  width: 100%;
  padding: 16px 28px 36px;
  background-color: #fff;
  overflow: auto;
  label {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    white-space: nowrap;
    line-height: 18.5px;
    min-width: 65px;
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
  }
  &__content {
    display: flex;
    flex-direction: column;
    margin-top: 46px;
  }
  &__info {
    padding: 20px;
    box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.3);
    border-radius: 8px;
  }
  &__info-wrapper {
    li {
      display: flex;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
      span,
      p {
        line-height: 18.5px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }
  &__tracking-info {
    display: flex;
    flex-direction: column;
    p{
      margin-bottom: 15px;
    }
  }
  &__info-img {
    width: 84px;
    height: 84px;
    display: block;
    border: 1px solid #dddddd;
    margin-top: 15px;
    border-radius: 6px;
  }
  &__code-info {
    margin-top: 10px;
    padding: 20px;
    box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  &__addressee-info {
    margin-top: 10px;
    padding: 20px;
    box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
  }
  &
  &__code-text {
    height: 18px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  &__notice {
    color: #ff1111;
    font-size: 12px;
  }
  &__edit-btn {
    color: #2e7ff9;
    font-size: 14px;
  }
  &__copy-btn {
    background-color: #f2f2f2;
    border-radius: 12px;
    color: #999 !important;
    font-size: 13px !important;
    width: 52px;
    height: 24px;
    line-height: 1;
    padding: 5px;
    margin-left: 12px;
    cursor: pointer;
    i {
      font-size: 13px;
      margin-right: 2px;
    }
  }
  &__addressee-title {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    margin-bottom: 15px;
  }
  &__tracking-msg {
    color: #999 !important;
    font-size: 13px !important;
  }
}
</style>
