<script setup lang="ts">
import type {
  MjEditFormProps,
  MjFormProps,
  MjGridProps,
} from '#/components/mj/mj-table'

import { BatteryCharge, ResetPassword } from '@vben/icons'
import { useUserStore } from '@vben/stores'

import { spStaffService } from '#/api/service/sp/sp-staff'
import MjTable, {
  mj_form_input,
  mj_form_phone,
  mj_form_select,
  mj_form_text,
} from '#/components/mj/mj-table'
import { rule_phone } from '#/components/mj/mj-table/fmt'
import { cellClassName, user_type_sp_staff, useUser } from '#/hooks/user'
import obj from '#/utils/obj'

import { useSearchSp } from '../hooks/search'

const { userInfo } = storeToRefs(useUserStore())
const gridRef = ref()

const spRender = useSearchSp({
  prepare: { gridRef },
})

const defaultPwd = 'syx666666'

const roles_options = [
  {
    label: '服务商员工',
    value: '1946864977398562818',
  },
  {
    label: '服务商管理员',
    value: '1946864792689803266',
  },
]
const roles_map = obj.options2map(roles_options)

// 表单
const editForm = {
  modal: {
    width: 900,
  },
  form: {
    titleWidth: 100,

    items: obj.joinObjs<any>(
      {
        required: true,
        field: 'name',
        title: '姓名',
        span: 12,
        itemRender: {
          name: mj_form_input,
        },
      },
      {
        field: 'phone',
        title: '手机',
        rules: rule_phone,
        span: 12,
        itemRender: {
          name: mj_form_phone,
        },
      },
      {
        required: true,
        field: 'account',
        title: '账号',
        span: 12,
        itemRender: {
          name: mj_form_input,
          props: {
            placeholder: `初始密码为${defaultPwd}`,
          },
        },
      },
      {
        title: '辅助',
        span: 12,
        slots: { default: 'form_tool' },
      },
      {
        required: true,
        field: 'roleId',
        title: '角色',
        span: 12,
        itemRender: {
          name: mj_form_select,
          options: roles_options,
        },
      },
      {
        field: 'remark',
        title: '备注',
        span: 12,
        itemRender: {
          name: mj_form_input,
        },
      },
      userInfo.value.isSpStaff || {
        required: true,
        field: 'providerName',
        title: '服务商',
        span: 12,
        itemRender: {
          name: mj_form_text,
          props: {
            linkedRender: spRender,
          },
        },
      },
    ),
    data: {},
  },
  addFields: ['name', 'phone', 'account', 'roleId', 'remark', 'providerId'],
  updateFields: [
    'id',
    'name',
    'phone',
    'account',
    'roleId',
    'remark',
    'providerId',
  ],
  beforeSaveOrUpdate(data) {
    if (userInfo.value.isSpStaff) {
      data.providerId = userInfo.value.providerId
    }
    return data
  },
} as MjEditFormProps

// 搜索表单
const searchForm = {
  items: obj.joinObjs(
    userInfo.value.isSpStaff || {
      title: '服务商',
      field: 'providerId',
      span: 6,
      itemRender: spRender,
    },
  ),
} as MjFormProps

// 表格
const grid = {
  columns: obj.joinObjs<any>(
    { type: 'seq' },
    {
      field: 'name',
      title: '名称',
    },
    {
      field: 'account',
      title: '账号',
    },
    userInfo.value.isSpStaff || {
      field: 'providerName',
      title: '服务商',
    },
    {
      title: '状态',
      slots: {
        default: 'status',
      },
    },
    {
      field: 'vipEndTime',
      title: '到期时间',
      formatter: 'vipEndTime',
    },
    {
      field: 'roleId',
      title: '角色',
      formatter({ cellValue }: any) {
        return roles_map[cellValue]
      },
    },
    {
      fixed: 'right',
      title: '操作',
      slots: {
        default: 'operation',
      },
    },
  ),
  cellClassName,
  beforeLoadData(params) {
    if (userInfo.value.isSpStaff) {
      params.providerId = userInfo.value.providerId
    }
    return params
  },
} as MjGridProps

const {
  selectedItems,
  selectedBtnDisabled,
  resetPassword,
  statusChange,
  userRenewVisible,
  renewUser,
  renew,
  autoAccount,
} = useUser({
  defaultPwd,
  gridRef,
  userType: user_type_sp_staff,
})
</script>

<template>
  <div class="sp-staff-mgr g-container">
    <user-renew
      v-model="userRenewVisible"
      :user="renewUser"
      @success="gridRef?.reload()"
    />
    <MjTable
      ref="gridRef"
      :search-form="searchForm"
      :edit-form="editForm"
      :grid="grid"
      :service="spStaffService"
      v-model:selected-items="selectedItems"
      hide-remove
      v-bind="$attrs"
    >
      <template #operation="{ row }">
        <el-button type="success" :icon="BatteryCharge" @click="renew(row)">
          续费
        </el-button>
      </template>

      <template #toolbarButtonsExtra>
        <el-button
          type="warning"
          :icon="ResetPassword"
          :disabled="selectedBtnDisabled"
          @click="resetPassword"
        >
          重置密码
        </el-button>
      </template>

      <template #status="{ row }">
        <el-switch v-model="row.status" @click="statusChange(row)" />
      </template>

      <template #form_tool>
        <el-button type="success" @click="autoAccount">
          自动生成账号名
        </el-button>
      </template>
    </MjTable>
  </div>
</template>

<style lang="scss" scoped></style>
