<template>
  <div class="tenant">
    <!-- <Banner /> -->

    <div style="background: #fff">
      <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-change="handleChange"
      >
        <el-tab-pane label="入库单" name="first"></el-tab-pane>
        <el-tab-pane label="出库单" name="second"></el-tab-pane>
        <el-tab-pane label="调仓单" name="three"></el-tab-pane>
        <el-tab-pane label="盘点单" name="four"></el-tab-pane>
      </el-tabs>
      <byTable
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        highlight-current-row
        :selectConfig="[]"
        :table-events="{
          //element talbe事件都能传
          select: select,
        }"
        :action-list="[]"
        @get-list="getList"
      >
      </byTable>
    </div>
    <el-dialog
      :title="modalType == 'add' ? '良品转次品' : '次品转良品'"
      v-model="dialogVisible"
      width="800"
      v-loading="loading"
    >
      <byForm
        :formConfig="formConfig"
        :formOption="formOption"
        v-model="formData.data"
        :rules="rules"
        ref="byform"
      >
      </byForm>
      <template #footer>
        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('byform')"
          size="large"
          :loading="submitLoading"
        >
          确 定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup>
/* eslint-disable vue/no-unused-components */
import { ElMessage, ElMessageBox } from "element-plus";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { computed, defineComponent, ref, watch } from "vue";
import useUserStore from "@/store/modules/user";
import SelectProduct from "@/components/product/SelectProduct";

const loading = ref(false);
let activeName = ref("first");
const submitLoading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
  },
});
let dialogVisible = ref(false);
let openProduct = ref(false);
const inboundType = [
  {
    label: "手动入库",
    value: "1",
  },
  {
    label: "调仓入库",
    value: "3",
  },
  {
    label: "组合入库",
    value: "6",
  },
  {
    label: "组合拆分入库",
    value: "8",
  },
  {
    label: "到货入库",
    value: "14",
  },
  {
    label: "京东退货入库",
    value: "15",
  },
  {
    label: "到货质检入库",
    value: "19",
  },
];

const outboundType = [
  {
    label: "手动出库",
    value: "2",
  },

  {
    label: "组合出库",
    value: "6",
  },
  {
    label: "组合拆分入库",
    value: "9",
  },
  {
    label: "京东订单出库",
    value: "10",
  },
  {
    label: "调仓出库",
    value: "11",
  },
  {
    label: "销售订单出库",
    value: "12",
  },
  {
    label: "退货出库",
    value: "13",
  },
];
let roomDialogVisible = ref(false);
let modalType = ref("add");
let rules = ref({
  qualified: [{ required: true, message: "请输入数量", trigger: "blur" }],
});
const { proxy } = getCurrentInstance();
const selectConfig = reactive([
  // {
  //   label: "spu类型",
  //   prop: "type",
  //   data: [],
  // },
]);
const requestUrl = ref("");
let config = reactive([]);
const configData = [
  [
    {
      attrs: {
        label: "入库单号",
        prop: "code",
      },
    },
    {
      attrs: {
        label: "入库类型",
        prop: "type",
      },
      render(status) {
        const current = inboundType.find((x) => x.value == status);
        if (current) return current.label;
      },
    },
    {
      attrs: {
        label: "仓库名称",
        prop: "warehouseName",
      },
    },
    {
      attrs: {
        label: "操作人",
        prop: "userName",
      },
    },
    {
      attrs: {
        label: "操作时间",
        prop: "createTime",
      },
    },
    // {
    //   attrs: {
    //     label: "操作",
    //     width: "100",
    //     align: "right",
    //   },
    //   // 渲染 el-button，一般用在最后一列。
    //   renderHTML(row) {
    //     return [
    //       {
    //         attrs: {
    //           label: "查看",
    //           type: "primary",
    //           text: true,
    //         },
    //         el: "button",
    //         click() {
    //           getDtl(row, "add");
    //         },
    //       },
    //     ];
    //   },
    // },
  ],
  [
    {
      attrs: {
        label: "出库单号",
        prop: "code",
      },
    },
    {
      attrs: {
        label: "出库类型",
        prop: "type",
      },
      render(status) {
        const current = outboundType.find((x) => x.value == status);
        if (current) return current.label;
      },
    },
    {
      attrs: {
        label: "仓库名称",
        prop: "warehouseName",
      },
    },
    {
      attrs: {
        label: "操作人",
        prop: "userName",
      },
    },
    {
      attrs: {
        label: "操作时间",
        prop: "createTime",
      },
    },
    // {
    //   attrs: {
    //     label: "操作",
    //     width: "100",
    //     align: "right",
    //   },
    //   // 渲染 el-button，一般用在最后一列。
    //   renderHTML(row) {
    //     return [
    //       {
    //         attrs: {
    //           label: "查看",
    //           type: "primary",
    //           text: true,
    //         },
    //         el: "button",
    //         click() {
    //           getDtl(row, "add");
    //         },
    //       },
    //     ];
    //   },
    // },
  ],
  [
    {
      attrs: {
        label: "调仓单号",
        prop: "code",
      },
    },
    {
      attrs: {
        label: "调仓类型",
        prop: "type",
      },
      render(type) {
        return type == 1 ? "手动调仓" : type == 2 ? "京东订单接收" : "";
      },
    },
    {
      attrs: {
        label: "调出仓库",
        prop: "outWarehouseName",
      },
    },
    {
      attrs: {
        label: "操作人",
        prop: "outUserName",
      },
    },
    {
      attrs: {
        label: "操作时间",
        prop: "createTime",
      },
    },
    {
      attrs: {
        label: "调入仓库",
        prop: "inWarehouseName",
      },
    },
    {
      attrs: {
        label: "接收人",
        prop: "inUserName",
      },
    },
    {
      attrs: {
        label: "接收时间",
        prop: "inTime",
      },
    },
    // {
    //   attrs: {
    //     label: "操作",
    //     width: "100",
    //     align: "right",
    //   },
    //   // 渲染 el-button，一般用在最后一列。
    //   renderHTML(row) {
    //     return [
    //       {
    //         attrs: {
    //           label: "查看",
    //           type: "primary",
    //           text: true,
    //         },
    //         el: "button",
    //         click() {
    //           getDtl(row, "add");
    //         },
    //       },
    //     ];
    //   },
    // },
  ],
  [
    {
      attrs: {
        label: "盘点单号",
        prop: "code",
      },
    },
    {
      attrs: {
        label: "仓库名称",
        prop: "warehouseName",
      },
    },
    {
      attrs: {
        label: "盘点时间",
        prop: "createTime",
      },
    },
    {
      attrs: {
        label: "盘点人",
        prop: "userName",
      },
    },
    {
      attrs: {
        label: "盘点结论",
        prop: "result",
      },
      render(result) {
        return result == 0 ? "正常" : "异常";
      },
    },
    {
      attrs: {
        label: "盘点物品数",
        prop: "totalNum",
      },
    },
    {
      attrs: {
        label: "正常物品数",
        prop: "normalNum",
      },
    },
    {
      attrs: {
        label: "异常物品数",
        prop: "anomalyNum",
      },
    },
    // {
    //   attrs: {
    //     label: "操作",
    //     width: "100",
    //     align: "right",
    //   },
    //   // 渲染 el-button，一般用在最后一列。
    //   renderHTML(row) {
    //     return [
    //       {
    //         attrs: {
    //           label: "查看",
    //           type: "primary",
    //           text: true,
    //         },
    //         el: "button",
    //         click() {
    //           getDtl(row, "add");
    //         },
    //       },
    //     ];
    //   },
    // },
  ],
];

