<template>
  <el-dialog title="用户信息" :close-on-click-modal="false" :visible.sync="open" width="1200px" append-to-body>
    <el-collapse v-model="activeName" >
      <el-collapse-item title="基本信息" name="base">
        <el-descriptions :contentStyle="CS" :label-style="LS " class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="id">
            {{info.user.id}}
          </el-descriptions-item>
          <el-descriptions-item label="编号">
            {{info.user.usercode}}
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            {{info.user.mobile}}
          </el-descriptions-item>
          <el-descriptions-item label="昵称">
            {{info.user.nickname}}
          </el-descriptions-item>
          <el-descriptions-item label="用户类型">
            <cai-dict-tag :options="appUserTypeList" :value="info.user.type" />
          </el-descriptions-item>
          <el-descriptions-item label="头像">
            <image-avatar :src="info.user.avatar" />
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <cai-dict-tag :options="genderList" :value="info.user.gender" />
          </el-descriptions-item>
          <el-descriptions-item label="年龄">
            {{info.user.age}}
          </el-descriptions-item>
          <el-descriptions-item label="生日">
            {{info.user.birthday}}
          </el-descriptions-item>
          <el-descriptions-item label="基础资料是否完成">
            <cai-dict-tag :options="finishStatusList" :value="info.user.finishBaseStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="身高">
            {{info.user.height}}
          </el-descriptions-item>
          <el-descriptions-item label="体重">
            {{info.user.weight}}
          </el-descriptions-item>
          <el-descriptions-item label="相册" :span="3" v-if="info.userPicturesList">
            <span v-for='val in info.userPicturesList'>
              <image-preview :src="val.picture" height="45px" width="45px"  /> &nbsp;&nbsp;
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="居住地">
            {{info.user.residenceName}}
          </el-descriptions-item>
          <el-descriptions-item label="户籍地">
            {{info.user.addressName}}
          </el-descriptions-item>
          <el-descriptions-item label="学历">
            <cai-dict-tag :options="userEducationList" :value="info.user.education" />
          </el-descriptions-item>
          <el-descriptions-item label="婚况">
            <cai-dict-tag :options="userMarriageList" :value="info.user.marriage" />
          </el-descriptions-item>
          <el-descriptions-item label="职业">
            {{info.user.profession}}
          </el-descriptions-item>
          <el-descriptions-item label="年收入">
            <cai-dict-tag :options="userAnnualIncomeList" :value="info.user.annualIncome" />
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <cai-dict-tag :options="userStatusList" :value="info.user.status" />
          </el-descriptions-item>
          <el-descriptions-item label="最后登录IP">
            {{info.userLogin.lastLoginIp}}
          </el-descriptions-item>
          <el-descriptions-item label="最后登录时间">
            {{info.userLogin.lastLoginTime}}
          </el-descriptions-item>
          <el-descriptions-item label="最后登录位置">
            {{info.userLogin.lastLocation}}
          </el-descriptions-item>
          <el-descriptions-item label="注册IP">
            {{info.userLogin.regIp}}
          </el-descriptions-item>
          <el-descriptions-item label="注册时间">
            {{info.userLogin.regTime}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="详细信息" name="fullInfo">
        <el-descriptions :contentStyle="CS" :label-style="LS " class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="体型">
            <cai-dict-tag :options="userSomatotypeList" :value="info.user.somatotype" />
          </el-descriptions-item>
          <el-descriptions-item label="生肖">
            <cai-dict-tag :options="userZodiacList" :value="info.user.zodiac" />
          </el-descriptions-item>
          <el-descriptions-item label="星座">
            <cai-dict-tag :options="userSignList" :value="info.user.sign" />
          </el-descriptions-item>
          <el-descriptions-item label="公司性质">
            <cai-dict-tag :options="userCompanyNatureList" :value="info.user.companyNature" />
          </el-descriptions-item>
          <el-descriptions-item label="为谁征婚">
            <cai-dict-tag :options="userForPersonalsList" :value="info.user.forPersonals" />
          </el-descriptions-item>
          <el-descriptions-item label="微信号">
            {{info.user.wxCode}}
          </el-descriptions-item>
          <el-descriptions-item label="住房情况">
            <cai-dict-tag :options="userHousingStatusList" :value="info.userInfo.housingStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="购车情况">
            <cai-dict-tag :options="userCarStatusList" :value="info.userInfo.carStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="是否吸烟">
            <cai-dict-tag :options="userSmokeStatusList" :value="info.userInfo.smokeStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="是否喝酒">
            <cai-dict-tag :options="userDrinkStatusList" :value="info.userInfo.drinkStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="民族">
            {{info.userInfo.nation}}
          </el-descriptions-item>
          <el-descriptions-item label="有没有小孩">
            <cai-dict-tag :options="userChildStatusList" :value="info.userInfo.childStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="家庭背景">
            <cai-dict-tag :options="userFamilyBackgroundList" :value="info.userInfo.familyBackground" />
          </el-descriptions-item>
          <el-descriptions-item label="家中排行">
            <cai-dict-tag :options="userFamilyRankingList" :value="info.userInfo.familyRanking" />
          </el-descriptions-item>
          <el-descriptions-item label="是否接受异地恋">
            <cai-dict-tag :options="userLoveAtDistanceList" :value="info.userInfo.loveAtDistance" />
          </el-descriptions-item>
          <el-descriptions-item label="何时结婚">
            <cai-dict-tag :options="userWhenMarriageList" :value="info.userInfo.whenMarriage" />
          </el-descriptions-item>
          <el-descriptions-item label="是否要小孩">
            <cai-dict-tag :options="userCarStatusList" :value="info.userInfo.wantChild" />
          </el-descriptions-item>
          <el-descriptions-item label="愿与对方父母同住">
            <cai-dict-tag :options="userLiveAtParentList" :value="info.userInfo.liveAtParent" />
          </el-descriptions-item>
          <el-descriptions-item label="交友目的">
            <cai-dict-tag :options="userFindTagList" :value="info.userInfo.findTag" />
          </el-descriptions-item>
          <el-descriptions-item label="毕业院校">
            {{info.userInfo.graduateSchool}}
          </el-descriptions-item>
          <el-descriptions-item label="兴趣爱好">
            {{info.userInfo.hobbys}}
          </el-descriptions-item>
          <el-descriptions-item label="自我描述">
            {{info.user.remark}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="择偶条件" name="filter">
        <el-descriptions :contentStyle="CS" :label-style="LS " class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="择偶条件-年龄">
            <span v-if="!info.userInfo.filterAge">不限</span>
            <span v-if="info.userInfo.filterAge">{{info.userInfo.filterAge}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="择偶条件-身高">
            <span v-if="!info.userInfo.filterHeight">不限</span>
            <span v-if="info.userInfo.filterHeight">{{info.userInfo.filterHeight}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="择偶条件-体型">
            <span v-if="!info.userInfo.filterSomatotype">不限</span>
            <cai-dict-tag v-if="info.userInfo.filterSomatotype" :options="userSomatotypeList" :value="info.userInfo.filterSomatotype" empty-value="-" split-value="&"/>
          </el-descriptions-item>
          <el-descriptions-item label="择偶条件-婚况">
            <span v-if="!info.userInfo.filterMarriage">不限</span>
            <cai-dict-tag v-if="info.userInfo.filterMarriage" :options="userMarriageList" :value="info.userInfo.filterMarriage" empty-value="-" split-value="&"/>
          </el-descriptions-item>
          <el-descriptions-item label="择偶条件-学历">
            <span v-if="!info.userInfo.filterEducation">不限</span>
            <cai-dict-tag v-if="info.userInfo.filterEducation" :options="userEducationList" :value="info.userInfo.filterEducation" />
          </el-descriptions-item>
          <el-descriptions-item label="择偶条件-地区">
            <span v-if="!info.userInfo.filterResidence">不限</span>
            <span v-if="info.userInfo.filterResidence">{{info.userInfo.filterResidence}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="择偶条件-年收入">
            <span v-if="!info.userInfo.filterAnnualIncome">不限</span>
            <cai-dict-tag v-if="info.userInfo.filterAnnualIncome" :options="userAnnualIncomeList" :value="info.userInfo.filterAnnualIncome" />
          </el-descriptions-item>
          <el-descriptions-item label="择偶条件-小孩情况">
            <span v-if="!info.userInfo.filterChildStatus">不限</span>
            <cai-dict-tag v-if="info.userInfo.filterChildStatus" :options="userChildStatusList" :value="info.userInfo.filterChildStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="择偶条件-住房情况">
            <span v-if="!info.userInfo.filterHousingStatus">不限</span>
            <cai-dict-tag v-if="info.userInfo.filterHousingStatus" :options="userHousingStatusList" :value="info.userInfo.filterHousingStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="择偶条件-购车情况">
            <span v-if="!info.userInfo.filterCarStatus">不限</span>
            <cai-dict-tag v-if="info.userInfo.filterCarStatus" :options="userCarStatusList" :value="info.userInfo.filterCarStatus" />
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="钱包" name="account">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="2" size="medium" border>
          <el-descriptions-item label="收益的余额">
            {{info.account.incomeCoin}}
          </el-descriptions-item>
          <el-descriptions-item label="交换微信次数">
            {{info.account.wxTransNum}}
          </el-descriptions-item>
          <el-descriptions-item label="消费统计">
            {{info.account.consumeTotal}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
<!--      <el-collapse-item title="在线状态" name="userOnline" v-if="info.userOnline">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="2" size="medium" border>
          <el-descriptions-item label="在线状态">
            <cai-dict-tag :options="onlineStatusList" :value="info.userOnline.status" />
          </el-descriptions-item>
          <el-descriptions-item label="最后在线时间">
            {{info.userOnline.lastLiveTime}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>-->
    </el-collapse>
  </el-dialog>
</template>

<script>
import {
  appUserTypeList,
  booleanList,
  finishStatusList,
  genderList,
  memberTypeList,
  onlineStatusList,
  userAnnualIncomeList,
  userCarStatusList,
  userChildStatusList,
  userCompanyNatureList,
  userDrinkStatusList,
  userEducationList,
  userFamilyBackgroundList,
  userFamilyRankingList,
  userFindTagList,
  userForPersonalsList,
  userHousingStatusList,
  userLiveAtParentList,
  userLoveAtDistanceList,
  userMarriageList,
  userSignList,
  userSmokeStatusList,
  userSomatotypeList,
  userStatusList,
  userWantChildList,
  userWhenMarriageList,
  userZodiacList,
  videoStatusList
} from '@/constant/statusMap'
import { getFullUser } from '@/api/xq/user'

export default {
  name: "UserInfo",
  data() {
    return {
      genderList,userStatusList,finishStatusList,userSomatotypeList,userZodiacList,userSignList,
      userEducationList,userCompanyNatureList,userAnnualIncomeList,userForPersonalsList,
      userHousingStatusList,userCarStatusList,userSmokeStatusList,userMarriageList,
      userDrinkStatusList,userChildStatusList,userFamilyBackgroundList,userFamilyRankingList,
      userLoveAtDistanceList,userWhenMarriageList,userWantChildList,userLiveAtParentList,
      userFindTagList,appUserTypeList,
      videoStatusList,onlineStatusList,memberTypeList,
      booleanList,
      activeName:['base','account','userAlbums'],
      CS: {
        'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      LS: {
        // 'color': '#000',
        'text-align': 'center',
        // 'font-weight': '600',
        'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
      open:false,
      info:{},
      userId: this.$route.query.id,
    };
  },
  created() {

  },
  methods: {
    init(userId){
      this.open = true;
      this.userId = userId;
      getFullUser(this.userId).then(response => {
        this.info = response.data;
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: -15px;
  display: flex;
  flex-wrap: wrap
}
</style>
