<template>
  <div class="gift-history-drawer">
    <el-drawer
      :title="$t('pages.giftHistoryDetailsDrawer.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 class="gift-history-content">
        <div class="blockquote">
          {{ $t('pages.giftHistoryDetailsDrawer.section.sender') }}
          <el-tag
            v-if="row.anchor === true"
            type="danger"
            size="mini"
          >{{ $t('pages.userBaseInfo.labels.anchor') }}</el-tag>
        </div>
        <div class="content">
          <user-table-exhibit
            :user-profile="row.userProfile"
            :query-details="true"
          />
        </div>
        <div v-if="row.roomProfile" class="blockquote">{{ $t('pages.giftHistoryDetailsDrawer.section.senderRoom') }}</div>
        <div v-if="row.roomProfile" class="content">
          <div class="flex-l" style="padding-bottom: 10px;">
            <div class="room-avatar">
              <el-image
                :src="row.roomProfile.roomCover"
                style="width: 100%; height: 100%; border-radius: 100%; margin: auto;"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <flag-icon
                class="flag-icon"
                :code="row.roomProfile.countryCode"
                :tooltip="row.roomProfile.countryName"
                size="18"
              />
            </div>
            <div class="nowrap-ellipsis room-name">
              <el-link
                @click="queryRoomDetails()"
              ><a :title="row.roomProfile.roomName">{{
                row.roomProfile.roomName
              }}</a></el-link>
            </div>
          </div>
        </div>
        <div v-if="row.roomProfile" class="blockquote">{{ $t('pages.giftHistoryDetailsDrawer.section.snapshot') }}</div>
        <div class="content gift-text">
          <el-row :gutter="10">
            <el-col :span="12">{{ $t('pages.giftHistoryDetailsDrawer.label.giftId') }}: {{ row.giftId }}</el-col>
            <el-col
              :span="12"
            >{{ $t('pages.giftHistoryDetailsDrawer.label.giftCover') }}:
              <el-image
                style="width: 30px; height: 30px"
                :src="row.giftCover"
                fit="fill"
                :preview-src-list="[row.giftCover]"
              />
            </el-col>
            <el-col
              :span="12"
            >{{ $t('pages.giftHistoryDetailsDrawer.label.giftCurrency') }}: {{ row.giftValue.currencyType }}</el-col>
            <el-col :span="12">{{ $t('pages.giftHistoryDetailsDrawer.label.giftType') }}: {{ row.giftValue.giftType }}</el-col>
            <el-col :span="12">{{ $t('pages.giftHistoryDetailsDrawer.label.giftUnitPrice') }}: {{ row.giftValue.unitPrice }}</el-col>
            <el-col :span="12">{{ $t('pages.giftHistoryDetailsDrawer.label.giftValue') }}: {{ row.giftValue.giftValue }}</el-col>
            <el-col
              :span="12"
            >{{ $t('pages.giftHistoryDetailsDrawer.label.actualAmount') }}: {{ row.giftValue.actualAmount }}</el-col>
            <el-col
              :span="12"
            >{{ $t('pages.giftHistoryDetailsDrawer.label.sendQuantity') }}: {{ row.giftValue.quantity }} {{ $t('pages.giftHistoryDetailsDrawer.word.countUnit') }}</el-col>
            <el-col
              :span="12"
            >{{ $t('pages.giftHistoryDetailsDrawer.label.acceptUsers') }}: {{ row.giftValue.userSize }} {{ $t('pages.giftHistoryDetailsDrawer.word.peopleUnit') }}</el-col>
            <!-- 这两个字段已移除(percentage&selfPercentage), 2023/4月份可移除-->
            <el-col
              v-if="row.giftValue.percentage"
              :span="12"
            >{{ $t('pages.giftHistoryDetailsDrawer.label.acceptProbability') }}: {{ row.giftValue.percentage * 100 }}%</el-col>
            <el-col
              v-if="row.giftValue.selfPercentage"
              :span="12"
            >{{ $t('pages.giftHistoryDetailsDrawer.label.selfAcceptProbability') }}: {{ row.giftValue.selfPercentage * 100 }}%</el-col>
            <el-col
              :span="12"
            >{{ $t('pages.giftHistoryDetailsDrawer.label.bag') }}: {{ row.giftValue.bag ? $t('pages.userBaseInfo.words.yes') : $t('pages.userBaseInfo.words.no') }}</el-col>
            <el-col :span="12">{{ $t('pages.giftHistoryDetailsDrawer.label.trackId') }}: {{ row.trackId }}</el-col>
            <el-col :span="12">{{ $t('pages.giftHistoryDetailsDrawer.label.requestPlatform') }}: {{ row.requestPlatform }}</el-col>
          </el-row>
        </div>
        <div class="blockquote">{{ $t('pages.giftHistoryDetailsDrawer.section.receivers') }}</div>
        <div class="content">
          <div
            v-for="(item, index) in row.acceptUsers"
            :key="index"
            style="margin: 10px 0px;"
          >
            <user-table-exhibit
              :user-profile="item.userProfile"
              :query-details="true"
            />
            <div class="receive-info">
              <el-tag
                v-if="item.anchor === true"
                type="danger"
                size="mini"
              >{{ $t('pages.userBaseInfo.labels.anchor') }}</el-tag>
              <el-tag
                v-if="item.anchor === true"
                size="mini"
              >{{ $t('pages.giftHistoryDetailsDrawer.label.acceptTarget') }}: {{ item.targetAmount }}</el-tag>
              <el-tag size="mini">{{ $t('pages.giftHistoryDetailsDrawer.label.acceptAmount') }}: {{ item.acceptAmount }}</el-tag>
              <el-tag
                size="mini"
              >{{ $t('pages.giftHistoryDetailsDrawer.label.acceptProbability') }}:
                {{
                  (item.acceptUserId !== row.userId
                    ? item.percentage
                    : item.selfPercentage) * 100
                }}%</el-tag>
              <el-tag
                v-if="item.region"
                size="mini"
              >{{ $t('pages.giftHistoryDetailsDrawer.label.regionFlow') }}: {{ item.region
              }}<span
                v-if="item.hasOwnProperty('regionEq')"
              >、{{ item.regionEq ? $t('pages.userBaseInfo.words.yes') : $t('pages.userBaseInfo.words.no') }}</span></el-tag>
              <el-tag
                v-if="item.hasOwnProperty('countTargetAmount')"
                size="mini"
              >{{ $t('pages.giftHistoryDetailsDrawer.label.countStatus') }}: {{ item.countTargetAmount ? $t('pages.userBaseInfo.words.yes') : $t('pages.userBaseInfo.words.no') }}</el-tag>
              <el-button
                type="text"
                size="mini"
                @click="clickCopyReceiptId(item)"
              ><i class="el-icon-document-copy" />{{ $t('pages.giftHistoryDetailsDrawer.action.receiptId') }}</el-button>
            </div>
          </div>
        </div>
        <div class="blockquote">{{ $t('pages.giftHistoryDetailsDrawer.section.logEvents') }}</div>
        <div class="content">
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in row.logs"
              :key="index"
              :timestamp="item.createTime | dateFormat"
            >
              {{ item.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-drawer>

    <room-deatils-drawer
      v-if="roomDeatilsDrawerVisible"
      :room-id="row.originId"
      @close="roomDeatilsDrawerVisible = false"
    />
  </div>
</template>
<script>
import RoomDeatilsDrawer from '@/components/data/RoomDeatilsDrawer'
import { copyText } from '@/utils'
export default {
  name: 'GiftHistoryDetailsDrawer',
  components: { RoomDeatilsDrawer },
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      roomDeatilsDrawerVisible: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    queryRoomDetails() {
      this.roomDeatilsDrawerVisible = true
    },
    copyContent(text) {
      copyText(text)
        .then(() => {
          this.$opsMessage.success()
        })
        .catch(er => {
          this.$opsMessage.fail()
        })
    },
    clickCopyReceiptId(row) {
      this.copyContent(row.receiptId)
    }
  }
}
</script>
<style scoped lang="scss">
.gift-history-content {
  padding: 0px 10px;
  .el-tabs__nav-scroll .el-tabs__item {
    font-size: 13px;
  }
  .room-avatar {
    position: relative;
    width: 50px;
    height: 50px;
    margin: auto;
    flex-shrink: 0;
    .flag-icon {
      position: absolute;
      bottom: 0px;
    }
  }

  .room-name {
    width: 100%;
    text-align: left;
    padding-left: 10px;
  }

  .gift-text {
    line-height: 40px;
  }
}
</style>
