<template>
  <a-modal :open="visible" title="托盘信息" cancelText="取消" okText="关闭" @ok="submit" @cancel="cancel" :width='1200'>
    <div>
      <page-layout>
        <div style="background-color: #ececec; padding: 20px">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-card title="托盘属性" :bordered="false">
                <p>库存类别：{{getEnumText('StorageTypes', state.palletInfo.storageType)}}</p>
                <p>托盘号：{{state.palletInfo.palletCode}}</p>
                <p>
                  托盘高矮-大小：{{getEnumText('PalletHighTypes', state.palletInfo.palletType)}}-{{getEnumText('PalletSizeTypes', state.palletInfo.sizeType)}}
                </p>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card title="位置属性" :bordered="false">
                <p>仓库号：{{state.palletInfo.houseCode}}</p>
                <p>位置区域：{{getEnumText('PalletAreaTypes', state.palletInfo.palletArea)}}</p>
                <p>位置编号：{{state.palletInfo.locCode}}</p>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card title="状态属性" :bordered="false">
                <p>满盘标记：{{state.palletInfo.fullFlag}}</p>
                <p>任务标记：{{state.palletInfo.jobFlag}}</p>
                <p>备注信息：{{state.palletInfo.remark}}</p>
              </a-card>
            </a-col>
          </a-row>
        </div>
        <a-row :gutter="[0, 0]">
          <a-col style="width: 100%;">
            <pro-table  ref="tableChilrenRef" rowKey="id" :fetch="fetch" :columns="columns"
              :operate="operate" :param="state.param" :pagination="pagination">
            </pro-table>
          </a-col>
        </a-row>
      </page-layout>
    </div>
  </a-modal>
</template>
<script>
  import {
    message,
    Modal as modal
  } from '@hwork/ant-design-vue';
  import {
    defineComponent,
    reactive,
    createVNode,
    ref,
    toRaw,
    watch,
  } from "vue";
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    list,
    page,
    remove,
    removeBatch
  } from "@/api/wms/palletDetail";
  import {
    getPalletByCode
  } from "@/api/wms/pallet";
  import {
    getEnumText
  } from '@/tools/helper'
  const removeKey = "remove";
  const removeBatchKey = "removeBatch";
  export default defineComponent({
    props: {
      visible: {
        type: Boolean,
      },
      palletCode: {
        type: String,
      },
    },
    emit: ["close"],
    //页面更新时调用，发生在数据更新之前，页面上的数据还是旧的
    beforeUpdate() {
      setInterval(() => {
        this.count++;
      }, 1000);
    },
    setup(props, context) {

      const formRef = ref();
      const state = reactive({
        param: {
          palletCode: "",
        },
        palletInfo: {}
      });
      watch(props, (props) => {
        console.log("props.palletCode", props.palletCode)
        if (props.palletCode && props.palletCode.length > 0) {
          console.log("查询托盘信息")
          getPallet(props.palletCode)
          state.param.palletCode = props.palletCode;
        }
      });
      const submit = (e) => {
        context.emit("close");
      };

      const cancel = (e) => {
        context.emit("close");
      };

      const columns = [{
        dataIndex: "index",
        key: "index",
        title: "序号",
        width: 60,
        fixed: 'left',
        align: 'center'
      },
      {
          dataIndex: "palletCode",
          key: "palletCode",
          title: "托盘号",
          width: 100,
        },
        {
          dataIndex: "skuCode",
          key: "skuCode",
          title: "物料编号",
          width: 100,
        },
        {
          dataIndex: "skuName",
          key: "skuName",
          title: "物料描述",
          width: 100,
        },
        {
          dataIndex: "skuType",
          key: "skuType",
          title: "物料类型",
          width: 100,
        },
        {
          dataIndex: "batch",
          key: "batch",
          title: "批次",
          width: 100,
        },
        {
          dataIndex: "serial",
          key: "serial",
          title: "序列号",
          width: 120,
        },
        {
          dataIndex: "master",
          key: "master",
          title: "货主",
          width: 100,
        },
        {
          dataIndex: "producer",
          key: "producer",
          title: "厂家",
          width: 100,
        },
        {
          dataIndex: "customer",
          key: "customer",
          title: "客户",
          width: 100,
        },
        {
          dataIndex: "produceDate",
          key: "produceDate",
          title: "生产日期",
          width: 180,
        },
        {
          dataIndex: "overdue",
          key: "overdue",
          title: "过期日期",
          width: 180,
        },
        {
          dataIndex: "skuQty",
          key: "skuQty",
          title: "物料数量",
          width: 100,
        },
        {
          dataIndex: "lockQty",
          key: "lockQty",
          title: "锁定数量",
          width: 100,
        },
        {
          dataIndex: "baseUnit",
          key: "baseUnit",
          title: "物流单位",
          width: 100,
        },
        {
          dataIndex: "convertQty",
          key: "convertQty",
          title: "统计数量",
          width: 100,
        },
        {
          dataIndex: "primaryUnit",
          key: "primaryUnit",
          title: "统计单位",
          width: 100,
        },
        {
          dataIndex: "spInv",
          key: "spInv",
          title: "特殊库存",
          width: 100,
          dictionary: {
            type: 'tag',
            code: 'spInv'
          },
        },
        {
          dataIndex: "invType",
          key: "invType",
          title: "库存类型",
          width: 100,
        },
        {
          dataIndex: "qualityStatus",
          key: "qualityStatus",
          title: "质量状态",
          width: 100,
          dictionary: {
            type: 'tag',
            code: 'qualityStatus'
          }
        },
        {
          dataIndex: "remark",
          key: "remark",
          title: "备注",
          width: 100,
        },
        {
          dataIndex: "createTime",
          key: "createTime",
          title: "创建时间",
          width: 180,
        },
        {
          dataIndex: "updateTime",
          key: "updateTime",
          title: "修改时间",
          width: 180,
        },
      ];

      /// 数据来源 [模拟]
      const fetch = async (param) => {
        console.log("子表查询" + JSON.stringify(param))
        if (param.palletCode && param.palletCode.length > 0) {
          var response = await page(param);
          // console.log("子表查询response" + JSON.stringify(response))
          return {
            total: response.data.total,
            data: response.data.record,
          };
        } else {
          console.log("子表查询空查询")
          return {
            total: 0,
            data: [],
          };
        }
      };

      const getPallet = async (palletCode) => {
        var response = await getPalletByCode({
          'palletCode': palletCode
        });
        console.log("查询托盘信息 response" + JSON.stringify(response))
        var pallet = response.data;
        state.palletInfo = pallet;
      }
      const operate = [];

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

      const searchParam = [{
        key: "palletCode",
        type: "input",
        label: "托盘号"
      }]

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

      }

      return {
        state,
        submit,
        cancel,
        fetch,
        search,
        columns,
        operate,
        pagination,
        searchParam,
        getPallet,
        getEnumText

      };
    },
  });
</script>
<style>
</style>
