<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 {
    SearchOutlined,
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    message,
    Modal as modal
  } from '@hwork/ant-design-vue';
  import {
    page,
    remove,
    change,
    removeBatch
  } from "@/api/wms/sku";
  import {
    reactive,
    createVNode,
    ref
  } from 'vue';

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

  export default {
    components: {
      save,
      edit,
      ExclamationCircleOutlined
      // SearchOutlined,
    },
    setup() {

      const tableRef = ref();


      const switchFormat = {
        yes: true,
        no: false,
        event: function(value, record) {
          record.useFlag = record.useFlag == false ? true : false;
          change({
            "id": record.id,
            "useFlag": record.useFlag
          })
          tableRef.value.reload()
          return value;
        }
      }

      const columns = [
        {
          dataIndex: "index",
          key: "index",
          title: "序号",
          width: 60,
          fixed: 'left',
          align: 'center'
        },
        {
          dataIndex: "skuCode",
          key: "skuCode",
          title: "物料编号",
          width: 150,
          // defaultSortOrder: 'ascend',
          // sorter: true,
          showSearch: true
        },
        {
          dataIndex: "skuName",
          key: "skuName",
          title: "物料名称",
          width: 180,
          showSearch: true
        },
        // {
        //   dataIndex: "ext1",
        //   key: "ext1",
        //   title: "颜色",
        //   width: 120,
        //   showSearch: true
        //   // defaultSortOrder: 'ascend',
        //   // sorter: (a, b) => a.ext1 - b.ext1,
        // },
        // {
        //   dataIndex: "ext2",
        //   key: "ext2",
        //   title: "转速",
        //   width: 120,
        //   showSearch: true
        //   // defaultSortOrder: 'ascend',
        //   // sorter: (a, b) => a.ext2 - b.ext2,
        // },
        // {
        //   dataIndex: "ext3",
        //   key: "ext3",
        //   title: "配置",
        //   width: 300,
        //   showSearch: true
        //   // defaultSortOrder: 'ascend',
        //   // sorter: (a, b) => a.ext2 - b.ext2,
        // },
        /* {
          dataIndex: "barCode",
          key: "barCode",
          title: "条码",
          width: 250,
        }, */
        /* {
          dataIndex: "abc",
          key: "abc",
          title: "ABC分类",
          width: 100,
          dictionary: {
            type: 'tag',
            code: 'abc'
          },
        }, */
        {
          dataIndex: "categoryCode",
          key: "categoryCode",
          title: "种类编号",
          width: 120,
          showSearch: true
        },
        {
          dataIndex: "categoryName",
          key: "categoryName",
          title: "种类名称",
          width: 120,
          showSearch: true
        },
        {
          dataIndex: "baseUnit",
          key: "baseUnit",
          title: "库存单位",
          width: 120,
          showSearch: true
        },
        /* {
           dataIndex: "primaryUnit",
           key: "primaryUnit",
           title: "换算单位",
           width: 100,
         }, */
        /*  {
            dataIndex: "rate",
            key: "rate",
            title: "换算率",
            type: "number",
            width: 100,
            defaultSortOrder: 'ascend',
            sorter: (a, b) => a.rate - b.rate,
          }, */
        // {
        //   dataIndex: "stackType",
        //   key: "stackType",
        //   title: "垛形",
        //   type: "number",
        //   width: 100,
        //   showSearch: true
        // },

        {
          dataIndex: "fullQty",
          key: "fullQty",
          title: "满盘数量",
          type: "number",
          width: 120,
          align: "right",
          showSearch: true
          // defaultSortOrder: 'ascend',
          // sorter: (a, b) => a.fullQty - b.fullQty,
        },
        /* {
          dataIndex: "expire",
          key: "expire",
          title: "有效期",
          width: 100,
          defaultSortOrder: 'ascend',
          sorter: true,
        },
        {
          dataIndex: "useFlag",
          key: "useFlag",
          title: "使用标志",
          width: 100,
          switch: switchFormat
        }, */

        {
          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) => {
        // debugger
        console.log("param11111")
        // console.log(field)
        var response = await page(param);
        return {
          total: response.data.total,
          data: response.data.record,
        };
      };

      /// 删除配置
      const removeMethod = (record) => {
        message.loading({
          content: "提交中...",
          key: removeKey
        });
        remove({
          "id": record.id
        }).then((response) => {
          if (response.success) {
            message.success({
              content: "删除成功",
              key: removeKey,
              duration: 1
            })
            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
                })
                tableRef.value.reload()
              } else {
                message.error({
                  content: "删除失败",
                  key: removeBatchKey,
                  duration: 1
                })
              }
            })
          }
        });
      }

      /// 工具栏
      const toolbar = [
        {
          label: "新增",
          code: 'wms:sku:add',
          icon: 'PlusOutlined',
          event: function() {
            state.visibleSave = true
          }
        },
        {
          label: "删除",
          code: 'wms:sku:remove',
          icon: 'DeleteOutlined',
          danger: true,
          event: function() {
            removeBatchMethod(state.selectedRowKeys)
          }
        },
      ];

      /// 行操作
      const operate = [{
          label: "修改",
          code: 'wms:sku:edit',
          event: function(record) {
            state.visibleEdit = true, state.recordEdit = record
          }
        },
        {
          label: "删除",
          code: 'wms:sku:delete',
          isDel: true,
          delEvent: function(record) {
            removeMethod(record)
          }
        },
        // {
        //   label: "分配",
        //   isDel: true,
        //   delEvent: 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: "skuCode",
          type: "input",
          label: "物料编号"
        },
        {
          key: "skuName",
          type: "input",
          label: "物料名称"
        },
      ]

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

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

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

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

      return {
        state, // 状态共享
        fetch, // 数据回调
        toolbar, // 工具栏
        columns, // 列配置
        operate, // 行操作
        pagination, // 分页配置

        search,
        searchParam, // 查询参数
        closeSave,
        closeEdit,

        onSelectChange,
        tableRef
      };
    },
  };
</script>
