<template>
  <div class="seeDetail">
    <el-form label-width="180px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户：">
            <img style="width:100px;height:100px;" :src="detailData.Photo" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称：">{{detailData.Name}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="照片墙">
            <div class="nav_Main" style="width: 500px;">
              <div class="nav_IconContent">
                <div v-for="(item, index) in detailData.AlbumList" :key="index"
                  style="margin-right: 20px; position: relative; ">
                  <div class="colapp-image" :style="{
                                    backgroundImage: 'url(' + item + ')'
                                  }"></div>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="微信号：">{{detailData.WechatNo}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式：">{{detailData.ContactWay}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号：">{{detailData.Moblie}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别：">{{detailData.SexStr}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="体重：">{{detailData.Weight}}kg</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身高：">{{detailData.Height}}cm</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="生日：">{{detailData.Birthday}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历：">{{detailData.EducationTypeStr}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="婚姻：">{{detailData.MarriageStr}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房产：">{{detailData.HouseInfoStr}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车产：">{{detailData.CarInfoStr}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年收入：">{{detailData.YearMoneyTypeStr}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否显示用户资料：">{{detailData.IsShow==1?'是':'否'}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="可查看微信次数：">{{detailData.LookTimes}}次</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="真实姓名：">
            {{detailData.RealName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号：">{{detailData.IDCardNo}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="职业类型：">
            {{detailData.Industry}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业学校：">{{detailData.SchoolInfo}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="所属分组：">
            <el-tag v-for="(item,index) in detailData.BelongGroupList" size="small" :key="index">{{item.GroupName}}
            </el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="现居地：">
            {{detailData.DWPName}}{{detailData.DWCName}}{{detailData.DWDName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="自我描述：">
            {{detailData.About}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="家庭背景：">
            {{detailData.FamilyInfo}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="业余爱好：">
            {{detailData.Hobby}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="曾经旅游过的地方：">
            {{detailData.ActivityRegion}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="理想的另一半是什么样的：">
            {{detailData.HopeYou}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="期待的未来生活是怎样的：">
            {{detailData.OtherInfo}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="最喜欢的一本书及原因：">
            {{detailData.LikeBook}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="最喜欢的电影及原因：">
            {{detailData.LikeTV}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="欣赏爱情：">
            {{detailData.IdealLove}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  export default {
    props: ['detailData'],
    data() {
      return {};
    },
    methods: {

    },
    mounted() {
      this.getgroupList();
    }
  };

</script>
<style>
  .seeDetail {
    height: 500px;
    overflow: auto;
  }

  .seeDetail .imgList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .seeDetail .el-form-item__content {
    margin-left: 0;
  }

  .seeDetail .nav_Main {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .seeDetail .nav_IconContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .seeDetail .colapp-image {
    background-size: cover;
    background-position: center center;
    width: 100px;
    height: 100px;
    border-radius: 0%;
    border:1px solid #e2e2e2;
  }

</style>