let formData = reactive({
  data: {},
  treeData: [],
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});

const formConfig = reactive([
  {
    type: "input",
    prop: "canSum",
    label: "可转数量",
    disabled: true,
  },
  {
    type: "input",
    prop: "qualified",
    label: "数量",
  },
]);
const byform = ref(null);

const getList = async (req) => {
  loading.value = true;
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  proxy.post(requestUrl.value, sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};

const submitForm = () => {
  let submitAddress =
    modalType.value === "add"
      ? "/stock/defectiveToQualified"
      : "/stock/qualifiedToDefective";
  byform.value.handleSubmit((valid) => {
    if (Number(formData.data.qualified) > Number(formData.data.canSum)) {
      return ElMessage({
        message: "不可大于可转数量！",
        type: "info",
      });
    }
    submitLoading.value = true;
    proxy.post(submitAddress, formData.data).then(
      (res) => {
        ElMessage({
          message: "操作成功",
          type: "success",
        });
        dialogVisible.value = false;
        submitLoading.value = false;
        getList();
      },
      (err) => (submitLoading.value = false)
    );
  });
};

const getDtl = (row, type) => {
  // modalType.value = type;
  // let canSum = type === "add" ? row.quantity : row.defectiveQuantity;
  // formData.data = {
  //   id: row.id,
  //   canSum,
  //   qualified: "",
  // };
  // dialogVisible.value = true;
};

const handleChange = (val) => {
  if (!val) return;
  switch (val) {
    case "first": {
      requestUrl.value = "/stockJournal/page";
      sourceList.value.pagination = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        // type: "1,4",
        opType: "1",
      };
      config = configData[0];
      break;
    }

    case "second": {
      requestUrl.value = "/stockJournal/page";
      sourceList.value.pagination = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        opType: "2",
        // type: "2,5",
      };
      config = configData[1];
      break;
    }
    case "three": {
      requestUrl.value = "/stockTransfer/page";
      sourceList.value.pagination = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      };
      config = configData[2];
      break;
    }
    case "four": {
      requestUrl.value = "/stockCheck/page";
      sourceList.value.pagination = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      };
      config = configData[3];
      break;
    }
  }
  getList();
};

onMounted(() => {
  config = configData[0];
  requestUrl.value = "/stockJournal/page";
  sourceList.value.pagination = {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    opType: "1",
  };
  getList();
});
</script>
  
<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
</style>