<template>
  <a-modal :open="visible" title="查看出库拣选" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel" :width='2000'
    footer="" wrapClassName="full-modal">
    <div>
      <page-layout>
        <a-row :gutter="[0, 0]">
          <a-col :span="24">
            <a-card>
              <pro-query :searchParam="searchParam" @on-search="search"></pro-query>
              <pro-table  visible="visible" ref="tableRef" rowKey="id" :fetch="fetch"
                :columns="columns" :toolbar="toolbar" :operate="operate" :param="state.param" :pagination="pagination"
                :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
              </pro-table>
            </a-card>
          </a-col>
        </a-row>
      </page-layout>
      <save :visible="state.visibleSave" @close="closeSave" :record="state.recordSave"></save>
      <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
    </div>
  </a-modal>
</template>
<script>
  import save from './model/save.vue';
  import edit from './model/edit.vue';
  import {
    message,
    Modal as modal,
  } from '@hwork/ant-design-vue';

  import {
    defineComponent,
    reactive,
    ref,
    toRaw,
    watch,
    createVNode
  } from "vue";

  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';

  import {
    page,
    remove,
    removeBatch
  } from "@/api/wms/checkPlt";

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


  export default defineComponent({
    props: {
      visible: {
        type: Boolean,

      },
      record: {

        type: Object,
      }
    },
    components: {
      save,
      edit,
    },


    emit: ["close"],
    setup(props, context) {


      const tableRef = ref()

      const formRef = ref();

      const formState = reactive({});



      watch(props, (props) => {
        state.param.itemCode = props.record.itemCode;
        state.outBillDetail = props.record; //主表信息
        console.log("子表watch" + JSON.stringify(props))
        console.log("state.outBillDetail" + JSON.stringify(state.outBillDetail))
      })



      const columns = [{
        dataIndex: "index",
        key: "index",
        title: "序号",
        width: 60,
        fixed: 'left',
        align: 'center'
      },
      {
          dataIndex: "invoiceCode",
          key: "invoiceCode",
          title: "盘点单据号",
          width: 200,
        },
        {
          dataIndex: "palletCode",
          key: "palletCode",
          title: "托盘号",
          width: 150,

        },
        {
          dataIndex: "skuCode",
          key: "skuCode",
          title: "SKU编号",
          width: 150,
        },
        {
          dataIndex: "skuName",
          key: "skuName",
          title: "sku描述",
          width: 200,
        },
        {
          dataIndex: "batch",
          key: "batch",
          title: "批次号",
          width: 100,
        },

        {
          dataIndex: "serial",
          key: "serial",
          title: "序列号",
          width: 100,
        },
        {
          dataIndex: "spInv",
          key: "spInv",
          title: "特殊库存",
          width: 100,
          dictionary: {
            type: 'tag',
            code: 'spInv'
          }
        },
        {
          dataIndex: "invType",
          key: "invType",
          title: "库存类型",
          width: 100,
        },
        {
          dataIndex: "qualityFlag",
          key: "qualityFlag",
          title: "质量标志",
          width: 100,
          dictionary: {
            type: 'tag',
            code: 'qualityFlag'
          }

        },
        {
          dataIndex: "qty",
          key: "qty",
          title: "数量",
          width: 100,
        },
        {
          dataIndex: "actQty",
          key: "actQty",
          title: "实际数量",
          width: 100,
        },
        {
          dataIndex: "unit",
          key: "unit",
          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: 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:checkPallet:add",
          event: function() {
            state.visibleSave = true, state.recordSave = props.record
          }
        },
        {
          label: "删除",
          code: "wms:checkPallet:removeBatch",
          event: function() {
            removeBatchMethod(state.selectedRowKeys)
          },
          type: 'danger'
        },
      ];

      /// 行操作
      const operate = [{
          label: "修改",
          code: "wms:checkPallet:edit",
          event: function(record) {
            state.visibleEdit = true, state.recordEdit = record
          }
        },
        {
          label: "删除",
          code: "wms:checkPallet:remove",
          event: function(record) {
            removeMethod(record)
          }
        },
      ];

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

      const state = reactive({
        selectedRowKeys: [],
        param: {
          projectId: "",
          projectName: "",
          planId: "",
          planName: ""
        },
        visibleEdit: false,
        visibleSave: false,
        recordEdit: {},
        recordSave: {},

      });

      const searchParam = [{
          key: "billsCode",
          type: "input",
          label: "单据号"
        },
        {
          key: "itemCode",
          type: "input",
          label: "明细号"
        },
      ]

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

      const formRules = {

      };

      const editKey = "add";

      const submit = (e) => {
        formRef.value
        .validate()
        .then(() => {
            message.loading({
              content: '提交中...',
              key: editKey
            });
            edit(toRaw(formState)).then((response) => {
              if (response.success) {
                message.success({
                  content: '保存成功',
                  key: editKey,
                  duration: 1
                }).then(() => {
                  cancel();
                });
              } else {
                message.error({
                  content: response.msg,
                  key: editKey,
                  duration: 1
                }).then(() => {
                  // cancel();
                });
              }
            });
          })
          .catch(error => {
            console.log('error', error);
          });
      };

      const cancel = (e) => {
        // formRef.value.resetFields();
        context.emit("close", false);
      };

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

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

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


      const closeInfo = function() {
        state.visibleInfo = false
        tableRef.value.reload()
      }

      return {


        submit,
        cancel,
        formRef,
        formState,
        formRules,
        state,
        fetch,
        toolbar,
        columns,
        operate,
        pagination,
        onSelectChange,
        search,
        closeSave,
        closeEdit,
        tableRef,
        searchParam,
        labelCol: {
          span: 8,

        },
        wrapperCol: {
          span: 12,
        },
      };
    },

  });
</script>
/* <style>
  .full-modal {
    .ant-modal {
      max-width: 80%;
      max-height: 70%;
      box-align: center;
      /* top: 0; */
      /* padding-bottom: 0; */
      /* margin: 0; */
    }

    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(89vh);
    }

    .ant-modal-body {
      flex: 1;
    }
  }
</style> */
