<template>
  <a-modal wrapClassName="dc-gc-modal" class="dc-personal-info-modal" :visible="modalVisible" :width="600" :maskClosable="false" cancelText="取消" okText="确认" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      <div class="dc-info-head">
        <div class="dc-user-head">
          <img class="dc-head-img" :src="personalInfo.headImg" />
        </div>
        <div class="dc-user-name-code">
          <div class="dc-user-name">{{ personalInfo.userName || "暂无" }}</div>
          <div class="dc-user-code">{{ personalInfo.userCode || "暂无" }}</div>
          <div class="dc-extended" v-if="personalHeaderExtendedInfo">{{ personalHeaderExtendedInfo }}</div>
        </div>
      </div>
    </template>
    <!--内容-->
    <div class="dc-info-body">
      <div class="dc-info-row">
        <div class="dc-info-item">
          <div class="dc-item-label">主职部门</div>
          <div class="dc-item-text">{{ personalInfo.deptName || "暂无" }}</div>
        </div>
        <div class="dc-info-item">
          <div class="dc-item-label">主职岗位</div>
          <div class="dc-item-text">{{ personalInfo.postName || "暂无" }}</div>
        </div>
        <a-divider class="dc-divider" />
      </div>
      <div class="dc-info-row">
        <div class="dc-info-item">
          <div class="dc-item-label">性别</div>
          <div class="dc-item-text">{{ personalInfo.sex ? (personalInfo.sex === "1" ? "男" : "女") : "待补充" }}</div>
        </div>
        <div class="dc-info-item">
          <div class="dc-item-label">生日</div>
          <div class="dc-item-text">{{ personalInfo.birthday || "暂无" }}</div>
        </div>
        <a-divider class="dc-divider" />
      </div>
      <div class="dc-info-row">
        <div class="dc-info-item">
          <div class="dc-item-label">证件类型</div>
          <div class="dc-item-text">身份证</div>
        </div>
        <div class="dc-info-item">
          <div class="dc-item-label">证件号码</div>
          <div class="dc-item-text">{{ personalInfo.idnum || "暂无" }}</div>
        </div>
        <a-divider class="dc-divider" />
      </div>
      <div class="dc-info-row">
        <div class="dc-info-item">
          <div class="dc-item-label">电子邮件</div>
          <div class="dc-item-text">{{ personalInfo.email || "暂无" }}</div>
        </div>
        <div class="dc-info-item">
          <div class="dc-item-label">手机号码</div>
          <div class="dc-item-input-box">
            <div class="dc-item-text" v-if="!isPhoneEdit">{{ personalInfo.phone ? personalInfo.phone : "暂无" }}</div>
            <div class="dc-item-input" v-if="isPhoneEdit">
              <a-input v-model:value="cachePhone" size="small" />
            </div>
            <div class="dc-item-input-opts-box">
              <div class="dc-item-input-opts" v-if="!isPhoneEdit" @click="handleEditTel">
                <div class="dc-opt"><edit-outlined /></div>
                <div class="dc-opt">修改</div>
              </div>
              <div class="dc-item-input-opts" v-else>
                <div class="dc-opt" @click="handleSaveTel">保存</div>
                <a-divider class="dc-ops-divider" type="vertical" />
                <div class="dc-opt dc-cancel-opt" @click="handleEditCancel">取消</div>
              </div>
            </div>
          </div>
        </div>
        <div></div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { message } from "ant-design-vue";
import { RestApi } from "../../model/domain/RestApi";
import sysUserInfoApi from "../../constants/api/sys-user-info.api";
import { apiService } from "../../services/api.service";
import { Code } from "../../constants/enum/code.enum";
import { RestfulResponse } from "../../model/domain/RestfulResponse";
import { userStore } from "../../stores/user.store";
import { HEAD_SVG_XML } from "../../constants/encode-assets/svg";
import { SysUserInfo } from "../../model/entity/SysUserInfo";
import { PersonalInfo } from "../../model/domain/PersonalInfo";
import { Prop } from "vue-property-decorator";

interface Props {
  visible: boolean; // 模态框展开标识
  personalHeaderExtendedInfo: string; // 个人信息头部扩展信息
}

@Options({
  name: "PersonalInfoModal",
})
export default class PersonalInfoModal extends Vue {
  @Prop({ default: false }) readonly visible!: boolean; // 模态框展开标识
  @Prop({ default: "" }) readonly personalHeaderExtendedInfo!: string; // 个人信息头部扩展信息

  cachePhone = "";
  isPhoneEdit = false; // 手机号编辑模式
  personalInfo: PersonalInfo = new PersonalInfo({
    headImg: HEAD_SVG_XML,
  });

