<template>
  <div class="info">
    <p class="title">{{ data['姓名'] }}</p>
    <n-space v-show="tags && tags.length > 0">
      <n-tag v-for="tag in tags" :key="tag.type" :type="tag.type" size="small">
        {{ tag.name }}
      </n-tag>
    </n-space>
    <p>{{ data['所属党组织名称'] }}</p>
    <div class="box flex">
      <div>
        <span>性别</span>
        <p>{{ data['性别'] }}</p>
      </div>
      <div>
        <span>出生日期</span>
        <p>{{ dayjs(data['出生日期']).format('ll') }}</p>
      </div>
      <div>
        <span>学历</span>
        <p>{{ data['学历'] }}</p>
      </div>
      <div>
        <span>党员身份</span>
        <p>{{ data['党员身份'] }}</p>
      </div>
      <div>
        <span>入党日期</span>
        <p>{{ dayjs(data['加入中共党组织日期']).format('ll') }}</p>
      </div>
    </div>
    <div class="box">
      <div>
        <span>身份证号码</span>
        <p>{{ trans(data['身份证号码']) }}</p>
      </div>
      <div>
        <span>居住地址</span>
        <p>{{ data['所属小区'] + data['所属楼宇'] + data['所属房间'] }}</p>
      </div>
      <div>
        <span>联系电话</span>
        <p>{{ trans(data['联系方式_手机']) }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import dayjs from '@/util/dayjs'
import { computed, PropType } from '@vue/runtime-core'
import { member } from '@/util/tags'
const props = defineProps({
  data: {
    type: Object as PropType<{ [key: string]: any }>,
    required: true,
  },
})
const trans = (val: string) => {
  return (val && val.replace(/(\w{3})\w*(\w{4})/, '$1******$2')) || '无'
}
console.log(dayjs().diff('1999-09-12', 'year'))
const tags = computed(() => {
  const result: { type?: string; name?: string }[] = []
  const marker: string[] = props.data['标签'] || []
  const date = props.data['加入中共党组织日期']

  if (dayjs().diff(date, 'year') >= 50 && dayjs().diff(date, 'year') <= 59) {
    marker.push('光荣在当党50年')
  } else if (dayjs().diff(date, 'year') >= 60) {
    marker.push('党心暖我心')
  }
  if (marker.length > 0) {
    marker.forEach((item: string) => {
      const cur = member.find((e) => e.name === item)
      cur &&
        result.push({
          type: cur.type,
          name: item,
        })
    })
  }
  return result
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.info
  border-radius .04rem
  box-sizing border-box
  .title
    font-size .13rem
    font-family $font-ping-medium
    margin-bottom .04rem
  .box
    background $white-bg
    border-radius .03rem
    margin-top .05rem
    box-sizing border-box
    padding .1rem
    min-width .3rem
    &.flex
      display flex
      flex-wrap wrap
      >div
        &:nth-of-type(1)
        &:nth-of-type(4)
          width 25%
        &:nth-of-type(2)
        &:nth-of-type(5)
          width 42%
    span
      color $gray
    p
      margin-bottom .03rem
      font-family $font-ping-medium
      white-space nowrap
</style>
