<template>
  <CusDialog
      title="个人信息"
      :show="show"
      @close="$emit('update:show', false)"
      @submit="onSubmit"
      width="700px"
      height="500px"
      :loading="loading"
  >
    <div class="info-main">
      <CusForm class="form" labelWidth="140px" ref="ref_form">
        <div class="left">
          <CusFormColumn
              :disabled="true"
              :span="24"
              required
              label="警号:"
              v-model:param="userInfo.alarm"/>
          <CusFormColumn
              :disabled="true"
              :span="24"
              link="select"
              label="状态:"
              v-model:param="userInfo.status"
              :options="$store.state.dictionary.sysUserStatusList"/>
          <CusFormColumn
              :span="24"
              required
              label="姓名:"
              v-model:param="userInfo.nickName"/>
          <CusFormColumn
              :span="24"
              required
              link="select"
              label="性别:"
              v-model:param="userInfo.sex"
              :options="$store.state.dictionary.sysUserSexList"/>
          <CusFormColumn
              :span="24"
              required
              label="手机号:"
              v-model:param="userInfo.phonenumber"
              :rules="[{
                handle: (val) => $store.state.regex.phoneCN.test(val),
                message: '手机号格式错误'
              }]"
          />
          <CusFormColumn
              :span="24"
              required
              label="电子邮件:"
              v-model:param="userInfo.email"
              :rules="[{
                handle: (val) => $store.state.regex.email.test(val),
                message: '电子邮件格式错误'
              }]"
          />
          <CusFormColumn
              :disabled="true"
              :span="24"
              label="所在单位:"
              v-model:param="userInfo.deptName"/>
        </div>
        <div class="right">
          <CusFormColumn
              labelWidth="60px"
              :span="24"
              link="upload"
              layout="card"
              v-model:param="avatar"
              :limit="1"
              type="img"
              nameKey="fName"
              urlKey="fUrl"
              :delRule="(file) => true"
              limitNoUpload
          />
        </div>
      </CusForm>
    </div>
  </CusDialog>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick, onActivated
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus';
import {toLogin} from "@/utils/permissions";
import {systemUserProfile} from "@/api/modules/global/global";

export default defineComponent({
  name: '',
  components: {},
  props: {
    show: {}
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      userInfo: <any>{},
      avatar: <Array<any>>[],
      loading: false,
    })
    const ref_form = ref()
    watch(() => props.show, () => {
      state.loading = false
      state.avatar = []
      state.userInfo = JSON.parse(JSON.stringify(store.state.app.userInfo)) || {}
      if (state.userInfo.avatar) {
        state.avatar = [{
          fUrl: state.userInfo.avatar,
          fName: state.userInfo.avatar,
        }]
      }
      nextTick(() => {
        ref_form.value.reset()
      })
    })
    const initDictionary = () => {
      store.dispatch("dictionary/LOAD_DICT_LIST", "sys_user_status");
      store.dispatch("dictionary/LOAD_DICT_LIST", "sys_user_sex");
    }
    const onSubmit = () => {
      ref_form.value.submit().then(() => {
        ElMessageBox.confirm("是否提交?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          state.loading = true
          state.userInfo.avatar = state.avatar?.[0]?.fUrl || ''
          that.$api.systemUserProfile(state.userInfo).then(res => {
            if (res.code === 200) {
              store.dispatch('app/LOAD_USER_INFO', true)
              ElMessage.success(res.msg)
              emit('update:show', false)
            } else {
              ElMessage.error(res.msg)
            }
            state.loading = false
          }).catch(() => {
            state.loading = false
          })
        }).catch(() => {})
      }).catch((e) => {
        ElMessage({
          message: e[0].message,
          grouping: true,
          type: 'warning',
        })
      })
    }
    onMounted(() => {
      initDictionary()
    })
    return {
      ...toRefs(state),
      onSubmit,
      ref_form
    }
  },
})
</script>

<style scoped lang="scss">
.info-main {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  .form {
    width: 100%;
    height: 100%;
    :deep(.el-form) {
      width: 100%;
      height: 100%;
      .el-row {
        width: 100%;
        height: 100%;
        .left {
          width: 60%;
        }
        .right {
          width: 40%;
          padding-top: 100px;
        }
      }
    }
  }
}
</style>
