<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">
    </pro-table>
  </a-list-layout>
</template>
<script>
import {
  message,
  Modal as modal
} from '@hwork/ant-design-vue';
import {
  ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import {
  page,
  remove,
  removeBatch
} from "@/api/wms/palletLog";
import {
  reactive,
  createVNode,
  ref,
} from 'vue';
const removeKey = "remove";
const removeBatchKey = "removeBatch";

export default {
  components: {},

  setup() {

    const tableRef = ref()

    const columns = [    
      {
      dataIndex: "index",
      key: "index",
      title: "序号",
      width: 60,
      fixed: 'left',
      align: 'center'
    },{
      dataIndex: "palletCode",
      key: "palletCode",
      title: "托盘号",
      width: 100,
      showSearch: true,
    },
    // {
    //   dataIndex: "invoiceCode",
    //   key: "invoiceCode",
    //   title: "单据号",
    //   width: 200,
    //   showSearch: true,
    // },
    {
      dataIndex: "taskCode",
      key: "taskCode",
      title: "任务号",
      width: 120,
      showSearch: true,
    },
    {
      dataIndex: "directFlag",
      key: "directFlag",
      title: "方向标志",
      width: 100,
      dictionary: {
        type: 'tag',
        code: 'DirectFlag'
      }
    },
    {
      dataIndex: "skuType",
      key: "skuType",
      title: "物料类型",
      width: 100,
    },
    {
      dataIndex: "skuCode",
      key: "skuCode",
      title: "物料编号",
      width: 160,
      showSearch: true,
    },
    {
      dataIndex: "skuName",
      key: "skuName",
      title: "物料描述",
      width: 150,
      showSearch: true,
    },

    // {
    //   dataIndex: "batch",
    //   key: "batch",
    //   title: "批次",
    //   width: 100,
    //   showSearch: true,
    // },
    // {
    //   dataIndex: "serial",
    //   key: "serial",
    //   title: "序列号",
    //   width: 120,
    //   showSearch: true,
    // },
    // {
    //   dataIndex: "master",
    //   key: "master",
    //   title: "货主",
    //   width: 100,
    //   showSearch: true,
    // },
    // {
    //   dataIndex: "producer",
    //   key: "producer",
    //   title: "厂家",
    //   width: 100,
    //   showSearch: true,
    // },
    // {
    //   dataIndex: "customer",
    //   key: "customer",
    //   title: "客户",
    //   width: 100,
    //   showSearch: true,
    // },
    // {
    //   dataIndex: "produceDate",
    //   key: "produceDate",
    //   title: "生产日期",
    //   width: 180,
    // },
    // {
    //   dataIndex: "overdue",
    //   key: "overdue",
    //   title: "过期日期",
    //   width: 180,
    // },
    {
      dataIndex: "skuQty",
      key: "skuQty",
      title: "物料数量",
      align: 'right',
      width: 120,
      showSearch: true,
    },
    {
      dataIndex: "baseUnit",
      key: "baseUnit",
      title: "物流单位",
      width: 120,
      showSearch: true,
    },
    // {
    //   dataIndex: "convertQty",
    //   key: "convertQty",
    //   title: "换算数量",
    //   width: 120,
    //   showSearch: true,
    // },
    // {
    //   dataIndex: "primaryUnit",
    //   key: "primaryUnit",
    //   title: "换算单位",
    //   width: 120,
    //   showSearch: true,
    // },
    // {
    //   dataIndex: "spInv",
    //   key: "spInv",
    //   title: "特殊库存",
    //   width: 100,
    //   dictionary: {
    //     type: 'tag',
    //     code: 'spInv'
    //   },
    // },
    // {
    //   dataIndex: "invType",
    //   key: "invType",
    //   title: "库存类型",
    //   width: 120,
    // },
    // {
    //   dataIndex: "qualityStatus",
    //   key: "qualityStatus",
    //   title: "质量状态",
    //   width: 100,
    //   dictionary: {
    //     type: 'tag',
    //     code: 'qualityStatus'
    //   },
    // },
    // {
    //   dataIndex: "weight",
    //   key: "weight",
    //   title: "重量",
    //   width: 100,
    //   showSearch: true,
    // },
    // {
    //   dataIndex: "weightUnit",
    //   key: "weightUnit",
    //   title: "重量单位",
    //   width: 120,
    //   showSearch: true,
    // },
    {
      dataIndex: "sourceLoc",
      key: "sourceLoc",
      title: "源位置",
      width: 170,
      showSearch: true,
    },
    {
      dataIndex: "targetLoc",
      key: "targetLoc",
      title: "目标位置",
      width: 170,
      showSearch: true,
    },
    // {
    //   dataIndex: "finishDate",
    //   key: "finishDate",
    //   title: "完成时间",
    //   width: 180,
    // },
    // {
    //   dataIndex: "note",
    //   key: "note",
    //   title: "备注"
    // },
    // {
    //   dataIndex: "createBy",
    //   key: "createBy",
    //   title: "录入人",
    //   width: 120,
    //   showSearch: true,
    // },
    {
      dataIndex: "createTime",
      key: "createTime",
      title: "录入时间",
      width: 200,
    },
    // {
    //   dataIndex: "updateBy",
    //   key: "updateBy",
    //   title: "修改人",
    //   width: 120,
    // },
    // {
    //   dataIndex: "updateTime",
    //   key: "updateTime",
    //   title: "修改时间",
    //   width: 200,
    // },
    {
      dataIndex: "remark",
      key: "remark",
      title: "备注",
      width: 250,
    },
    ];


    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await page(param);
      console.log("response", response)
      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: 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: remove,
        event: function () {
          removeBatchMethod(state.selectedRowKeys)
        },
        type: 'danger'
      },
    ];

    /// 行操作
    const operate = [
      //   {
      //   label: "删除",
      //   code: "wms:palletLog:remove",
      //   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) // 改变每页条数时更新显示
    };

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

    //界面头部-查询框
    const searchParam = [{
      key: "skuType",
      type: "select",
      label: "物料类型",
      options: [{
        value: '包装箱',
        text: '包装箱',
      }, {
        value: '观察窗',
        text: '观察窗',
      }, {
        value: '台面',
        text: '台面',
      }, {
        value: '手把',
        text: '手把',
      }, {
        value: '前板',
        text: '前板',
      }, {
        value: '内衬',
        text: '内衬',
      }, {
        value: 'KTP001',
        text: '空托盘',
      }]
    },]

    const search = function (value) {
      console.log("主表查询" + JSON.stringify(value))
      console.log(value)
      state.param = value
      tableRef.value.reload()

    }

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

    return {
      state,
      fetch,
      search,
      searchParam, // 查询参数
      toolbar,
      columns,
      operate,
      pagination,
      onSelectChange,
      tableRef,
    };

  }
}
// }
</script>
