<template>
  <a-form
    :label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
    :wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
  >
    <a-row :gutter="8">
      <a-col
        :xl="6"
        :lg="12"
        :md="12"
        :sm="24"
        :xs="24"
      >
        <a-form-item label="用户账号">
          <a-input
            v-model:value.trim="queryform.account"
            placeholder="请输入用户账号"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col
        :xl="6"
        :lg="12"
        :md="12"
        :sm="24"
        :xs="24"
      >
        <a-form-item label="用户名称">
          <a-input
            v-model:value.trim="queryform.accountName"
            placeholder="请输入用户名称"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col
        :xl="6"
        :lg="12"
        :md="12"
        :sm="24"
        :xs="24"
      >
        <a-form-item
          class="ele-text-right"
          :wrapper-col="{ span: 24 }"
        >
          <a-space>
            <a-button
              type="primary"
              style="background-color: #5cc750"
              @click="search"
            >查询</a-button>
            <a-button @click="reset">重置</a-button>
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
  <!-- 数据操作 -->
  <a-space style="margin-bottom: 10px">
    <a-button
      style="background-color: #5cc750"
      type="primary"
      class="ele-btn-icon"
      @click="handleAdd('新增账号')"
    >
      <template #icon>
        <plus-outlined />
      </template>
      <span>新增</span>
    </a-button>
  </a-space>
  <a-table
    bordered
    :pagination="pagination"
    :columns="columns"
    :dataSource="dataSource"
    :scroll="{ x: 'max-content' }"
  >
    <template #bodyCell="{ column ,record}">
      <template v-if="column.key === 'state'">
        <a-tag
          v-if="record.state == '0'"
          color="#f50"
        >禁用</a-tag>
        <a-tag
          v-if="record.state == '1'"
          color="#87d068"
        >启用</a-tag>
      </template>
      <template v-if="column.key === 'action'">
        <a-space>
          <a @click="handleAdd('编辑账号',record)">编辑</a>
          <a-divider type="vertical" />
          <a>禁用</a>
          <a-divider type="vertical" />
          <a>删除</a>
        </a-space>
      </template>
    </template>
  </a-table>
  <!-- 角色信息 -->
  <a-modal
    v-model:open="open"
    :title="openTitle"
    @ok="handleOkModal"
    @cancel="handleCancelModal"
    width="800px"
    :maskClosable="false"
  >
    <AccountManage
      :key="modalKey"
      ref="formModel"
    ></AccountManage>
  </a-modal>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import { message } from 'ant-design-vue'
import { callUser } from '@/apis/call.js'
import config from '@/utils/config.js'
import { getGUID } from '@/utils/tools'
import AccountManage from '@/views/form/accountmanage/AccountManage.vue';
const open = ref(false);
const openTitle = ref('');
const modalKey = ref(getGUID())
const formModel = ref(null);

const columns = [
  {
    title: '所属地区',
    dataIndex: 'zoneName',
    width: 200,
    key: 'zoneName',
    align: 'center'
  },
  {
    title: '用户名称',
    dataIndex: 'username',
    width: 200,
    key: 'username',
    align: 'center'
  },
  {
    title: '用户账号',
    dataIndex: 'phone',
    width: 200,
    key: 'phone',
    align: 'center'
  },
  {
    title: '角色类型',
    dataIndex: 'roleName',
    width: 200,
    key: 'roleName',
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'state',
    width: 200,
    key: 'state',
    align: 'center'
  },
  {
    title: '最近登录IP',
    dataIndex: 'appletCount',
    width: 200,
    key: 'appletCount',
    align: 'center'
  },
  {
    title: '最近登录时间',
    dataIndex: 'appletCount',
    width: 200,
    key: 'appletCount',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    width: 200,
    key: 'createdAt',
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center',
    fixed: 'right',
  }
];

const queryform = ref({
  account: '',
  accountName: '',
  pageNum: config.pageParam.pageNum,
  pageSize: config.pageParam.pageSize
})
// 表格行数据
const dataSource = ref([])

let pagination = reactive({
  total: dataSource.value.length,
  current: config.pageParam.pageNum,
  pageSize: config.pageParam.pageSize,
  showSizeChanger: true,
  pageSizeOptions: config.pageParam.pageSizeOptions,
  showQuickJumper: true
})

onMounted(() => {
  getData();
})

const search = () => {
  getData()
}

const reset = () => {
  queryform.value = {
    account: '',
    accountName: '',
    pageNum: config.pageParam.pageNum,
    pageSize: config.pageParam.pageSize
  }
  getData()
}

const getData = async () => {
  callUser("/staff/pageQueryStaffs", queryform.value).then((res) => {
    if (res.code != 200) {
      message.error(res.message)
      dataSource.value = []
      return
    }
    dataSource.value = res.data.records
  });
}

const handleAdd = async (title, record) => {
  modalKey.value = getGUID();
  openTitle.value = title;
  open.value = true;
  nextTick(() => {
    if (formModel.value) {
      const params = record == null ? {} : {
        staffId: record['staffId'],
        roleId: record['roleId'] == null ? [] : record['roleId'].split(","),
        zoneId: record['zoneId'] == null ? [] : record['zoneId'].split(","),
        phone: record['phone'],
        username: record['username'],
        state: record['state'],
        orgId: record['orgId']
      }
      formModel.value.openForm(params);
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

const handleOkModal = () => {
  formModel.value.formSave(bres => {
    open.value = false;
    if (bres.code == 200) {
      getData()
    }
  });
}

const handleCancelModal = () => {
  formModel.value.resetAll(bres => {
    if (bres) open.value = false;
  });
}

</script>