<template>
  <a-form
    label-align="left"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
  >
    <div class="title">用户信息</div>
    <a-row>
      <a-col :span="12">
        <a-form-item
          label="用户昵称"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.nickname}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          label="手机号码"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.phone}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-item
          label="实名状态"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.realNameState}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          label="真实姓名"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.userName}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-item
          label="身份证号"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.idCard}}</span>
          <span
            class="eyes___3SmGU"
            @click="clickEye"
            v-if="costInfo.idCard"
          ><span
              role="img"
              aria-label="eye"
              class="anticon anticon-eye"
            ><svg
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="eye"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path :d="eyePath"></path>
                <path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path>
              </svg></span></span>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          label="注册区域"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.registrationArea}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-item
          label="注册来源"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.registrationSource}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          label="注册时间"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.registrationTime}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-item
          label="最近登录时间"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.lastLoginTime}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          label="最近登录IP"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.lastLoginIp}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-item
          label="最近登录终端"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.lastLoginTerminal}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <div class="title">骑行消费信息</div>
    <a-row>
      <a-col :span="12">
        <a-form-item
          label="历史消费金额"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.totalConsumption}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          label="历史骑行次数"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.totalCyclingNumber}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-item
          label="历史骑行时长"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.totalCyclingDuration}}</span>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>

import { ref, defineProps, onMounted } from 'vue'
import { callPayment } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import _ from 'lodash'

let eyeShow = "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
let eyeHide = "M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"

const eyePath = ref(eyeShow)
const eyeShowState = ref(true)
const idCard = ref("")
const props = defineProps({
  orderParams: {
    type: Object,
    required: true
  }
});

const costInfo = ref({
  nickname: "",
  phone: "",
  realNameState: "",
  userName: "",
  idCard: "",
  registrationArea: "",
  registrationSource: "",
  registrationTime: "",
  lastLoginTime: "",
  lastLoginIp: "",
  lastLoginTerminal: "",
  totalConsumption: "",
  totalCyclingNumber: "",
  totalCyclingDuration: ""
})

onMounted(() => {
  if (props.orderParams['refundId']) {
    callPayment("/wxPayment/refundApplyUserDetail/" + props.orderParams['refundId'], {}, "get").then(res => {
      if (res.code == 200) {
        costInfo.value = res.data
        idCard.value = res.data.idCard;
      } else {
        message.error(res.message)
      }
    })
  }
})

const clickEye = () => {
  const item = _.cloneDeep(idCard.value);
  if (eyeShowState.value) {
    eyePath.value = eyeHide;
    if (costInfo.value.idCard) {
      const start = item.slice(0, 6);
      const end = item.slice(14, 18);
      const masked = start + "********" + end;
      costInfo.value.idCard = masked
    }
  } else {
    eyePath.value = eyeShow;
    if (costInfo.value.idCard) {
      costInfo.value.idCard = item
    }
  }
  eyeShowState.value = !eyeShowState.value
}
</script>

<style scoped>
.title {
  display: flex;
  flex-basis: 100%;
  margin: 6px 0;
  font-weight: 700;
  font-size: 16px;
}

.ant-form-item {
  margin-bottom: 2px;
}

.eyes___3SmGU {
  margin-left: 6px;
  cursor: pointer;
}

.anticon {
  display: inline-block;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>