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

    <ManageOrgFormModal ref="ManageOrgModalRef" @success="query" />
    <AllocationUserModal ref="allocationUserModalRef" @success="query" />
  </div>
</template>

<script setup lang="jsx" name="ManageOrg">
  import { ref, reactive, onMounted } from 'vue';
  import { Plus, Delete, Edit, Setting } from '@element-plus/icons-vue';
  import { getManageOrgPage, deleteManageOrgs } from '@/api/manageOrg';
  import ManageOrgFormModal from './components/ManageOrgFormModal.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 ManageOrgModalRef = ref(null);
  const allocationUserModalRef = ref(null);
  const config = reactive({
    columns: [
      { type: 'checkbox', width: 60, fixed: 'left' },
      { field: 'id', title: '资管公司ID', showOverflow: 'tooltip' },
      { field: 'orgName', title: '公司名称', showOverflow: 'tooltip', search: { el: 'input' } },
      {
        field: 'arealist',
        enum: citydata,
        showOverflow: 'tooltip',

        title: '所属区域',
        fieldNames: { label: 'label', value: 'value' },
        showOverflow: 'tooltip',
        search: { el: 'cascader', props: { clearable: true, checkStrictly: true } },
        slots: {
          default: ({ row }) => {
            return (
              <div>
                {row.province}
                {row.city ? '-' + row.city : ''}
                {row.district ? '-' + row.district : ''}
              </div>
            );
          },
        },
      },
      {
        field: 'maxStagesNum',
        title: '是否共案处理',
        showOverflow: 'tooltip',
        slots: {
          default: ({ row }) => {
            return <ElTag>{row.mergerCase == 'Y' ? '是' : '否'}</ElTag>;
          },
        },
      },
      { field: 'offender', showOverflow: 'tooltip', title: '负责人', search: { el: 'input' } },
      {
        field: 'offenderPhone',
        showOverflow: 'tooltip',
        title: '负责人手机',
        search: { el: 'input' },
      },
      {
        field: 'status',
        title: '状态',
        showOverflow: 'tooltip',
        width: 80,
        slots: {
          default: ({ row }) => {
            return (
              <ElTag type={row.status == 'enable' ? 'primary' : 'danger'}>
                {row.status == 'enable' ? '启用' : '禁用'}
              </ElTag>
            );
          },
        },
      },
      { field: 'createBy', showOverflow: 'tooltip', title: '创建人' },
      { field: 'createTime', showOverflow: 'tooltip', title: '创建时间', width: 140 },
      {
        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 paramCallback = (param) => {
    const obj = JSON.parse(JSON.stringify(param));
    if (obj.arealist && obj.arealist.length > 0) {
      obj['province'] = obj.arealist[0];
      obj['city'] = obj.arealist.length > 1 ? obj.arealist[1] : null;
      obj['district'] = obj.arealist.length > 2 ? obj.arealist[2] : null;
      delete obj['arealist'];
    }
    return obj;
  };
  const query = () => proTable.value?.search();
  const handleEdit = (row) => ManageOrgModalRef.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 deleteManageOrgs(ids);

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

      query();
    }
  };

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