<template>
    <a-list-layout ref="pageRef">
      <!-- 列表 -->
      <pro-table rowKey="id" ref="tableRef" :fetch="fetch" :columns="columns" :toolbar="toolbar" :operate="operate"
        :param="state.param" :pagination="pagination" :hasSearch="false"
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
      </pro-table>
      <!-- 托盘明细：改为抽屉承载，统一交互与高度管理 -->
      <a-drawer
        :visible="state.visiblePalletDetail"
        :width="720"
        title="托盘明细"
        destroyOnClose
        @close="state.visiblePalletDetail = false"
      >
        <viewPalletDetail
          :visible="true"
          :record="state.recordPalletDetail"
          :projectReload="projectReload"
          @close="state.visiblePalletDetail = false"
        />
      </a-drawer>


    </a-list-layout>
    <save :visible="state.visibleSave" @close="closeSave"></save>
    <checkOut :visible="state.visibleCheck" :palletInfo="state.checkOutPalletInfo" @close="closeCheck"></checkOut>
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
    <child @fatherMethod="fatherMethod"></child>
</template>
<script>
import save from './modal/save.vue';
import edit from './modal/edit.vue';
import checkOut from './modal/checkOut.vue';
import palletDetail from './modal/palletDetail.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/pallet";
import {
  reactive,
  createVNode,
  ref,
} from 'vue';
const removeKey = "remove";
const removeBatchKey = "removeBatch";
const showCheckOutModelKey = "showCheckOutModel";

export default {
  components: {
    save,
    edit,
    checkOut,
    viewPalletDetail: palletDetail,

  },
  setup() {

    const tableRef = ref()

    const switchFormat = {
      yes: true,
      no: false,
      event: function (value, record) {
        record.enable = !record.enable;
        return value;
      }
    }

    const columns = [{
      dataIndex: "index",
      key: "index",
      title: "序号",
      width: 60,
      fixed: 'left',
      align: 'center'
    },
    {
      dataIndex: "palletCode",
      key: "palletCode",
      title: "托盘号",
      width: 120,
      showSearch: true,
    },
    {
      dataIndex: "palletType",
      key: "palletType",
      title: "托盘类型",
      width: 120,
    },
    {
      dataIndex: "sizeType",
      key: "sizeType",
      title: "托盘大小",
      width: 120,
    },
    {
      dataIndex: "fullFlag",
      key: "fullFlag",
      title: "满盘标志",
      width: 120,
      dictionary: {
        type: 'tag',
        code: 'FullFlag'
      }
    },
    {
      dataIndex: "locCode",
      key: "locCode",
      title: "托盘位置",
      width: 150,
      showSearch: true,
    },
    {
      dataIndex: "status",
      key: "status",
      title: "托盘状态",
      width: 100,
    },
    {
      dataIndex: "jobFlag",
      key: "jobFlag",
      title: "任务标志",
      width: 100
    },
    {
      dataIndex: "createBy",
      key: "createBy",
      title: "录入人",
      width: 150,
    },
    {
      dataIndex: "createTime",
      key: "createTime",
      title: "录入时间",
      width: 180,
    },
    {
      dataIndex: "updateBy",
      key: "updateBy",
      title: "修改人",
      width: 150,
    },
    {
      dataIndex: "updateTime",
      key: "updateTime",
      title: "修改时间",
      width: 180,
    },
    {
      dataIndex: "remark",
      key: "remark",
      title: "备注",
      width: 200,
    },
    ];


    /// 数据来源 [模拟]
    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 showPickOutModel = () => {
      //获取选中的行数据
      if (state.selectedRowKeys.length == 0) {
        message.error({
          content: "请想选择需要抽检出库的托盘",
          key: showCheckOutModelKey,
          duration: 2
        })
        return;
      }
      if (state.selectedRowKeys.length > 1) {
        message.error({
          content: "一次操作只能抽检出一个托盘",
          key: showCheckOutModelKey,
          duration: 2
        })
        return;
      }
      state.checkOutPalletInfo = state.selectedRows[0]
      if (state.checkOutPalletInfo.locCode.length < 9) {
        message.error({
          content: "托盘所在位置为【" + state.checkOutPalletInfo.locCode + "】禁止抽检出库，只有货位上的托盘允许",
          key: showCheckOutModelKey,
          duration: 2
        })
        return;
      }
      if (state.checkOutPalletInfo.jobFlag.length > 0) {
        message.error({
          content: "托盘存在未完成的任务【" + state.checkOutPalletInfo.jobFlag + "】请检查",
          key: showCheckOutModelKey,
          duration: 2
        })
        return;
      }

      state.visibleCheck = true
    }


    /// 工具栏
    const toolbar = [
      // {
      //   label: "新增",
      //   code: "wms:pallet:add",
      //   event: function() {
      //     state.visibleSave = true
      //   }
      // },
      // {
      //   label: "删除",
      //   code: "wms:pallet:removeBatch",
      //   event: function() {
      //     removeBatchMethod(state.selectedRowKeys)
      //   },
      //   type: 'danger'
      // },
      // {
      //   label: "抽检出库",
      //   code: "wms:pallet:checkOut",
      //   event: function() {
      //     showPickOutModel()
      //   },
      //   type: 'danger'
      // },
    ];

    /// 行操作
    const operate = [{
      label: "查看明细",
      event: function (record) {
        state.visiblePalletDetail = true, state.recordPalletDetail = record
      }
    },
    {
      label: "删除",
      code: "wms:pallet:remove",
      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) // 改变每页条数时更新显示
    }

    const state = reactive({
      selectedRowKeys: [],
      selectedRows: [],
      param: {},
      visibleEdit: false,
      visibleSave: false,
      visibleCheck: false,
      visiblePalletDetail: false,
      recordPalletDetail: {},
      recordEdit: {},
      checkOutPalletInfo: {}, //需要抽检出库的托盘信息
    });

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

    }

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

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

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

    const closeCheck = function () {
      state.visibleCheck = false
      tableRef.value.reload()
    }


    return {
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      closeSave,
      closeEdit,
      closeCheck,
      pagination,
      onSelectChange,
      tableRef,
    };

  }
}
</script>
