<template>
  <fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px" ></fvSearchForm>
  <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"
           @selectionChange="selectionChange"></fvTable>
  <user-picker :multiple="true" ref="whiteUserRef" title="请选择人员"
               v-model:value="whiteUserList" @ok="whiteUserPickerOk" @cancelOrClear="whiteUserPickerOk"/>

</template>

<script setup lang="jsx">
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
import {addWhiteUser, delWhiteUser} from "@/api/user/user";
import {ElMessage} from "element-plus";
const tableIns = ref()
const router = useRouter()
const whiteUserRef = ref()
const whiteUserList = ref([])
const selectUser = ref([])
const searchConfig = ref([
  {
    label: '名称',
    prop: 'name',
    component:'el-input',
    props: {
      placeholder: '请输入名称',
      clearable: true,
      filterable: true,
    },
  },
  {
    label: '电话',
    prop: 'phone',
    component:'el-input',
    props: {
      placeholder: '请输入电话',
      clearable: true,
      filterable: true,
    },
  },
])
const tableConfig = reactive({
  columns: [
    {
      type: 'selection',
      prop: 'selection',
    },
    {
      prop: 'index',
      type: 'index',
      label: '序号',
      align: 'center',
      width:60,
      index: index => {
        return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1
      }
    },
    {
      prop: 'name',
      label: '名称',
      align: 'center',
      width: 150
    },
    {
      prop: 'phone',
      label: '手机号码',
      align: 'center',
      width: 150
    },
    {
      prop: 'companyName',
      label: '公司名称',
      align: 'center'
    },
    {
      prop: 'accountType',
      label: '主次账号',
      align: 'center',
      showOverflowTooltip: false,
      currentRender: ({row, index}) => (<Tag dictType={'account_type'} value={row.accountType}/>)
    },
    {
      prop: 'oper',
      label: '操作',
      align: 'center',
      showOverflowTooltip: false,
      currentRender: ({row, index}) => {
        return (
            <div style={{width: '100%'}}>
              {
                    <popover-delete name={row.name} type={'审批白名单'} btnType={'danger'}
                                    onDelete={() => deleteWhiteUser(row)}/>
              }
            </div>
        )
      }
    }
  ],
  api: '/admin/approve/white/list',
  params: {},
  btns: [
    {name: '新增', key: 'add', color: '#DED0B2'},
    {name: '删除', key: 'del', type:'danger'},
  ]
})
const whiteUserPickerOk = (userList) => {
  whiteUserList.value = userList.map(item => item.id)
  addUser()
}
const addUser=async () => {
  const res = await addWhiteUser({
    userIds: whiteUserList.value
  })
  console.log('res',res)
  if (res.code === 1000) {
    ElMessage.success('新增成功')
    tableIns.value.refresh()
  } else {
    ElMessage.error(res.msg)
  }
}
const search = (val) => {
  tableConfig.params = val
  tableIns.value.refresh()
}
const selectionChange = (data) => {
  selectUser.value=data.map(item=>item.userId)
}
const headBtnClick = (key) => {
  switch (key) {
    case 'add':
      handleAddWhiteUser()
      break;
    case 'del':
      handleDeleteWhiteUser(selectUser.value)
      break;
  }
}
const handleAddWhiteUser = () => {
  whiteUserRef.value.showUserPicker()
}
const handleDeleteWhiteUser = async (user) => {
  // if (selectUser.value.length === 0) {
  //   ElMessage.warning('请选择要删除的用户')
  //   return
  // }
  const res = await delWhiteUser({
    userIds: user
  })
  console.log('res',res)
  if (res.code === 1000) {
    ElMessage.success('删除成功')
    tableIns.value.refresh()
  } else {
    ElMessage.error(res.msg)
  }
}
const deleteWhiteUser=(row)=>{
  console.log('row',row)
  handleDeleteWhiteUser([row.userId])
}
</script>

<style scoped>

</style>