<!-- vue 页面模板 -->
<template>
  <div class="user">
    <Space wrap style="margin-bottom: 1em">
      <Button type="primary" icon="ios-search" @click="show_edit">
        新增
      </Button>
      <Input
        v-model="searchText"
        placeholder="请输入搜索内容"
        icon="ios-search"
        @on-click="() => change(1)"
        @on-enter="() => change(1)"
      >
      </Input>
    </Space>
    <Table highlight-row ref="currentRowTable" :columns="columns" :data="list">
      <template #tool="{ row }">
        <Space wrap>
          <Poptip
            transfer
            confirm
            width="90"
            title="删除该用户?"
            @on-ok="() => del_user(row)"
          >
            <Button size="small" type="error"> 删 除 </Button>
          </Poptip>
          <Button size="small" type="primary" @click="() => add_user(row)">
            修 改
          </Button>
        </Space>
      </template>
    </Table>
    <br />
    <Page
      :total="total"
      show-sizer
      v-model="page"
      @on-change="change"
      @on-page-size-change="sizeChange"
    />

    <Drawer title="用户详情" placement="right" v-model="show_user_edit">
      <Form
        ref="formInline"
        :model="user"
        :rules="ruleInline"
        :label-width="80"
      >
        <FormItem label="用户名">
          <Input v-model="user.name" placeholder="请输入用户名"></Input>
        </FormItem>
        <FormItem label="角色">
          <Select
            v-model="user.adminRoles"
            filterable
            :remote-method="get_role_data"
            :loading="isLoad"
          >
            <Option
              v-for="(option, index) in rules"
              :value="option.roleId"
              :key="index"
              >.
              {{ option.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="user.phone" placeholder="请输入手机号"></Input>
        </FormItem>
        <FormItem label="密码">
          <Input
            v-model="user.newpassword"
            type="password"
            placeholder="请输入密码"
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="save_user">保 存</Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>

<script setup>
import api from '../../api/index.js';
import { ref, onMounted } from 'vue';

const searchText = ref('');
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const list = ref([]);
const user = ref({});
const rules = ref([]);
const show_user_edit = ref(false);
const isLoad = ref(false);

const columns = [
  {
    title: '名字',
    key: 'name',
    align: 'center',
  },
  {
    title: '手机号',
    key: 'phone',
    align: 'center',
  },
  {
    title: '级别',
    key: 'level',
    align: 'center',
  },
  {
    title: '操作',
    slot: 'tool',
    align: 'center',
  },
];
const ruleInline = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'blur',
    },
  ],
  adminRoles: [
    {
      required: true,
      message: '请选择角色',
      trigger: 'blur',
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
  ],
};

onMounted(() => {});
get_list();

function change(page) {
  page.value = page;
  get_list();
}

function add_user() {}

function sizeChange(pageSize) {
  pageSize.value = pageSize;
  get_list();
}

function get_list() {
  api
    .custom_list_api({
      page: page.value,
      pageSize: pageSize.value,
      name: searchText.value,
    })
    .then(r => {
      console.log(r.records);
      list.value = r.records || [];
      total.value = r.total || 0;
    });
}

function show_edit(row) {
  show_user_edit.value = true;
  user.value = row || {};
}

function save_user() {
  this.$refs.formInline.validate(valid => {
    if (!valid) return;
    this.user.password = this.user.newpassword || '';
    console.log(this.user);
  });
}

function get_role_data(query) {
  this.isLoad = true;
  api
    .user_role_api({
      page: 1,
      pageSize: 100000,
      name: query,
    })
    .then(r => {
      this.isLoad = false;
      this.rules = r.records || [];
    })
    .catch(err => {
      this.isLoad = false;
    });
}
</script>

<style lang="scss"></style>
