/*
 * @Author: mhj
 * @LastEditors: wfl
 * @Date: 2022-08-18 16:31:34
 * @LastEditTime: 2022-10-13 16:43:51
 */
import { delPostApi, queryPostApi } from '@/mainApp/api/sys-default/post';
import GlContentHeader from '@/global/components/GlContentHeader';
import GlContentSearch from '@/global/components/GlContentSearch';
import { useMessage } from '@/global/hooks/web/useMessage';
import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { Button, FormItem, Input, Modal, Table } from 'ant-design-vue';
import { createVNode, defineComponent, reactive, Ref, ref } from 'vue';
import DepModal from './postModal.vue';
const postManage = defineComponent({
  setup: () => {
    const { createMessage } = useMessage();
    const loading = ref(false);
    const visible = ref(false);
    const editData = ref(null);
    const postData: Ref<null | Array<any>> = ref(null);
    const tableKeys = [
      {
        title: '岗位名称',
        dataIndex: 'name',
        width: 200,
      },
      {
        title: '岗位描述',
        dataIndex: 'remark',
      },
      {
        title: '操作',
        dataIndex: '_1',
        width: 100,
      },
    ];
    const pageInfo = reactive({
      pages: 1,
      rows: 10,
      total: 0,
      pageSizeOptions: ['10', '30', '45', '60'],
    });
    const queryForm = reactive({
      name: '',
    });
    const handleShow = (visi: boolean) => {
      visible.value = visi;
      !visi && (editData.value = null);
    };

    //查询用户
    const postQueryData = async () => {
      const params = {
        ...queryForm,
        page: pageInfo.pages,
        rows: pageInfo.rows,
      };
      const res = await queryPostApi(params);
      if (res.success) {
        postData.value = res.data;
        pageInfo.total = res.total;
        postData.value?.forEach((item: any, index: number) => {
          // index 序号
          item.order = Number(pageInfo.pages - 1) * pageInfo.rows + index + 1;
        });
      }
    };
    postQueryData();
    const handNewPost = () => {
      visible.value = true;
      editData.value = null;
    };
    const handEditDep = (val) => {
      visible.value = true;
      editData.value = val;
    };
    const handDeleteDep = (val) => {
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode('div', { style: '' }, '确认删除该岗位信息吗?'),
        async onOk() {
          const res = await delPostApi(val.id);
          if (res.success) {
            createMessage.warning(res.msg);
            // message.success('删除用户成功');
            postQueryData();
          }
        },
        onCancel() {},
        class: 'test',
      });
    };

    const btnPagging = '!px-5px';
    return () => (
      <>
        <GlContentSearch
          onReset={() => postQueryData()}
          form={queryForm}
          onSearch={() => postQueryData()}
        >
          {{
            default: () => {
              return (
                <>
                  <FormItem label={'岗位名称'} name={'name'}>
                    <Input
                      allowClear
                      placeholder="请输入岗位名称"
                      v-model:value={queryForm.name}
                    ></Input>
                  </FormItem>
                </>
              );
            },
          }}
        </GlContentSearch>
        <DepModal
          title={editData.value ? '编辑岗位' : '新增岗位'}
          visible={visible.value}
          editData={editData.value}
          onVisibleChange={(val) => handleShow(val)}
          onDataChange={() => postQueryData()}
        />
        <GlContentHeader
          onSearch={() => postQueryData()}
          onRefresh={() => postQueryData()}
          title="岗位管理"
          btnList={[]}
        >
          {{
            btnList: () => {
              return (
                <>
                  <Button type="primary" onClick={() => handNewPost()}>
                    {{
                      icon: () => <PlusOutlined />,
                      default: '新增岗位',
                    }}
                  </Button>
                </>
              );
            },
            default: ({ height, size }) => {
              return (
                <Table
                  size={size}
                  loading={loading.value}
                  bordered
                  pagination={false}
                  columns={tableKeys}
                  dataSource={postData.value || []}
                  scroll={{
                    scrollToFirstRowOnChange: true,
                    y: height,
                  }}
                >
                  {{
                    bodyCell: ({ column, record }) => {
                      return column.dataIndex === '_1' ? (
                        <>
                          <Button
                            type="link"
                            onClick={() => handEditDep(record)}
                            class={btnPagging}
                          >
                            编辑
                          </Button>
                          <Button
                            type="text"
                            onClick={() => handDeleteDep(record)}
                            danger
                            class={btnPagging}
                          >
                            删除
                          </Button>
                        </>
                      ) : (
                        <div>{record[column.dataIndex]}</div>
                      );
                    },
                  }}
                </Table>
              );
            },
          }}
        </GlContentHeader>
      </>
    );
  },
});

export default postManage;