/*
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 人员管理配置
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-29 11:04:30
 * @Date: 2024-03-05 09:37:15
 */
import cpw from '../../../assets/images/change-password.png'
const deptListVal = ref([])
const postOptionsVal = ref([])
const teamListVal = ref([])
const roleOptionsVal = ref([])
const handleStatusChangeFn = ref(null)
const handleUpdateFn = ref(null)
const handleResetPwdFn = ref(null)
const handleDeleteFn = ref(null)

export const init = (proxy, {
  deptList,
  postOptions,
  teamList,
  roleOptions,
  handleStatusChange,
  handleUpdate,
  handleResetPwd,
  handleDelete,
}) => {
  deptListVal.value = deptList
  postOptionsVal.value = postOptions
  teamListVal.value = teamList
  roleOptionsVal.value = roleOptions
  handleStatusChangeFn.value = handleStatusChange
  handleUpdateFn.value = handleUpdate
  handleResetPwdFn.value = handleResetPwd
  handleDeleteFn.value = handleDelete

  const { sys_normal_disable } = proxy.useDict("sys_normal_disable"); 
  const { sys_user_sex } = proxy.useDict("sys_user_sex"); 
  // 表格筛选条件
  const searchList = ref([
    {
      label: '搜索',
      field: 'userName',
      placeholder: '请输入员工编号/姓名'
    },
    {
      label: '部门',
      field: 'deptId',
      type: 'treeSelect',
      props: { value: 'deptId', label: 'deptName', children: 'children' },
      clearable: true,
      placeholder: '请选择部门',
      options: deptListVal.value
    },
    {
      label: '岗位',
      field: 'postIds',
      type: 'select',
      clearable: true,
      multiple: true,
      placeholder: '请选择岗位',
      options: postOptionsVal.value
    },
    {
      label: '班组',
      field: 'teamId',
      type: 'select',
      clearable: true,
      placeholder: '请选择班组',
      options: teamListVal.value
    },
    {
      label: '状态',
      field: 'status',
      type: 'select',
      clearable: true,
      placeholder: '请选择用户状态',
      options: sys_normal_disable
    },
  ])
  // 表格配置按钮
  const btnList = ref([
    { label: '新增员工', type: 'primary', icon: 'Plus', met: 'handleAdd', hasPermi:'system:user:add' },
  ])
  // 表格配置项
  const tableOption = ref({
    checkbox: false, // 是否展示多选框
    index: true, // 是否展示序号
    fixed: "", // 是否将多选框及序号列固定在最左侧
    stripe: true, // 是否斑马纹表格
    border: false, // 是否表格边框
    pageHidden: false, // 是否隐藏分页
    maxHeight: '58vh'
  })
  // 表格列
  const columns = ref([
    { label: "员工编号", prop: "userName", minWidth: 100 },
    { label: "姓名", prop: "nickName", minWidth: 100 },
    { label: "部门", prop: "deptName", minWidth: 100 },
    { label: "岗位", prop: "postDesc", minWidth: 100 },
    { label: "班组", prop: "teamName", minWidth: 100 },
    { label: "手机号码", prop: "phonenumber", minWidth: 100 },
    {
      label: "性别", prop: "sex", minWidth: 100,
      slots: (row) => {
        return <span>{ row.sex ? sys_user_sex.value.find(item => item.value == row.sex).label : '' }</span>
      }
    },
    {
      label: "状态", prop: "status", minWidth: 100,
      slots: (row) => {
        return <el-switch v-model={row.status} active-value="0" inactive-value="1" onChange={()=>{handleStatusChangeFn.value(row)}}></el-switch>
      }
    },
    {
      label: "创建时间", prop: "createTime", sort: true, minWidth: 160,
      slots: (row) => {
        return <span>{ proxy.parseTime(row.createTime) }</span>
      }
    },
    {
      label: "操作", minWidth: 140,
      slots: (row) => {
        const slots = {
          reference: () => (
            <el-button type="primary" link onClick={()=>{
              Object.keys(popVisible.value).forEach(item => {
                popVisible.value[item] = false
              })
              newPassWord.value = ''
              popVisible.value[row.userId] = true
            }} v-hasPermi={['system:user:resetPwd']}>重置密码</el-button>
          )
        }
        const rule = {
          password: [
            { required: true, message: "密码不能为空", trigger: "blur" },
            { pattern: /^.{6,}$/, message: "至少6位以上", trigger: "blur" },
            { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,20}$/, message: "至少包含一个数字和一个字母，不支持空格和符号", trigger: "blur" },
          ]
        }
        if (row?.userId === 1) {
          return <span></span>
        } else {
          return (<>
            <el-button type="primary" link onClick={()=>{handleUpdateFn.value(row)}} v-hasPermi={['system:user:edit']}>修改</el-button>
            {/* <el-popover visible={popVisible.value[row.userId]} trigger="click"  placement="left" v-slots={slots} width={300}>
              <div style="display:flex;margin-bottom:12px;">
                <img src={cpw} style="width:44px;height:44px;padding:6px 12px 6px 0;" />
                <div>
                  <p style="margin:0;font-weight:500;font-size:14px;">{ row.userName }</p>
                  <span style="font-size:12px;">请输入{row.userName}的新密码</span>
                </div>
              </div>
              <el-form model={newPassWord} ref="ruleFormRef" rules={rule}>
                <el-form-item label="" prop='password'>
                  <el-input v-model={newPassWord.value.password} type="password" show-password placeholder="请输入新密码"></el-input>
                </el-form-item>
                <p style="text-align: right; margin: 0">
                  <el-button size="small" text onClick={() => {popVisible.value[row.userId] = false}}>取消</el-button>
                  <el-button size="small" type="primary" onClick={() => {nextTick(() => {handleResetPwdFn.value(row)})}}>确定</el-button>
                </p>
              </el-form>
            </el-popover> */}
            <el-button type="primary" link onClick={()=>{handleResetPwdFn.value(row)}} v-hasPermi={['system:user:resetPwd']}>重置密码</el-button>
            <el-button type="danger" link onClick={()=>{handleDeleteFn.value(row)}} v-hasPermi={['system:user:remove']}>删除</el-button>
          </>)
        }
      }
    },
  ])
  // 分页配置
  const pageSet = ref({
    pageNum: 1,
    pageSize: 10,
    total:0
  })
  // 表单元素
  const fieldList = ref([
    {
      label: '员工编号',
      field: 'userName',
      width: '270px',
      rules: [
        { required: true, message: "员工编号不能为空", trigger: "blur" },
        { min: 2, max: 20, message: "员工编号长度必须介于 2 和 20 之间", trigger: "blur" }
      ],
      placeholder: '请输入员工编号'
    },
    {
      label: '姓名',
      field: 'nickName',
      width: '270px',
      rules: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
      placeholder: '请输入姓名'
    },
    {
      label: '归属部门',
      field: 'deptId',
      type: 'treeSelect',
      width: '270px',
      props: { value: 'deptId', label: 'deptName', children: 'children' },
      clearable: true,
      rules: [{ required: true, message: "部门不能为空", trigger: "change" }],
      placeholder: '请选择部门',
      options: deptListVal.value
    },
    {
      label: '岗位',
      field: 'postIds',
      type: 'select',
      width: '270px',
      clearable: true,
      multiple: true,
      rules: [{ required: true, message: "岗位不能为空", trigger: "change" }],
      placeholder: '请选择岗位',
      options: postOptionsVal.value
    },
    {
      label: '角色',
      field: 'roleIds',
      type: 'select',
      width: '270px',
      clearable: true,
      multiple: true,
      rules: [{ required: true, message: "角色不能为空", trigger: "change" }],
      placeholder: '请选择角色',
      options: roleOptionsVal.value
    },
    {
      label: '密码',
      field: 'password',
      type: 'password',
      width: '270px',
      rules: [
        { required: true, message: "密码不能为空", trigger: "blur" },
        { pattern: /^.{6,}$/, message: "至少6位以上", trigger: "blur" },
        { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,20}$/, message: "至少包含一个数字和一个字母，不支持空格和符号", trigger: "blur" },
      ],
      placeholder: '请输入密码'
    },
    {
      label: '手机号码',
      field: 'phonenumber',
      width: '270px',
      max: 11,
      rules: [{ pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" }],
      placeholder: '请输入手机号码'
    },
    {
      label: '邮箱',
      field: 'email',
      width: '270px',
      rules: [{ pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: "邮箱格式不正确", trigger: "blur" }],
      placeholder: '请输入邮箱'
    },
    {
      label: '用户性别',
      field: 'sex',
      type: 'select',
      width: '270px',
      clearable: true,
      placeholder: '请选择用户性别',
      options: sys_user_sex
    },
    {
      label: '状态',
      field: 'status',
      type: 'radio',
      radioButton: false,
      options: sys_normal_disable
    },
  ])
  // 表单配置项
  const formOption = ref({
    inline: true,
    labelWidth: '80px',
    scrollToError: true,
    btnCenter: true,
    labelPosition: 'top',
    btn: ['submit', 'cancel']
  })
  

  // popover 弹出方法
  const popVisible = ref({})
  const newPassWord = ref({
    password:''
  })
  return {
    searchList,
    btnList,
    columns,
    pageSet,
    tableOption,
    fieldList,
    formOption,
    newPassWord
  }
}

