const defaultProps = {
  label: 'label',
  children: 'children',
  value: 'id'
}

const majorProps = {
  label: 'avmatCategoriesName',
  children: 'children',
  value: 'avmatCategoriesId'
}

export const columns = (_this) => {
  return [
    {
      prop: 'nickName',
      label: '用户名称',
      align: 'center'
    },
    {
      prop: 'userName',
      label: '登录账号'
    },
    {
      prop: 'deptName',
      label: '所属部门'
    },
    {
      prop: 'majorName',
      label: '所属专业'
    },
    {
      prop: 'sex',
      label: '性别',
      width: '80px',
      render: (h, params) => {
        if (params.row.sex == 1) {
          return h('span', '男')
        } else {
          return h('span', '女')
        }
      }
    },
    {
      prop: 'phonenumber',
      label: '联系方式'
    },
    {
      prop: 'status',
      label: '状态',
      width: '80px',
      render: (h, params) => {
        if (params.row.status == 0) {
          return h('span', { class: 'success-state' }, '启用')
        } else {
          return h('span', { class: 'warning-state' }, '禁用')
        }
      }
    },
    {
      prop: 'remark',
      label: '备注'
    },
    {
      button: true,
      label: '操作',
      width: '300px',
      group: [
        {
          name: '编辑',
          type: 'text',
          round: false,
          plain: false,
          onClick: (row, index, scope) => {
            _this.compileBtn(row)
          }
        },
        {
          name: '启用',
          type: 'text',
          statusKey: 'status',
          unDisableKey: 1,
          round: false,
          plain: false,
          onClick: (row, index, scope) => {
            _this.toggle(row.userId, '启用')
          }
        },
        {
          name: '禁用',
          type: 'text',
          statusKey: 'status',
          unDisableKey: 0,
          round: false,
          plain: false,
          onClick: (row, index, scope) => {
            _this.toggle(row.userId, '禁用')
          }
        },
        {
          name: '删除',
          type: 'text',
          round: false,
          plain: false,
          onClick: (row, index, scope) => {
            _this.handRemove(row)
          }
        },
        {
          name: '角色分配',
          type: 'text',
          round: false,
          plain: false,
          onClick: (row, index, scope) => {
            _this.powerSetup(row)
          }
        }
      ]
    }
  ]
}

export const options = {
  stripe: false, // 斑马纹
  mutiSelect: true, // 多选框
  index: false, // 显示序号， 多选则 mutiSelect
  loading: false, // 表格动画
  border: true,
  initTable: true, // 是否一挂载就加载数据
  height: 'calc(100vh - 345px)'
}

export const modalConfig = (_this) => ({
  formItems: [
    { key: 'nickName', type: 'input', label: '用户名称', placeHolder: '请输入用户名称' },
    { key: 'userName', type: 'input', label: '登录账号', placeHolder: '请输入登录账号' },
    {
      key: 'deptId',
      keyLabel: 'deptName',
      type: 'treeSelect',
      label: '所属部门',
      valueOptions: _this.valueOptions,
      defaultProps: defaultProps,
      colLayout: { span: 12 }
    },
    {
      key: 'majorId',
      keyLabel: 'majorName',
      type: 'treeSelect',
      label: '所属专业',
      valueOptions: _this.majorOptions,
      defaultProps: majorProps,
      colLayout: { span: 12 }
    },
    { key: 'phonenumber', type: 'input', label: '联系方式', placeHolder: '请输入联系方式' },
    {
      key: 'sex',
      type: 'radio',
      label: '性别',
      valueOptions: [
        { label: '男', value: '1' },
        { label: '女', value: '2' }
      ]
    },
    {
      key: 'remark',
      type: 'input',
      label: '备注',
      // 文本域，不写则是普通文本框
      inputOptions: {
        type: 'textarea',
        rows: '2',
        style: 'width: 100%'
      },
      colLayout: { span: 24 }
    }
  ],
  labelWidth: '80px',
  width: '600px',
  itemStyle: { padding: '10px' },
  rules: {
    nickName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
    userName: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
    deptId: [{ required: true, message: '请选择所属部门', trigger: 'blur' }],
    majorId: [{ required: true, message: '请选择所属专业', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
  }
})
