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

    <TenantFormModal ref="tenatModalRef" @success="query" />
    <!-- <AllocationUserModal ref="allocationUserModalRef" @success="query" /> -->
  </div>
</template>

<script setup lang="jsx" name="tenantManage">
  import { ref, reactive, onMounted } from 'vue';
  import { Plus, Delete, Edit, Setting } from '@element-plus/icons-vue';
  import { getTenantPage, deleteTenants } from '@/api/tenant';
  import TenantFormModal from './components/TenantFormModal.vue';
  import AllocationUserModal from './components/AllocationUserModal.vue';
  import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus';
  import citydata from '../../../assets/citydata';

  const proTable = ref(null);
  const tenatModalRef = ref(null);
  const allocationUserModalRef = ref(null);
  const paramCallback = (param) => {
    const obj = JSON.parse(JSON.stringify(param));
    obj['tenantType'] = 'mediate';
    return obj;
  };
  const config = reactive({
    columns: [
      { type: 'checkbox', width: 60, fixed: 'left' },
      { field: 'name', title: '调解中心名称', search: { el: 'input' } },
      { field: 'code', title: '调解中心编码', search: { el: 'input' } },
      {
        field: 'province',
        enum: citydata,
        showOverflow: 'tooltip',
        title: '省份',
        fieldNames: { label: 'name', value: 'name' },
        showOverflow: 'tooltip',
        // search: { el: 'select', props: { clearable: true } },
      },
      { field: 'adminUser', title: '负责人' },
      { field: 'phone', title: '负责人手机' },
      {
        field: '',
        title: '成员数量',
        width: 80,
        slots: {
          default: ({ row }) => {
            return <div>{row.usersSize}</div>;
          },
        },
      },
      {
        field: 'status',
        title: '状态',
        width: 80,
        slots: {
          default: ({ row }) => {
            return (
              <ElTag type={row.status == 'enable' ? 'primary' : 'danger'}>
                {row.status == 'enable' ? '启用' : '禁用'}
              </ElTag>
            );
          },
        },
      },
      {
        width: 100,
        title: '操作',
        fixed: 'right',
        slots: {
          default: ({ row }) => (
            <>
              <ElButton type="primary" link icon={Edit} onClick={() => handleEdit(row)}>
                编辑
              </ElButton>
            </>
          ),
        },
      },
    ],
  });

  const query = () => proTable.value?.search();
  const handleEdit = (row) => tenatModalRef.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 deleteTenants(ids);

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

      query();
    }
  };

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