<template>
  <view class="xd-item-user-new" @click="handleToDetail">
    <view class="xd-item-user-new__image"
      :style="{
        width: imageWidth + 'rpx',
        height: imageHeight + 'rpx'
      }"
    >
      <image @click="handleClickImage(uiItem.image)" :src="uiItem.image" mode="widthFix"></image>
    </view>
    <view class="xd-item-user-new__text">
      <view>
        <xd-red-name :is-vip="uiItem.is_vip">{{uiItem.name}}</xd-red-name>
      </view>
      <view v-for="(iconItem, iconIndex) in uiItem.icons" :key="iconIndex" @click.stop="handleToAuth(iconItem)">
        <xd-font-icon
          :size="iconItem.size"
          :icon="iconItem.icon"
          :color="iconItem.auth === 'Y' ? styleMainColor: '#c3c3c3'"
        ></xd-font-icon>
      </view>
    </view>
    <view class="xd-item-user-new__tag">
      <view>
        <xd-tag type="primary" inverted size="small">
          <view class="xd-item-user-new__tag-text">
            <xd-font-icon size="25" :icon="uiItem.sex === 1 ? 'iconnan':'iconnv'"></xd-font-icon>
            <text>{{uiItem.age}}</text>
          </view>
        </xd-tag>
      </view>
      <view v-for="(item,index) in uiItem.otherTags" :key="index">
        <xd-tag type="primary" inverted size="small">{{item}}</xd-tag>
      </view>
    </view>
    <view class="xd-item-user-new__desc">{{uiItem.desc}}</view>
  </view>
</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import XdTag from "@/components/XdTag/XdTag";
  import XdRedName from "./../XdRedName/XdRedName";
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';

  export default {
    name: "XdItemUserInfo",
    components:{
      XdFontIcon,
      XdTag,
      XdRedName
    },
    props: {
      item: {
        type: Object | null,
        default: null
      },
      imageWidth: {
        type: Number | String,
        default: 704
      },
      imageHeight: {
        type: Number | String,
        default: 346
      }
    },
    data(){
      return {
        itemTestData: {
          image: 'https://sandbox-image.jufubao.cn/20210719171512575.png',
          desc: '保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。',
          sex: 1, //1=>男 2=>女
          age: '26岁',
          is_vip: false,
          otherTags:['北京', '国有企业', '未婚'],
          name: '高世勇',
          icons: [
            {icon: 'iconlovefont iconloveshimingrenzheng', auth: 'N' , size: 36 , path: '/user/upload/personal'}, //实名
            {icon: 'iconlovefont iconlovegonghui1', auth: 'Y', size: 38, path: ''}, //工会
            {icon: 'iconlovefont iconloveVIP2', auth: 'N', size: 32, path: '/user/my/vip'}, //vip
            {icon: 'iconlovefont iconlovecheliang1', auth: 'N', size: 44, path: '/user/upload/car'}, //车辆
            {icon: 'iconlovefont iconlovefangwu', auth: 'N', size: 44, path: '/user/upload/house'}, //房屋
            {icon: 'iconlovefont iconloverenzheng1', auth: 'Y', size: 38, path: ''} //公安
          ]
        },
        uiItem: null,
        styleMainColor: '', //插件主题风格样式
      }
    },
    async created() {
      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
      
      if(this.item === null) {
        this.uiItem = this.$xdUniHelper.cloneDeep(this.itemTestData);
      }

      if(this.item !== null) {
        this.uiItem = this.$xdUniHelper.cloneDeep(this.item);
      }

    },
    methods:{

      handleClickImage(image){
        console.log('onClickImage', image);
        this.$emit('onClickImage', image);
      },

      handleToDetail() {
        console.log('handleToDetail', this.uiItem)
        this.$emit('toDetail', this.uiItem);
      },
      handleToAuth(item) {
        console.log('handleToAuth', item)
        this.$emit('toAuth', item);
      },
    },

  }
</script>

<style scoped lang="less">
  .xd-item-user-new {
    &__image {
      overflow: hidden;
      & > image {
        width: 100%;
      }
    }

    &__text {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: unit(20,rpx);
      /*padding: 0 unit(20,rpx);*/

      & > view {
        margin-right: unit(15,rpx);
      }

      & > view:first-child {
        font-size: @xd-font-size-lg;
        margin-right: unit(20,rpx);
      }
    }

    &__tag {
      margin-top: unit(20,rpx);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      /*padding: 0 unit(20, rpx);*/

      &-text {
        display: flex;
        justify-content: center;
        align-items: center;

        & > text {
          margin-left: unit(5,rpx);
        }
      }

      & > view {
        margin-right: unit(10,rpx);
      }
    }

    &__desc {
      /*padding: 0 unit(20, rpx);*/
      margin-top: unit(20,rpx);
      color: #000;
      font-size: @xd-font-size-base;
      line-height: unit(36,rpx);
      .uni-max-cut(2, 72);
    }
  }
</style>
