<template>
  <a-list-layout ref="pageRef">
    <template #search>
      <pro-query :searchParam="searchParam" @on-search="search"></pro-query>
    </template>
    <pro-table
      rowKey="id"
      ref="tableRef"
      :fetch="fetch"
      :columns="columns"
      :toolbar="toolbar"
      :operate="operate"
      :param="state.param"
      :pagination="pagination"
      :row-selection="{
        selectedRowKeys: state.selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
    </pro-table>
  </a-list-layout>
  <a-modal v-model:open="visible" :footer="null" title="查看详情">{{text}}</a-modal>
</template>
<script>
import { message, Modal as modal } from "@hwork/ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import {
  reActivate,
  page,
  remove,
  cancel,
  removeBatch,
} from "@/api/wms/request";
import { reactive, createVNode, ref } from "vue";
const reActivateKey = "reActivate";
const removeKey = "remove";
const cancelKey = "cancel";
const removeBatchKey = "removeBatch";

export default {
  name: "WmsRequestIndex",
  components: {},

  setup() {
    const tableRef = ref();
    const text = ref('')
    const visible = ref(false)
    const columns = [
      {
        dataIndex: "index",
        key: "index",
        title: "序号",
        width: 60,
        fixed: 'left',
        align: 'center'
      },
      {
        dataIndex: "requestCode",
        key: "requestCode",
        title: "请求编号",
        width: 150,
        showSearch: true,
      },
      {
        dataIndex: "status",
        key: "status",
        title: "状态",
        width: 100,
        dictionary: {
          type: "tag",
          code: "TaskStatus",
        },
        showSearch: true,
      },
      {
        dataIndex: "paramType",
        key: "paramType",
        title: "请求类型",
        width: 150,
        showSearch: true,
      },
      {
        dataIndex: "processClass",
        key: "processClass",
        title: "处理类",
        width: 160,
        showSearch: true,
      },
      {
        dataIndex: "requestDate",
        key: "requestDate",
        title: "请求时间",
        width: 180,
      },
      {
        dataIndex: "respondDate",
        key: "respondDate",
        title: "响应时间",
        width: 180,
      },
      {
        dataIndex: "request",
        key: "request",
        title: "请求数据",
        width: 900,
        showSearch: true,
      },
      {
        dataIndex: "response",
        key: "response",
        title: "响应信息",
        width: 900,
        showSearch: true,
      },
      {
        dataIndex: "createBy",
        key: "createBy",
        title: "录入人",
        width: 120,
      },
      {
        dataIndex: "createTime",
        key: "createTime",
        title: "录入时间",
        width: 200,
      },
      {
        dataIndex: "updateBy",
        key: "updateBy",
        title: "修改人",
        width: 120,
      },
      {
        dataIndex: "updateTime",
        key: "updateTime",
        title: "修改时间",
        width: 200,
      },
      {
        dataIndex: "preRequestCode",
        key: "preRequestCode",
        title: "前置请求编号",
        width: 120,
      },
      {
        dataIndex: "priority",
        key: "priority",
        title: "优先级",
        width: 120,
        dictionary: {
          type: "tag",
          code: "priority",
        },
      },
      {
        dataIndex: "remark",
        key: "remark",
        title: "备注",
        width: 300,
      },
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await page(param);
      console.log("response", response);
      return {
        total: response.data.total,
        data: response.data.record,
      };
    };

    //重置配置
    const reActivateMethod = (record) => {
      modal.confirm({
        title: "您是否确认重置该请求?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          message.loading({
            content: "重置中...",
            key: reActivateKey,
          });
          reActivate({
            id: record.id,
            //"status": record.status,
            // "processClass": record.processClass,
            //data: record.data,
          }).then((response) => {
            if (response.success) {
              message.success({
                content: "重置成功",
                key: reActivateKey,
                duration: 1,
              });
              tableRef.value.reload();
            } else {
              message.error({
                content: "重置失败:" + response.msg,
                key: reActivateKey,
                duration: 3,
              });
            }
          });
        },
      });
    };

    //取消配置
    const cancelMethod = (record) => {
      const confirmMsg = modal.confirm({
        title: "您是否确认取消该请求?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          message.loading({
            content: "取消中...",
            key: cancelKey,
          });
          cancel({
            id: record.id,
            status: record.status,
          }).then((response) => {
            if (response.success) {
              message.success({
                content: "取消成功",
                key: cancelKey,
                duration: 1,
              });
              tableRef.value.reload();
            } else {
              message.destroy();
              message.error({
                message: "请求取消失败",
                description: response.msg,
              });
            }
          });
          confirmMsg.destroy();
        },
      });
    };
    // 删除数据
    const removeMethod = (record) => {
      modal.confirm({
        title: "您是否确定要删除?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          message.loading({
            content: "提交中...",
            key: removeKey,
          });
          remove({
            id: record.id,
          }).then((response) => {
            if (response.success) {
              message
                .success({
                  content: "删除成功",
                  key: removeKey,
                  duration: 1,
                })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: response.msg,
                key: removeKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    // 批量删除
    const removeBatchMethod = (ids) => {
      modal.confirm({
        title: "您是否确定要删除?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          message.loading({
            content: "提交中...",
            key: removeBatchKey,
          });
          removeBatch({
            ids: ids,
          }).then((response) => {
            if (response.success) {
              message
                .success({
                  content: "删除成功",
                  key: removeBatchKey,
                  duration: 1,
                })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: "删除失败",
                key: removeBatchKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    /// 工具栏
    const toolbar = [
      {
        label: "删除",
        code: "wms:request:delete",
        event: function () {
          removeBatchMethod(state.selectedRowKeys);
        },
        icon: 'DeleteOutlined',
        danger: true,
      },
    ];

    /// 行操作
    const operate = [
      {
        label: "删除",
        code: "wms:request:delete",
        event: function (record) {
          removeMethod(record);
        },
      },
      {
        label: "重置",
        code: "wms:request:reactivate",
        isRes: true,
        event: function (record) {
          reActivateMethod(record);
        },
      },
      {
        label: "取消",
        code: "wms:request:cancel",
        isRes: true,
        event: function (record) {
          cancelMethod(record);
        },
      },
      {
        label: "查看",
        event: function (record) {
          // alert("查看详情:" + JSON.stringify(record));
          text.value = JSON.stringify(record)
          visible.value = true
        },
      },
    ];

    const pagination = {
      pageNum: 1,
      pageSize: 20,
      showSizeChanger: true, // 显示可改变每页条数
      pageSizeOptions: ["10", "20", "50", "100"], // 每页条数选项设置
      showTotal: (total) => `共 ${total} 条记录`, // 显示总条数
      showSizeChange: (current, pageSize) => (this.pageSize = pageSize), // 改变每页条数时更新显示
    };

    const state = reactive({
      selectedRowKeys: [],
      param: {},
    });

    const searchParam = [
      {
        key: "request",
        type: "input",
        label: "请求消息",
      },
      {
        key: "response",
        type: "input",
        label: "响应消息",
      },
      {
        key: "requestCode",
        type: "input",
        label: "请求编号",
      },
      {
        key: "preRequestCode",
        type: "input",
        label: "前置请求编号",
      },
    ];

    const search = function (value) {
      console.log("search", value);
      state.param = value;
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    return {
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,
      tableRef,
      visible,
      text
    };
  },
};
</script>
