<template>
  <div class="addUser-page BaseApp-page">
    <header class="BaseApp-page-header">
      <div class="addUser-header-title">{{ oprTypeName }}</div>
    </header>
    <main class="BaseApp-page-main">
      <div class="addUser-form">
        <template v-if="oprType != 'changePassword'">
          <div class="addUser-form-item">
            <div class="addUser-form-item__label">角色</div>
            <div class="addUser-form-item__value">
              <vxe-select disabledComponents v-model="formData.role_id" class="BaseApp-select">
                <vxe-option
                  v-for="item in roleList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"></vxe-option>
              </vxe-select>
            </div>
          </div>
          <div class="addUser-form-item">
            <div class="addUser-form-item__label">用户名</div>
            <div class="addUser-form-item__value">
              <CommonInput v-model="formData.user_name" size="medium"></CommonInput>
            </div>
          </div>
          <div class="addUser-form-item">
            <div class="addUser-form-item__label">姓名</div>
            <div class="addUser-form-item__value">
              <CommonInput v-model="formData.real_name" size="medium"></CommonInput>
            </div>
          </div>
        </template>

        <div class="addUser-form-item">
          <div class="addUser-form-item__label">密码</div>
          <div class="addUser-form-item__value">
            <CommonInput v-model="formData.user_pwd" :isPassword="true" size="medium"></CommonInput>
          </div>
        </div>
        <div v-if="oprType != 'changePassword'" class="addUser-form-item">
          <div class="addUser-form-item__label">性别</div>
          <van-radio-group class="addUser-form-item__value" v-model="formData.user_sex" shape="dot">
            <van-radio name="1" style="margin: 0 60px 0 10px">男</van-radio>
            <van-radio name="0">女</van-radio>
          </van-radio-group>
        </div>
        <div class="addUser-form-item">
          <div class="addUser-form-item__label">确认密码</div>
          <div class="addUser-form-item__value">
            <CommonInput
              v-model="formData.user_pwd2"
              :isPassword="true"
              size="medium"></CommonInput>
          </div>
        </div>
      </div>
    </main>
    <footer class="BaseApp-page-footer">
      <div class="BaseApp-btn" @click="goBack">返回</div>
      <div class="btn-group">
        <template v-if="oprType == 'edit'">
          <div class="BaseApp-btn BaseApp-btn--blue" @click="resetPwd">重置密码</div>
          <div class="BaseApp-btn BaseApp-btn--primary" @click="delUser">删除</div>
        </template>
        <div class="BaseApp-btn BaseApp-btn--primary" @click="submit">保存</div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount, onMounted, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { notify } from '../../utils/message.js';
import { addUserApi, editUserApi, deleteUserApi } from '../../api/user.js';
import { showConfirmDialog } from 'vant';
import { AddUserModel } from '../..//model/AddUserModel.ts';
import { UserModel } from '../..//model/UserModel.ts';

const route = useRoute();
const router = useRouter();
let formData = reactive<UserModel>({
  role_id: '35efee88-f4bc-11ee-9341-8cc84ba8982e',
  real_name: '',
  user_id: '',
  user_name: '',
  user_sex: '1',
  user_pwd: '',
  user_pwd2: ''
});
let roleList = reactive([
  { value: '35efee88-f4bc-11ee-9341-8cc84ba8982e', label: '管理员' },
  { value: '34efee88-f4bc-11ee-9341-8cc84ba8982e', label: '普通用户' }
]);
let oprType = ref('add');
let oprTypeName = ref('添加用户');
/**
 * 加载数据
 */
const loadData = async () => {};

/**
 * 重置密码
 */
const resetPwd = async () => {
  showConfirmDialog({
    title: '提示',
    message: `您确定要重置密码吗？密码将被重置为'000000'！`,
    className: 'BaseApp-MessageBox-Confirm'
  })
    .then(async () => {
      let data: AddUserModel = {
        user_id: formData.user_id,
        username: formData.user_name,
        role_id: formData.role_id,
        name: formData.real_name,
        password: '000000',
        sex: formData.user_sex
      };

      const res = await editUserApi(formData.user_id, data);
      if (res.data.code != 200) {
        notify(res.data.desc);
        return;
      }
      notify('重置密码成功', 'success');
      goBack();
    })
    .catch(() => {});
};

