<template>
  <a-list-layout ref="pageRef">
    <template #search>
      <pro-query :searchParam="searchParam" @on-search="search"></pro-query>
    </template>
    <!-- 岗位列表 -->
    <pro-table ref="tableRef" :fetch="fetch" :columns="columns" :toolbar="toolbar" :operate="operate"
      :param="state.param" :pagination="pagination"
      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
    </pro-table>
    <save :visible="state.visibleSave" @close="closeSave"></save>
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
  </a-list-layout>
</template>

<script>
import save from './modal/save.vue';
import edit from './modal/edit.vue';
import {
  message,
  Modal as modal
} from '@hwork/ant-design-vue';
import {
  ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import {
  page,
  remove,
  removeBatch
} from "@/api/wms/skuCategory";
import {
  reactive,
  createVNode,
  ref
} from 'vue';

const removeKey = "remove";
const removeBatchKey = "removeBatch";

export default {
  name: "SkuCategory",
  components: {
    save,
    edit,

  },
  setup() {

    const tableRef = ref();

    /// 列配置
    const columns = [
    {
      dataIndex: "index",
      key: "index",
      title: "序号",
      width: 60,
      fixed: 'left',
      align: 'center'
    },
    {
      dataIndex: "categoryCode",
      key: "categoryCode",
      title: "种类编号",
      width: 140,
      defaultSortOrder: 'ascend',
      sorter: (a, b) => a.categoryCode - b.categoryCode,
      showSearch: true
    },
    {
      dataIndex: "categoryName",
      key: "categoryName",
      title: "种类名称",
      width: 120,
      showSearch: true
    },
    {
      dataIndex: "categoryDesc",
      key: "categoryDesc",
      title: "种类描述",
      width: 120,
      showSearch: true
    },
    {
      dataIndex: "treeLevel",
      key: "treeLevel",
      title: "层级",
      width: 100,
      showSearch: true
    },
    {
      dataIndex: "treeCode",
      key: "treeCode",
      title: "编号",
      width: 100,
      showSearch: true
    },
    {
      dataIndex: "isActive",
      key: "isActive",
      title: "是否有效",
      width: 100,
      dictionary: {
        type: 'tag',
        code: 'isActive'
      },
    },

    {
      dataIndex: "createBy",
      key: "createBy",
      title: "录入人",
      width: 100,
    },
    {
      dataIndex: "createTime",
      key: "createTime",
      title: "录入时间",
      width: 200,
    },
    {
      dataIndex: "updateBy",
      key: "updateBy",
      title: "更新人",
      width: 100,
    },
    {
      dataIndex: "updateTime",
      key: "updateTime",
      title: "更新时间",
      width: 200,
    },
    {
      dataIndex: "remark",
      key: "remark",
      title: "备注",
      width: 100,
    },
    ];

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

    /// 删除配置
    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: "删除失败",
                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:skuCategory:add',
      icon: 'PlusOutlined',
      event: function () {
        state.visibleSave = true
      }
    },
    {
      label: "删除",
      code: 'wms:skuCategory:remove',
      icon: 'DeleteOutlined',
      danger: true,
      event: function () {
        removeBatchMethod(state.selectedRowKeys)
      },
    },
    ];

    /// 行操作
    const operate = [
      // { label: "查看", event: function (record) { state.visibleInfo = true, state.recordInfo = record }},
      {
        label: "修改",
        code: 'wms:skuCategory:edit',
        event: function (record) {
          state.visibleEdit = true, state.recordEdit = record
        }
      },
      {
        label: "删除",
        code: 'wms:skuCategory:delete',
        isDel: true,
        event: function (record) {
          removeMethod(record)
        }
      },
    ];

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

    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      visibleEdit: false,
      recordEdit: {},
    })

    const searchParam = [{
      key: "categoryCode",
      type: "input",
      label: "种类编号"
    },
    {
      key: "categoryName",
      type: "input",
      label: "种类名称"
    },
    ]

    const search = function (value) {
      state.param = value
      tableRef.value.reload()
    }

    const closeSave = function () {
      state.visibleSave = false
      tableRef.value.reload()
    }

    const closeEdit = function () {
      state.visibleEdit = false
      tableRef.value.reload()
    }


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

    return {
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,

      closeSave,
      closeEdit,

      tableRef
    };
  },
};
</script>
