<template>
  <div class="table-box">
    <ProTable ref="proTable" :config="config" :api="getPlatformPage">
      <template #left_buttons>
        <el-button type="primary" :icon="Plus" @click="platformModalRef?.openModal()"
          >新增</el-button
        >
        <el-button type="danger" :icon="Delete" @click="onDelete">删除</el-button>
      </template>
    </ProTable>

    <platformFormModal ref="platformModalRef" @success="query" />
    <AllocationUserModal ref="allocationUserModalRef" @success="query" />
  </div>
</template>

<script setup lang="jsx" name="platformManage">
  import { ref, reactive, onMounted } from 'vue';
  import { Plus, Delete, Edit, Setting } from '@element-plus/icons-vue';
  import { getPlatformPage, deletePlatforms } from '@/api/platform';
  import platformFormModal from './components/platformFormModal.vue';
  import AllocationUserModal from './components/AllocationUserModal.vue';
  import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus';

  const proTable = ref(null);
  const platformModalRef = ref(null);
  const allocationUserModalRef = ref(null);
  const config = reactive({
    columns: [
      { type: 'checkbox', width: 60, fixed: 'left' },
      { field: 'id', title: '借款平台ID' },
      { field: 'name', title: '平台名称', search: { el: 'input' } },
      { field: 'maxStagesNum', title: '分期最大期数', search: { el: 'input' } },
      { field: 'minAmount', title: '分期最低金额' },
      {
        field: 'status',
        title: '状态',
        width: 80,
        slots: {
          default: ({ row }) => {
            return (
              <ElTag type={row.status == 'enable' ? 'primary' : 'danger'}>
                {row.status == 'enable' ? '启用' : '禁用'}
              </ElTag>
            );
          },
        },
      },
      {
        width: 200,
        title: '操作',
        fixed: 'right',
        slots: {
          default: ({ row }) => (
            <>
              <ElButton type="primary" link icon={Edit} onClick={() => handleEdit(row)}>
                编辑
              </ElButton>
              {/* <ElButton
                type="primary"
                link
                icon={Setting}
                onClick={() =>
                  allocationUserModalRef.value.openModal(JSON.parse(JSON.stringify(row)))
                }
              >
                设置成员
              </ElButton> */}
            </>
          ),
        },
      },
    ],
  });

  const query = () => proTable.value?.search();
  const handleEdit = (row) => platformModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
  const onDelete = async () => {
    const list = proTable.value.element.getCheckboxRecords();
    if (list.length > 0) {
      await ElMessageBox.confirm('是否确认删除选中的数据？', '删除提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      });

      const ids = list.map((v) => v.id).join(',');
      await deletePlatforms(ids);

      ElMessage.success({
        message: '删除成功',
        plain: true,
      });

      query();
    }
  };

  onMounted(() => {
    query();
  });
</script>
