<template>
  <div class="row">
    <div v-if="config" :style="{backgroundColor:config.color}" class="layout-sex rowACenter">
      <icon :type="config.icon" class="layout-sex-icon"></icon>
      <span>{{nowAge}}</span>
    </div>
  </div>
</template>

<script>
import {
  icon
} from '$components';
import config from '../data/config';
import props from '../props';
import {DateFormat} from "$utils/tool/date";
export default {
  name: "layout-sex",

  computed:{
    config(){
      return config[this.type];
    },

    nowAge(){
      if (this.age) {
        return this.age;
      } else if (this.birthday) {
        let nowYear = new Date().getFullYear();

        let usePeople = DateFormat.inverse(this.birthday,'YYYY-MM-DD');

        let age = Math.ceil(nowYear - usePeople.year);

        return  age < 0 ? 0 : age;
      } else {
        return  0;
      }
    }
  },

  props,

  components:{
    icon
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>