<template>
  <div class="main">
    <!-- <div class="export-button pl-10">
      <el-button v-has="99102" type="primary" @click="onClick_add">
        创建账号
      </el-button>
    </div> -->
    <el-table border   :data="tableData" style="width: 80%;font-size: 20px;overflow: hidden;border-radius: 4px;margin: 20px 0 0 50px;">
    <el-table-column prop="id" label="ID" width="180" align="center" />
    <el-table-column prop="username" label="用户名" width="180"   align="center"/>
    <el-table-column prop="full_name" label="全名" width="300"  align="center"/>
    <el-table-column prop="email" label="邮箱" width="400"  align="center"/>
        <el-table-column fixed="right" label="操作"  align="center">
      <template #default="scope">
        <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <el-pagination
      v-if="total > 0"
      :page-sizes="[10, 20, 30, 40, 100]"
      :page-size="page.pageSize"
       :total="total"
      layout="total, prev, pager, next, jumper"></el-pagination>
  </div>
    <el-dialog v-model="dialogFormVisible" title="编辑账号" width="500">
    <el-form :model="form">
      <el-form-item label="用户名" >
        <el-input v-model="form.username" disabled />
      </el-form-item>
      <el-form-item label="角色" >
        <el-select v-model="form.role_ids" placeholder="Please select a zone">
          <el-option v-for="item in rolesData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitChange">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive,getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
let tableData = ref([])
let total = ref(0)
let dialogFormVisible = ref(false)
let rolesData = ref([])
let page = reactive({
  userName:'',
  pageNo: 1,
  pageSize: 10
})
let form = reactive({
  username: '',
  user_id:0,
  role_ids: '',
})
const init = () => {
  proxy.$http.get('/open-platform/user/users',{
        params: {
          ...page,
        }
      })
      .then((res) => {
        console.log(res,'11')
       if(res.records && res.records.length > 0) {
          res.records.forEach(item => {
            tableData.value.push(item)
          })
        } else {
          tableData.value = []
        }
        total.value = res.total

      })
}
init()
const getRolesList = () => {
  proxy.$http.get('/open-platform/user/roles')
    .then((res) => {
      if (res.records && res.records.length > 0) {
        rolesData.value = res.records
      } else {
        rolesData.value = []
      }
    })
}
getRolesList()
const handleEdit = (row) => {
  dialogFormVisible.value = true
  form.username = row.username
  form.user_id = row.id
  form.role_ids = row.role_ids ? row.role_ids[0] : ''
}
const submitChange = () => {
  form.role_ids = form.role_ids ? [form.role_ids] : []
  proxy.$http.post('/open-platform/user/users/roles', form)
    .then((res) => {
      if (res.code === 200) {
        proxy.$message.success('修改成功')
        dialogFormVisible.value = false
        tableData.value = []
        init()
      } else {
        proxy.$message.error(res.message || '修改失败')
      }
    })
}

</script>

<style lang="less" scoped>
:deep(.el-table th) {
  background-color: #eef6ff !important; /* 设置你想要的背景颜色 */
  color: #333; /* 设置表头文字颜色 */
  font-weight: bold; /* 设置表头文字加粗 */
}
.page {
  display: flex;
  justify-content: end;
  margin-top: 20px;
  padding-right: 10%;
}
</style>