<!-- vue 页面模板 -->
<template>
  <div class="system">
    <Space wrap style="margin-bottom: 1em">
      <Button @click="add_user" type="primary" icon="ios-search"> 新增 </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 #adminRoles="{ row }">
        {{ roles_text(row) }}
      </template>
      <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.sex">
            <Option value="男">男</Option>
            <Option value="女">女</Option>
          </Select>
        </FormItem>
        <FormItem label="角色">
          <Select
            v-model="user.adminRoles"
            multiple
            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>
import api from '../../api/index.js';
export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      searchText: '',
      list: [],
      rules: [],
      total: 0,
      user: {},
      isLoad: false,
      show_user_edit: false,
      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',
          },
        ],
      },
      columns: [
        {
          title: '名字',
          key: 'name',
          align: 'center',
        },
        {
          title: '手机号',
          key: 'phone',
          align: 'center',
        },
        {
          title: '性别',
          key: 'sex',
          align: 'center',
        },
        {
          title: '类别',
          key: 'category',
          align: 'center',
        },
        {
          title: '角色',
          slot: 'adminRoles',
          align: 'center',
        },
        {
          title: '操作',
          slot: 'tool',
          align: 'center',
        },
      ],
    };
  },
  mounted() {
    this.get_data();
    this.get_role_data();
  },
  methods: {
    get_data() {
      api
        .user_info_api({
          page: this.page,
          pageSize: this.pageSize,
          name: this.searchText,
        })
        .then(r => {
          console.log(r.records);
          this.list = r.records || [];
          this.total = r.total;
        });
    },
    change(page) {
      this.page = page;
      this.get_data();
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize;
      this.get_data();
    },
    roles_text(val) {
      if (!val || !val.adminRoles) return '';
      const l = val.adminRoles.map(v => (v ? v.name : '')).join(',');
      return l;
    },
    del_user(r) {
      api.user_del_api(r.userId).then(r => {
        console.log(r);
        this.get_data();
      });
    },
    add_user(row) {
      const user = JSON.parse(JSON.stringify(row || {}));
      user.adminRoles = (user.adminRoles || []).map(v => v.roleId);
      this.user = user;
      this.show_user_edit = true;
    },
    save_user() {
      this.$refs.formInline.validate(valid => {
        if (!valid) return;
        if (this.user.adminRoles) {
          this.user.adminRoles = this.user.adminRoles.map(v => {
            return {
              roleId: v,
            };
          });
        }
        this.user.category = '管理员';
        this.user.password = this.user.newpassword || '';
        console.log(this.user);
        if (this.user.userId)
          api.user_edit_api(this.user).then(r => {
            this.show_user_edit = false;
            this.get_data();
          });
        else
          api.user_add_api(this.user).then(r => {
            this.show_user_edit = false;
            this.get_data();
          });
      });
    },
    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">
.system {
  width: 100%;
}
</style>
