<template>
  <el-dialog title="用户信息" :close-on-click-modal="false" :visible.sync="open" width="1200px" append-to-body>
    <el-descriptions :contentStyle="CS" :label-style="LS " class="margin-top" :column="3" size="medium" border>
      <el-descriptions-item label="编号">
        {{info.user.usercode}}
      </el-descriptions-item>
      <el-descriptions-item label="昵称">
        {{info.user.nickname}}
      </el-descriptions-item>
      <el-descriptions-item label="头像">
        <image-avatar :src="info.user.avatar" />
      </el-descriptions-item>
      <el-descriptions-item label="实名认证">
        <cai-dict-tag :options="userAuthStatusList" :value="info.userAuth.cardNumAuth" />
      </el-descriptions-item>
      <el-descriptions-item label="实名认证-信息"  :span="2">
        <span v-if="info.userAuth.cardNumAuth !== 2">-</span>
        <span v-if="info.userAuth.cardNumAuth === 2">
          身份证:{{info.userAuth.cardNumName}}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="手机认证">
        <cai-dict-tag :options="userAuthStatusList" :value="info.userAuth.phoneAuth" />
      </el-descriptions-item>
      <el-descriptions-item label="手机号" :span="2">
        {{info.user.mobile}}
      </el-descriptions-item>

      <el-descriptions-item label="单身认证">
        <cai-dict-tag :options="userAuthStatusList" :value="info.userAuth.singlePersonAuth" />
      </el-descriptions-item>
      <el-descriptions-item label="单身认证-信息"  :span="2">
        <!--        <image-preview :src="user.userAuth.url" height="45px" width="45px"  />-->
      </el-descriptions-item>

      <el-descriptions-item label="学历认证">
        <cai-dict-tag :options="userAuthStatusList" :value="info.userAuth.educationAuth" />
      </el-descriptions-item>
      <el-descriptions-item label="学历认证-信息"  :span="2">
        <span v-if="info.userAuth.educationAuth !== 2">-</span>
        <image-preview v-if="info.userAuth.educationAuth === 2" :src="info.userAuth.educationPic" height="45px" width="45px"  />
      </el-descriptions-item>

      <el-descriptions-item label="工作认证">
        <cai-dict-tag :options="userAuthStatusList" :value="info.userAuth.jobAuth" />
      </el-descriptions-item>
      <el-descriptions-item label="工作认证-信息"  :span="2">
        <span v-if="info.userAuth.jobAuth !== 2">-</span>
        <image-preview v-if="info.userAuth.jobAuth === 2" :src="info.userAuth.jobPic" height="45px" width="45px"  />
      </el-descriptions-item>

      <el-descriptions-item label="车辆认证">
        <cai-dict-tag :options="userAuthStatusList" :value="info.userAuth.carAuth" />
      </el-descriptions-item>
      <el-descriptions-item label="车辆认证-信息"  :span="2">
        <span v-if="info.userAuth.carAuth !== 2">-</span>
        <image-preview v-if="info.userAuth.carAuth === 2" :src="info.userAuth.carPic" height="45px" width="45px"  />
      </el-descriptions-item>

      <el-descriptions-item label="房子认证">
        <cai-dict-tag :options="userAuthStatusList" :value="info.userAuth.houseAuth" />
      </el-descriptions-item>
      <el-descriptions-item label="房子认证-信息"  :span="2">
        <span v-if="info.userAuth.houseAuth !== 2">-</span>
        <image-preview v-if="info.userAuth.houseAuth === 2" :src="info.userAuth.housePic" height="45px" width="45px"  />
      </el-descriptions-item>

      <el-descriptions-item label="婚况认证">
        <cai-dict-tag :options="userAuthStatusList" :value="info.userAuth.marriageAuth" />
      </el-descriptions-item>
      <el-descriptions-item label="婚况认证-信息"  :span="2">
        <span v-if="info.userAuth.marriageAuth !== 2">-</span>
        <image-preview v-if="info.userAuth.marriageAuth === 2" :src="info.userAuth.marriagePic" height="45px" width="45px"  />
      </el-descriptions-item>

    </el-descriptions>
  </el-dialog>
</template>

<script>
import { userAuthStatusList } from '@/constant/statusMap'
import { getUserAuth } from '@/api/xq/userAuth'

export default {
  name: "UserInfo",
  data() {
    return {
      userAuthStatusList,
      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:{},
    };
  },
  created() {

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