<template>
  <van-popup
    v-model="visible"
    class="detail-popup"
    closeable
    :overlay="false"
    position="right"
    get-container="body"
    :style="{ height: '100%', width: '100%' }"
  >
    <div class="detail-popup__content">
      <ul class="detail-popup__info">
        <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>
          <label>获得奖品：</label>
          <div>
            <p>{{ detailInfo.prizeName }}</p>
            <img v-lazy="detailInfo.prizeIcon" class="detail-popup__info-img" alt="" />
          </div>
        </li>
        <li>
          <label>领奖方式：</label>
          <span>{{ LOTTERY_EXCHANGE_TYPE_TXT[detailInfo.exchangeType] }}</span>
        </li>
        <li v-if="detailInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.mailing">
          <label>收货地址：</label>
          <span v-if="detailInfo.address">{{ detailInfo.address }}</span>
          <span v-if="!detailInfo.address" class="detail-popup__edit-btn" @click="isShowAddressPopup = true"
            >点击填写收货地址</span
          >
        </li>
        <li v-if="detailInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.mailing && detailInfo.contactPhone">
          <label>联系方式：</label>
          <span>{{ detailInfo.contactPhone }}</span>
        </li>
      </ul>
      <div v-if="detailInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.offline" class="detail-popup__code-info">
        <QRCode :url="detailInfo.code" :width="70" :height="70"></QRCode>
        <p class="detail-popup__code-text"><label>兑换码：</label>{{ detailInfo.code }}</p>
        <p class="detail-popup__notice">*兑换信息请勿泄露给他人，以防冒充代领</p>
      </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>
  </van-popup>
</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: 'DetailPopup',
  components: {
    QRCode: () => import('@/components/Common/QRCode'),
    AddressListPopup
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      uin: this.$route?.query?.uin || '',
      getAddressList,
      removeAddress,
      setAddress,
      addAddress,
      LOTTERY_EXCHANGE_TYPE,
      LOTTERY_EXCHANGE_TYPE_TXT,
      detailInfo: this.detailInfoTranslator(),
      isShowAddressPopup: false
    }
  },
  computed: {
    visible: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    visible(nVal) {
      if (nVal) {
        this.loadData()
      }
    }
  },
  methods: {
    loadData() {
      getRecordDetail({ uin: this.$route?.query?.uin || '', id: this.id }).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,
        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)
        }
      })
    },
    detailInfoTranslator(data) {
      return {
        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>
.detail-popup {
  padding-top: 54px;
  label {
    font-size: 14px;
    font-weight: 500;
    color: #666;
  }
  &__content {
    padding: 0 20px;
  }
  &__info {
    li {
      display: flex;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
      span,
      p {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
  &__info-img {
    width: 84px;
    height: 84px;
    display: block;
    border: 1px solid #dddddd;
    margin-top: 5px;
    border-radius: 6px;
  }
  &__code-info {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px dashed #dddd;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  &__code-text {
    height: 18px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    display: flex;
    margin: 10px 0;
  }
  &__notice {
    color: #ff1111;
    font-size: 12px;
  }
  &__edit-btn {
    color: #2e7ff9;
  }
}
</style>
