<template>
  <anji-crud ref="listPage"
             :option="crudOption">
    <template v-slot:buttonLeftOnTable>
    </template>

    <template slot="rowButton"
              slot-scope="props">
      <el-button type="text"
                 @click="handleOpenDialogSetRoleForUser(props)">授予角色</el-button>
    </template>
    <!--自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片-->
    <template v-slot:pageSection>
      <UserRole :login-name="loginName"
                :visib="dialogVisibleSetRoleForUser"
                @handleClose="dialogVisibleSetRoleForUser = false" />
    </template>
  </anji-crud>
</template>
<script>
import { accessUserList, accessUserAdd, accessUserDeleteBatch, accessUserUpdate, accessUserDetail } from '@/api/accessUser'
import UserRole from '@/views/accessUser/components/UserRole'
export default {
  name: 'AccessUser',
  components: {
    UserRole: UserRole,
  },
  data () {
    return {
      // 选中一个用户时，点授予角色时，弹出对话框
      dialogVisibleSetRoleForUser: false,
      loginName: '',

      // 页面渲染使用
      crudOption: {
        // 使用菜单做为页面标题
        title: '用户管理',
        // 详情页中输入框左边文字宽度
        labelWidth: '120px',
        // 查询表单条件
        queryFormFields: [
          {
            inputType: 'anji-select', //form表单类型 input|input-number|anji-select(传递url或者dictCode)|anji-tree(左侧树)|date|datetime|datetimerange
            anjiSelectOption: {
              dictCode: 'ENABLE_FLAG',
            },
            label: '启用状态',
            field: 'enableFlag'
          },
          {
            inputType: 'input',
            label: '登录名',
            field: 'loginName'
          },
          {
            inputType: 'input',
            label: '真实姓名',
            field: 'realName'
          },
          {
            inputType: 'input',
            label: '手机号',
            field: 'phone'
          },
        ],
        // 操作按钮
        buttons: {
          query: {
            api: accessUserList,
            permission: 'AccessUser:PAGE'
          },
          queryByPrimarykey: {
            api: accessUserDetail,
            permission: 'AccessUser:detail'
          },
          add: {
            api: accessUserAdd,
            permission: 'AccessUser:insert'
          },
          delete: {
            api: accessUserDeleteBatch,
            permission: 'AccessUser:delete'
          },
          edit: {
            api: accessUserUpdate,
            permission: 'AccessUser:update'
          },
        },
        // 表格列
        columns: [
          {
            label: '',
            field: 'id',
            primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的
            tableHide: true, // 表格中不显示
            editHide: true, // 编辑弹框中不显示
          },
          {
            label: '登录名',
            placeholder: '',
            field: 'loginName',
            tableHide: true, // 表格中不显示
            editField: 'loginName',
            inputType: 'input',
            rules: [
              { required: true, message: '登录名必填', trigger: 'blur' },
              { min: 1, max: 64, message: '不超过64个字符', trigger: 'blur' }
            ],
            disabled: false,
          },
          {
            label: '真实姓名',
            placeholder: '',
            field: 'realName',
            fieldTableRowRenderer: (row) => {
              return `${row['realName']}[${row['loginName']}]`
            },

            editField: 'realName',
            inputType: 'input',
            rules: [
              { required: true, message: '真实姓名必填', trigger: 'blur' },
              { min: 1, max: 64, message: '不超过64个字符', trigger: 'blur' }
            ],
            disabled: false,
          },
          {
            label: '密码',
            placeholder: '',
            field: 'password',
            tableHide: true, // 表格中不显示
            editField: 'password',
            inputType: 'input',
            rules: [
              { required: true, message: '密码必填', trigger: 'blur' },
              { min: 1, max: 128, message: '不超过128个字符', trigger: 'blur' }
            ],
            disabled: false,
          },
          {
            label: '手机号码',
            placeholder: '',
            field: 'phone',
            editField: 'phone',
            inputType: 'input',
            rules: [
              { min: 1, max: 16, message: '不超过16个字符', trigger: 'blur' }
            ],
            disabled: false,
          },
          {
            label: '用户邮箱',
            placeholder: '',
            field: 'email',
            editField: 'email',
            inputType: 'input',
            rules: [
              { min: 1, max: 64, message: '不超过64个字符', trigger: 'blur' }
            ],
            disabled: false,
          },
          {
            label: '备注',
            placeholder: '',
            field: 'remark',
            editField: 'remark',
            inputType: 'input',
            rules: [
              { min: 1, max: 512, message: '不超过512个字符', trigger: 'blur' }
            ],
            disabled: false,
          },
          {
            label: '启用状态',//0--已禁用 1--已启用  DIC_NAME=ENABLE_FLAG
            placeholder: '',
            field: 'enableFlag',
            fieldTableRowRenderer: (row) => {
              return this.getDictLabelByCode('ENABLE_FLAG', row['enableFlag'])
            },
            editField: 'enableFlag',
            inputType: 'anji-select',
            anjiSelectOption: {
              dictCode: 'ENABLE_FLAG', //指定数据字典
            },
            colorStyle: {
              0: 'table-danger', //key为editField渲染的值（字典的提交值）'红色': 'danger','蓝色': 'primary','绿色': 'success','黄色': 'warning','灰色': 'info','白色'：''
              1: 'table-success'
            },
            rules: [
              { required: true, message: '启用状态必填', trigger: 'blur' },
            ],
            disabled: false,
          },
          {
            label: '最后一次登陆时间',
            placeholder: '',
            field: 'lastLoginTime',
            editField: 'lastLoginTime',
            inputType: 'input',
            rules: [
            ],
            disabled: true,
          },
          {
            label: '最后一次登录IP',
            placeholder: '',
            field: 'lastLoginIp',
            editField: 'lastLoginIp',
            inputType: 'input',
            rules: [
              { min: 1, max: 16, message: '不超过16个字符', trigger: 'blur' }
            ],
            disabled: true,
          },
          {
            label: '创建人',
            placeholder: '',
            field: 'createBy',
            columnType: 'expand',
            editField: 'createBy',
            inputType: 'input',
            editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
            disabled: true,
          },
          {
            label: '创建时间',
            placeholder: '',
            field: 'createTime',
            columnType: 'expand',
            editField: 'createTime',
            inputType: 'input',
            editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
            disabled: true,
          },
          {
            label: '修改人',
            placeholder: '',
            field: 'updateBy',
            columnType: 'expand',
            editField: 'updateBy',
            inputType: 'input',
            editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
            disabled: true,
          },
          {
            label: '修改时间',
            placeholder: '',
            field: 'updateTime',
            columnType: 'expand',
            editField: 'updateTime',
            inputType: 'input',
            editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
            disabled: true,
          },
        ],
      },
    }
  },

  created () { },
  methods: {
    handleOpenDialogSetRoleForUser (props) {
      this.loginName = props.msg.loginName
      this.dialogVisibleSetRoleForUser = true
    },
  }
}
</script>

