<template>
  <el-dialog
    title="个人名片"
    :visible.sync="visibleShow"
    center
    width="50%"
    :close-on-click-modal="false"
  >
    <div class="user-info-card">
      <!-- 用户基本信息部分 -->
      <div class="card">
        <div class="title">基本信息</div>
        <el-divider></el-divider>
        <ul>
          <li>
            <span class="label">姓名：</span
            ><span class="value">{{ userCardInfo.realname || "----" }}</span>
          </li>
          <li>
            <span class="label">性别：</span
            ><span class="value">{{ userCardInfo.genderLabel || "----" }}</span>
          </li>
          <li>
            <span class="label">身份证号：</span
            ><span class="value">{{
              userCardInfo.idCardNumber || "----"
            }}</span>
          </li>
          <li>
            <span class="label">手机号：</span
            ><span class="value">{{ userCardInfo.username || "----" }}</span>
          </li>
          <li>
            <span class="label">年龄：</span
            ><span class="value">{{ userCardInfo.age || "----" }}</span>
          </li>
          <li>
            <span class="label">学历：</span
            ><span class="value">{{ userCardInfo.degreeLabel || "----" }}</span>
          </li>
        </ul>
      </div>
      <!-- 平台经历部分 -->
      <div class="card">
        <div class="title">平台经历</div>
        <el-divider></el-divider>
        <ul>
          <li>
            <span class="label">服务企业：</span
            ><span class="value">{{
              userCardInfo.serviceDeptName || "----"
            }}</span>
          </li>
          <li>
            <span class="label">服务时长：</span
            ><span class="value">{{
              userCardInfo.serviceDuration || "----"
            }}</span>
          </li>
          <li>
            <span class="label">完成任务量：</span
            ><span class="value">{{
              userCardInfo.finishTaskCount || "----"
            }}</span>
          </li>
          <li>
            <span class="label">通过任务量：</span
            ><span class="value">{{
              userCardInfo.approvedTaskCount || "----"
            }}</span>
          </li>
          <li>
            <span class="label">审核通过率：</span
            ><span class="value">{{
              userCardInfo.approvedTaskRate || "----"
            }}</span>
          </li>
        </ul>
      </div>
      <!-- 专业技能部分 -->
      <div class="card">
        <div class="title">专业技能</div>
        <el-divider></el-divider>
        <ul>
          <li>
            <span class="label">医药代表资质备案号：</span
            ><span class="value">{{
              userCardInfo.qualificationRecordNumber || "----"
            }}</span>
          </li>
          <li class="img">
            <span class="label">资质证书：</span>
            <div class="img-list" v-if="srcList">
              <el-image
                v-for="item in srcList"
                :key="item"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="item"
                :preview-src-list="srcList"
              />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["userCardInfo", "srcList", "userCardShow"],
  data() {
    return {
      visibleShow: this.userCardShow
    };
  },
  watch: {
    // 监听prop的变化，更新本地变量
    userCardShow(newVal) {
      this.visibleShow = newVal;
    },
    visibleShow(newVal) {
      if (newVal !== this.userCardShow) {
        this.$emit("update:userCardShow", newVal);
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit("update:userCardShow", false);
    }
  }
};
</script>

<style scoped>
.user-info-card .card {
  background: #fff; /* 背景色 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  padding: 20px; /* 内部填充 */
  margin-bottom: 20px; /* 与下一个卡片的间距 */
}

.user-info-card .card .title {
  font-size: 18px; /* 标题字体大小 */
  color: #333; /* 标题颜色 */
  margin-bottom: 10px; /* 标题与内容的间距 */
}

.user-info-card .card ul {
  list-style-type: none; /* 去除列表项前的圆点 */
  padding: 0; /* 去除内边距 */
  margin: 0; /* 去除外边距 */
}

.user-info-card .card ul li {
  padding: 5px 0; /* 列表项内边距 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
}

.user-info-card .card ul li .label {
  flex: 0 0 140px; /* 标签宽度，不可伸缩 */
  color: #666; /* 标签颜色 */
  font-weight: bold; /* 标签字体加粗 */
  text-align: right; /* 使文本两端对齐 */
}

.user-info-card .card ul li .value {
  margin-left: 10px;
  flex: 1; /* 值占据剩余空间 */
  color: #333; /* 值的颜色 */
}

.dialog-footer {
  text-align: right; /* 底部按钮右对齐 */
}
</style>
