<template>
  <div class="main-wrapper">

    <div class="row">
      <div class="col">
        <div class="card">
        <DataTable title="用户管理" :headers="tableHeaders" :rows="tableData" :data-count="dataCount"
          @pageChanged="pageChangedHandle" @dataDelete="deleteHandle" @dataModify="modifyHandle" @dataAdd="addHandle" 
          />
          <card-loading v-if="!isLoaded"/>
          </div>
        <user-form-modal title="修改用户" ref="userModal" />
        <user-form-modal title="添加用户" formType="add" ref="addUserModal" />
      </div>
    </div>
  </div>
</template>

<script>
import DataTable from '@/components/DataTable.vue';
import UserFormModal from '../../components/UserFormModal.vue';
import CardLoading from '../../components/CardLoading.vue';

export default {
  components: {
    DataTable,
    UserFormModal,
    CardLoading
  },
  data() {
    return {
      dataCount: 0,
      isLoaded: false,
      tableHeaders: [
        { text: "编号", value: "id", width: "155px" },
        { text: "用户名", value: "userName", width: "214px" },
        { text: "邮箱", value: "email", width: "48px" },
        { text: "余额", value: "balance", width: "29px", type: "money" },
        { text: "状态", value: "isBan", width: "82px", type: "bool" },
        { text: "角色", value: "roles", width: "103px", type: "arrObj", child: "role" },
        { text: "创建时间", value: "created", width: "103px", type: "datetime" }
      ],
      tableData: [],
    };
  },
  methods: {
    async loadUserList(pageIndex = 1, pageSize = 10, desc = false) {
      this.isLoaded = false
      try {
        const res = await this.$api.getUserList(pageIndex, pageSize, desc)
        if (res.code == '1000') {
          this.tableData = res.data
        }
      } catch (e) {
        this.$alert('用户列表数据加载失败!', 'danger')
        console.error(e)
      }finally{
        this.isLoaded = true
      }
    },
    async pageChangedHandle(newval) {
      await this.loadUserList(newval.pageIndex, newval.pageSize, false)
    },
    async deleteHandle(id) {
      const confirmRes = await this.$confirm('删除', '是否删除用户？')
      if (!confirmRes) return;
      try {
        const res = await this.$api.deleteUser(id)
        if (res.code != 1000) {
          this.$alert(res.message, 'danger')
          return;
        }
        this.$alert('删除成功', 'success')

      } catch (e) {
        this.$alert(e, 'danger')
      }
    },
    async modifyHandle(id) {
      try {
        //加载用户信息到新窗口
        const userinfoRes = await this.$api.getUserInfoById(id)
        if(userinfoRes.code != 1000){
          this.$alert(userinfoRes.message,'danger')
          return
        }
        //拉起修改弹窗
        const res = await this.$refs.userModal.open(id,userinfoRes.data)
        //弹窗返回为null表示用户关闭了窗口，不执行操作
        if(res == null) return
        const modifyRes = await this.$api.updateUserInfo(id,res)
        if(modifyRes.code != 1000){
          this.$alert(modifyRes.message, 'danger')
          return
        }
        this.$alert('修改成功', 'success')

      } catch (e) {
        this.$alert(e, 'danger')
      }
    },
    async addHandle(){
       //拉起添加弹窗
        const res = await this.$refs.addUserModal.open()
        if(res == null) return
        try{
        const modifyRes = await this.$api.addUser(res)
        
        if(modifyRes.code != 1000){
          this.$alert(modifyRes.message, 'danger')
          return
        }
        this.$alert('添加成功', 'success')

      }catch (e) {
        this.$alert(e, 'danger')
      }
    }
  },
  async mounted() {
    await this.loadUserList()
    this.dataCount = (await this.$api.getUserCount()).data
    
  }
};
</script>