  // 内部显示标识
  get modalVisible() {
    return this.visible;
  }

  set modalVisible(newValue: boolean) {
    this.$emit("update:visible", newValue);
  }

  mounted(): void {
    this.init();
  }

  /**
   * @Description: 初始化用户信息
   * @author 陈敏杰
   * @date 2021/12/30
   * @time 15:10
   */
  init() {
    const user: SysUserInfo | undefined = userStore.user;
    if (user != null) {
      this.personalInfo = new PersonalInfo({
        userId: user.userId,
        deptName: user.sysDeptInfo?.deptName,
        postName: user.sysPostInfo?.postName || user?.postName,
        userName: user.userName,
        birthday: user.birthday,
        email: user.email,
        headImg: user.headImg || HEAD_SVG_XML,
        phone: user.phone,
        sex: user.sex,
        userCode: user.userCode,
        idnum: user.idnum,
      });
    }
  }

  /**
   * @description: 编辑手机号
   * @author ChenRui
   * @date 2022/2/13 0:43
   */
  handleEditTel(): void {
    this.cachePhone = this.personalInfo.phone;
    this.isPhoneEdit = true;
  }

  /**
   * @Description: 修改手机号码
   * @author 陈敏杰
   * @date 2021/12/30
   * @time 13:39
   */
  handleSaveTel(): void {
    const params = {
      userId: this.personalInfo.userId,
      phone: this.cachePhone,
    };
    const restApi: RestApi = new RestApi(sysUserInfoApi.updateOnlyUser);
    restApi.url = this.$dc.baseApi + sysUserInfoApi.updateOnlyUser.url;
    apiService.general(restApi, undefined, params).then((response: RestfulResponse) => {
      if (response.code === Code.SUCCESS.code) {
        this.personalInfo.phone = this.cachePhone;
        const user: SysUserInfo | undefined = userStore.user;
        if (user != null) {
          user.phone = this.cachePhone;
          userStore.user = user;
        }
        this.isPhoneEdit = false;
        message.success({ duration: 1, content: response.msg! });
      } else {
        message.error({ duration: 1, content: response.msg! });
      }
    });
  }

  /**
   * @description: 取消保存
   * @author ChenRui
   * @date 2022/2/13 0:35
   */
  handleEditCancel(): void {
    this.isPhoneEdit = false;
  }

  /**
   * @description: 处理数据
   * @author ChenRui
   * @date 2022/4/28 17:09
   */
  handleOk(): void {
    this.handleCancel();
  }

  /**
   * @Description: 取消
   * @author 陈敏杰
   * @date 2021/10/16
   * @time 17:40
   */
  handleCancel(): void {
    this.$emit("close", false);
    this.modalVisible = false;
  }
}
</script>

<style scoped lang="scss">
.dc-personal-info-modal {
  .dc-info-head {
    display: flex;
    align-items: center;
    height: 60px;
    .dc-user-head {
      .dc-head-img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-left: 15px;
        opacity: 0.6;
      }
    }
    .dc-user-name-code {
      margin-left: 18px;
      display: flex;
      flex-direction: column;
      .dc-user-name {
        font-size: 16px;
        font-weight: 700;
      }
      .dc-user-code {
        font-size: 14px;
        color: #999999;
      }
      .dc-extended {
        font-size: 14px;
      }
    }
  }
  .dc-info-body {
    display: flex;
    flex-direction: column;
    padding: 15px 0 0 0;
    .dc-info-row {
      display: flex;
      flex-direction: column;
      .dc-info-item {
        display: flex;
        flex-direction: row;
        .dc-item-label {
          width: 180px;
          padding-left: 15px;
          font-size: 14px;
          color: #999999;
          margin-bottom: 17px;
        }
        .dc-item-text {
          font-size: 14px;
          color: #333333;
        }
        .dc-item-input-box {
          display: flex;
          flex-direction: row;
          .dc-item-input {
            width: 120px;
            font-size: 12px;
          }
          .dc-item-input-opts-box {
            margin-left: 20px;
            .dc-item-input-opts {
              display: flex;
              flex-direction: row;
              .dc-opt {
                cursor: pointer;
                color: #4694f3;
                margin-right: 5px;
                &.dc-cancel-opt {
                  color: #999999;
                }
              }
              .dc-ops-divider {
                margin-top: 6px;
                margin-left: 0;
              }
            }
          }
        }
      }
      .dc-divider {
        margin: 5px 0 20px 0;
      }
    }
  }
}
.item-box {
  display: flex;
  align-items: center;
  height: 3rem;
}
.edit-color {
  color: #137cdd;
  cursor: pointer;
}
.cancel-color {
  color: #999999;
  cursor: pointer;
}
</style>