/**
 * 删除用户
 */
const delUser = () => {
  showConfirmDialog({
    title: '提示',
    message: `确定删除用户：[${formData.user_name}]吗？`,
    className: 'BaseApp-MessageBox-Confirm'
  })
    .then(async () => {
      const res = await deleteUserApi(formData.user_id);
      let { code, desc } = res.data;
      if (code != 200) {
        notify(desc);
        return;
      }
      notify(desc, 'success ');
      goBack();
    })
    .catch(() => {
      
    });
};

/**
 * 提交
 */
const submit = async () => {
  if (oprType.value == 'add') {
    submitAddUser();
  } else if (oprType.value == 'edit') {
    submitEditUser();
  } else if (oprType.value == 'changePassword') {
    submitChangePassword();
  }
};

/**
 * 提交修改用户
 */
const submitEditUser = async () => {
  if (formData.real_name == '') {
    notify('请输入姓名');
    return;
  }
  if (formData.user_name == '') {
    notify('请输入用户名');
    return;
  }
  if (formData.user_pwd == '') {
    notify('请输入密码');
    return;
  }
  if (formData.user_pwd != formData.user_pwd2) {
    notify('两次密码输入不一致');
    return;
  }

  let data: AddUserModel = {
    user_id: formData.user_id,
    username: formData.user_name,
    role_id: formData.role_id,
    name: formData.real_name,
    password: formData.user_pwd,
    sex: formData.user_sex
  };

  const res = await editUserApi(formData.user_id, data);
  if (res.data.code != 200) {
    notify(res.data.desc);
    return;
  }
  notify(res.data.desc, 'success');
  router.go(-1);
};

/**
 * 提交添加用户
 */
const submitAddUser = async () => {
  if (formData.real_name == '') {
    notify('请输入姓名');
    return;
  }
  if (formData.user_name == '') {
    notify('请输入用户名');
    return;
  }
  if (formData.user_pwd == '') {
    notify('请输入密码');
    return;
  }
  if (formData.user_pwd != formData.user_pwd2) {
    notify('两次密码输入不一致');
    return;
  }

  let data: AddUserModel = {
    user_id: formData.user_id,
    username: formData.user_name,
    role_id: formData.role_id,
    name: formData.real_name,
    password: formData.user_pwd,
    sex: formData.user_sex
  };

  const res = await addUserApi(data);
  if (res.data.code != 200) {
    notify(res.data.desc);
    return;
  }
  notify(res.data.desc, 'success');
  router.go(-1);
};

/**
 * 提交修改密码
 */
const submitChangePassword = async () => {
  if (formData.user_pwd != formData.user_pwd2) {
    notify('两次密码输入不一致');
    return;
  }
  const res = await editUserApi(formData.user_id, formData);
  if (res.data.code != 200) {
    notify(res.data.desc);
    return;
  }
  notify(res.data.desc, 'success');
  router.go(-1);
};

const goBack = () => {
  router.go(-1);
};

onMounted(() => {
  oprType.value = route.query.oprType;
  if (route.query.oprType == 'edit') {
    oprTypeName.value = '编辑用户';
    formData = Object.assign({}, formData, route.query, { user_pwd: '', user_pwd2: '' });
  } else if (route.query.oprType == 'changePassword') {
    oprTypeName.value = '修改密码';
  }
});
</script>

<style lang="less" scoped>
.addUser-page {
  font-size: 20px;
  color: #666666;
  .BaseApp-page-header {
    margin: 40px 0 0 40px;
    .addUser-header-title {
      font-weight: bold;
      font-size: 28px;
      color: #3a3a3a;
    }
  }
  .addUser-form {
    background: #f6f6f6;
    box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #cccccc;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px 15px 50px;
    .addUser-form-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 50%;
      margin-top: 35px;
      &:nth-child(2n) {
        justify-content: flex-end;
      }
      .addUser-form-item__value {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
}
</style>
