import { h, ref, reactive } from 'vue'
import TableTags from '@/components/DataTable/tools/Tags.vue'
import TableSwitch from '@/components/DataTable/tools/Switch.vue'
import TableAction from '@/components/DataTable/tools/Action.vue'
import { userUpdate } from '@/api/system/user.js'
import { getRoleAll } from '@/api/system/role'

const roleOptions = ref([])
export const getRoleOptions = async function() {
  const res = await getRoleAll()
  if (res.code === 0) {
    roleOptions.value = res.data.map(it => ({
      ...it,
      label: it.roleName,
      value: it.id
    }))
  }
}
/* 注册table */
const tableRef = ref()
const searchParams = ref()

function handleSearch(params) {
  searchParams.value = { ...params }
  tableRef.value.reFetch({ searchParams })
}

/**
 * @description: 获取数据及操作
 * @param {*} row 单行数据
 * @param {*} type 操作类型 create:创建，preview:预览，edit:编辑
 * @return {*}
 */
function getRowData(row, type) {
  tableData.rowData = row
  tableData.modalType = type
  tableData.modalShow = true
}

// 设置状态
function changeStatus(row) {
  userUpdate({ id: row.data.id, status: row.value }).then(res => {
    if (res.code === 0) {
      handleSearch()
    }
  }).catch(e => {
    console.log(e)
  })
}

export const tableData = reactive({
  tableRef,
  searchParams,
  rowData: {},
  modalType: 'create',
  modalShow: false,
  configModalShow: false,
  handleSearch,
  columns: [
    {
      title: '序号',
      key: 'key',
      render: (_, index) => {
        return `${index + 1}`
      },
      align: 'center',
      width: 100
    },
    {
      title: '账号',
      key: 'username',
      align: 'center'
    },
    {
      title: '角色',
      key: 'roleId',
      align: 'center',
      render(row) {
        return h(TableTags, {
          data: row.roleId,
          filters: roleOptions.value
        })
      }
    },
    {
      title: '姓名',
      key: 'realname',
      align: 'center'
    },
    {
      title: '手机号',
      key: 'mobile',
      align: 'center',
      Minwidth: 160
    },
    {
      title: '任务次数',
      key: 'taskCount',
      align: 'center',
      Minwidth: 160
    },
    {
      title: '上次登录时间',
      key: 'loginTime',
      align: 'center'
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      width: 100,
      render(row) {
        return h(TableSwitch, {
          data: { id: row.id, status: row.status },
          rowKey: 'status',
          checkedValue: 1,
          uncheckedValue: 2,
          onChange: changeStatus.bind(row)
        })
      }
    },
    {
      title: '操作',
      align: 'center',
      width: 150,
      fixed: 'right',
      render(row) {
        return h(TableAction, {
          actions: [
            {
              label: '编辑',
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: getRowData.bind(null, row, 'update')
              },
              auth: 'user:menber:edit'
            }
          ],
          align: 'center'
        })
      }
    }
  ]
})

