<template>
  <view class="xd-item" @click="handleToDetail">
    <view class="xd-item__header">
      <view class="xd-item__header-image">
        <image @click="handleClickImage(uiItem.image)" :src="uiItem.image" mode="heightFix"></image>
      </view>
      <view class="xd-item__header-text">
        <view>
          <xd-red-name :is-vip="uiItem.is_vip">{{uiItem.name}}</xd-red-name>
          <view><xd-tag :radius="tagRadius" type="primary" inverted size="small" >魅力值:{{uiItem.attractive}}</xd-tag></view>
        </view>
        <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>
          <view v-for="(item,index) in uiItem.otherTags" :key="index">
            <xd-tag :radius="tagRadius" type="primary" inverted size="small" >{{item}}</xd-tag>
          </view>
        </view>

      </view>
    </view>
    <view class="xd-item__desc">{{uiItem.desc}}</view>
  </view>
</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import XdTag from "@/components/XdTag/XdTag";
  import XdRedName from "@/components/XdRedName/XdRedName";
  import {
    getParentsStyle,
  } from '@/utils/xd.base';

  export default {
    name: "XdItemCardUser",
    components:{
      XdFontIcon,
      XdTag,
      XdRedName
    },
    props: {
      item: {
        type: Object | null,
        default: null
      },
      imageWidth: {
        type: Number | String,
        default: 704
      },
      imageHeight: {
        type: Number | String,
        default: 346
      },
      tagRadius: {
        type: String,
        default: '25rpx'
      }
    },
    data(){
      return {
        itemTestData: {
          image: 'https://sandbox-image.jufubao.cn/20210719171512575.png',
          desc: '保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。',
          is_vip: false,
          otherTags:['女','26岁','勿拿不起啊嘎嘎','国有控股企业'],
          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: null, //插件主题风格样式
      }
    },
    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  {
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      &-image {
        width: unit(210,rpx);
        height: unit(210,rpx);
        position: relative;
        flex-shrink: 0;
        overflow: hidden;
        border-radius: unit(10,rpx);
        margin-right: unit(30,rpx);

        & > image {
          height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;

          transform: translate(-50%, -50%);
        }
      }

      &-text {
        flex: 1;

        & > view:first-child {
            display: flex;
            align-items: center;
          &>view{
            margin: 0 unit(20,rpx);
            font-size: @xd-font-size-base;
          }
        }

        & > view:nth-child(2) {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: unit(15,rpx) 0 unit(20, rpx);

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

        & > view:last-child {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;


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

    &__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>
