<template>
  <a-card>
    <a-row justify="space-between" >
      <a-col>
        <a-space>
          <a-input placeholder="根据用户名称搜索" allowClear v-model:value="queryState.userLabel" ></a-input>
          <a-button type="primary" @click="getUserList">搜索</a-button>
        </a-space>
      </a-col>
      <a-col>
        <a-button type="primary" @click="openModal('add')">添加</a-button>
      </a-col>
    </a-row>
    <a-table
      style="margin-top: 20px;"
      :columns="columns"
      :data-source="state.dataSource"
      :loading="state.loading"
      :pagination="queryState"
      @change="changePage"
    >
      <template #bodyCell="{column, record}">

        <template v-if="column.key === 'action'">
            <a-space>
              <a href="#" @click="openModal('update', record)" >修改密码</a>
            </a-space>
        </template>
      </template>
    </a-table>
  </a-card>

  <modal-pro
    :label="modalTitle"
    :open="state.visible"
    @cancel="state.visible = false"
    @ok="submit"
    style="width: 700px;"
  >
  <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
    <a-form-item label="用户名称" v-if="state.opraState === 'add'">
      <a-input allowClear v-model:value="modelRef.label"  />
    </a-form-item>
    <a-form-item name="account" label="用户账号" v-bind="validateInfos.account" v-if="state.opraState === 'add'">
      <a-input allowClear v-model:value="modelRef.account"  />
    </a-form-item>
    <a-form-item name="sourcePassword" label="原始密码" required v-if="state.opraState === 'update'">
      <a-input-password  v-model:value="modelRef.sourcePassword"  />
    </a-form-item>
    <a-form-item name="password" :label="state.opraState === 'add' ? '用户密码' : '新密码'" v-bind="validateInfos.password">
      <a-input-password  v-model:value="modelRef.password"  />
    </a-form-item>
    <a-form-item name="email" label="用户邮箱" v-bind="validateInfos.email" v-if="state.opraState === 'add'">
      <a-input allowClear v-model:value="modelRef.email"  />
    </a-form-item>
   </a-form>
  </modal-pro>
</template>

<script lang="ts" setup >
import { computed, nextTick, onMounted, reactive } from 'vue'
import { UserController } from '@/controller'
import { Form, useCacheToken } from 'ant-design-vue'
import { useUserStore } from '@/store'

const columns = [
  {
    title: '用户id',
    dataIndex: 'id'
  },
  {
    title: '用户名称',
    dataIndex: 'label',
    key: 'label'
  },
  {
    title: '用户邮箱',
    dataIndex: 'email'
  },
  {
    title: '用户账号',
    dataIndex: 'account',
    key: 'account'
  },
  {
    title: '用户密码',
    dataIndex: 'password'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const modalTitle = computed(() => state.opraState === 'add' ? '新增用户' : '修改密码')

const useForm = Form.useForm
const userStore = useUserStore()

const queryState = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  userLabel: ''
})

const state = reactive<{
  loading: boolean
  dataSource: USER.User.Detail[]
  opraState: 'add' | 'update'
  visible: boolean,
  detail: USER.User.Detail | null
}>({
  loading: false,
  dataSource: [],
  opraState: 'add',
  visible: false,
  detail: null
})

const modelRef = reactive({
  id: '',
  account: '', // 用户账号 登陆使用 必需
  email: '', // 用户邮箱
  password: '', // 用户密码  必需，在输入的密码上 做一次base64 encode
  label: '', // 用户名称 非必需
  sourcePassword: ''
})

const closeModal = () => {
  state.visible = false
}

const openModal = (key: 'add' | 'update', record: Partial<USER.User.Detail> = {}) => {
  state.opraState = key
  state.visible = true
  modelRef.id = record.id!
}

const { resetFields, validate, validateInfos } = useForm(modelRef, reactive({
  account: [{ required: true, message: '请填写用户账户' }],
  email: [{ required: true, message: '请填写用邮箱', name: 'email' }],
  password: [{ required: true, message: '请填写用户密码', name: 'password' }]
}))

const submit = async () => {
  if (state.opraState === 'add') {
    validate().then(async () => {
      await UserController.add({
        ...modelRef,
        password: userStore.encryptPassWord(modelRef.password)
      })
      closeModal()
      getUserList()
      resetFields()
    })
  } else {
    if (modelRef.id && modelRef.password && modelRef.sourcePassword) {
      await UserController.updatePassword({ id: modelRef.id, sourcePassword: userStore.encryptPassWord(modelRef.sourcePassword), newPassword: userStore.encryptPassWord(modelRef.password) })
      closeModal()
      getUserList()
      resetFields()
    }
  }
}

const changePage = ({ current }) => {
  queryState.page = current
  getUserList()
}

const getUserList = async () => {
  state.loading = true
  const { data, sum } = await UserController.page(queryState)
  state.dataSource = data
  queryState.total = sum
  state.loading = false
}

onMounted(() => {
  getUserList()
})

</script>

<style lang="less" >
</style>
