<template>
  <div class="page-horizontal-wrap">
    <div class="page-left-container">
      <div class="page-left-container-head">
        <div class="page-form-title">
          <span>Box信息</span>
        </div>
        <div class="page-form-button">
          <el-button type="primary" style="width: 60px;">确认</el-button>
        </div>
      </div>

      <div class="left-form-container">
        <el-form ref="formDataRef" :model="formData" :rules="rules" label-position="left" label-width="120px">
          <el-form-item label="PO/预留号" prop="PO">
            <el-input v-model="formData.PO" placeholder="请输入PO/预留号" />
          </el-form-item>
          <el-form-item label="物料号" prop="materialSpec">
            <el-select v-model="formData.materialSpec" placeholder="请选择物料号">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="生产日期" prop="userName">
            <el-date-picker v-model="formData.createDate" type="date" placeholder="请选择日期" />
          </el-form-item>
          <el-form-item label="到期日" prop="password">
            <el-date-picker v-model="formData.expiredDate" type="date" placeholder="请选择日期" />
          </el-form-item>
          <el-form-item label="物料总数" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="供应商名称" prop="email">
            <el-select v-model="formData.materialSpec" placeholder="please select your zone">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商描述" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="保质期" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="可接收数量" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="已创建数量" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="ERP工厂" prop="email">
            <el-select v-model="formData.materialSpec" placeholder="please select your zone">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="ERP库位" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="移动原因" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="申请人" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>

          <el-form-item label="收货箱数" prop="email" style="margin-top: 40px">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="每箱数量" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="vue-element-page-wrap" ref="tableContainer">
      <div class="vue-element-page-table">
        <div class="page-table-operate">
          <span>Box信息列表</span>
        </div>
        <el-table border v-loading="loading" :data="pageList" highlight-current-row row-key="id">
          <template v-for="(col, index) in column" :key="index">
            <el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
              <template #default="scope">
                <span>{{ scope.row[col.field] }}</span>
              </template>
            </el-table-column>
          </template>
          <template v-slot:empty>
            <svg-icon icon-class="noData" width="160px" height="160px" />
          </template>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "preStockedBoxLabelPrint",
};
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from "vue";
import { ElForm, ElMessageBox, ElTree } from "element-plus";
import { getQueryPageList } from "@/api/common";
import { addSite, updateSite, deleteSite } from "@/api/site";

const queryFormRef = ref(ElForm);
const formDataRef = ref(ElForm);
const { proxy }: any = getCurrentInstance();

interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}

const defaultProps = {
  children: "children",
  label: "label",
};
const treeRef = ref<InstanceType<typeof ElTree>>();

const state = reactive({
  queryParams: {
    queryId: "getSiteNameList",
    version: "web001",
    params: {
      SITENAME: "",
      DESCRIPTION: "",
    },
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  loading: false,
  pageList: [] as any,
  selectItem: undefined as any,
  dialog: {
    title: "新增工厂",
    visible: false,
  },
  formData: {
    PO: "", // PO/预留号
    materialSpec: "", // 物料号
    createDate: "", // 生产日期
    expiredDate: "", // 到日期
    materialQty: "", // 物料总数
    supplierName: "", // 供应商名称
    description: "", //  描述
    expirationDay: "", // 保质期
    requestQty: "", // 可接收数量
    finishedQty: "", // 已接受数量
    ERPLocatopn: "", // ERP工厂
    ERPFactory: "", // ERP工厂,
    moveType: "", // 移动原因
    applicant: "", // 申请人

    BoxQty: "", // 收货箱数
    perBoxQty: "", // 每箱数量
  } as any,
  rules: {
    siteName: [{ required: true, message: "请输入工厂编码", trigger: "blur" }],
    description: [{ required: true, message: "请输入工厂名称", trigger: "blur" }],
  },
  column: [] as any,
  currentTime: "",
});
const { queryParams, total, loading, pageList, dialog, formData, selectItem, rules, column, currentTime } = toRefs(state);

onMounted(() => {
  state.column = [
    { header: "BoxID", field: "MATERIALPACKINGNAME", hide: false },
    { header: "物料编号", field: "DESCRIPTION", hide: false },
    { header: "物料描述", field: "ADDRESS", hide: false },
    { header: "物料总数量", field: "CREATEUSER", hide: false },
    { header: "生产日期", field: "CREATETIME", hide: false },
    { header: "到日期", field: "LASTUPDATEUSER", hide: false },
    { header: "供应商编号", field: "LASTUPDATETIME", hide: false },
    { header: "供应商名称", field: "LASTUPDATETIME", hide: false },
    { header: "保质期", field: "LASTUPDATETIME", hide: false },
    { header: "PO/预留号", field: "LASTUPDATETIME", hide: false },
    { header: "ERP工厂", field: "LASTUPDATETIME", hide: false },
    { header: "ERP库位", field: "LASTUPDATETIME", hide: false },
    { header: "移动类型", field: "LASTUPDATETIME", hide: false },
    { header: "申请人", field: "LASTUPDATETIME", hide: false },
  ];
  // handleQuery();
});
// 更新列
function updateList(col: any) {
  state.column = col;
}
function handleQuery() {
  getQueryPageList(state.queryParams)
    .then((res: any) => {
      console.log(res.data);
      state.pageList = res.data.list;
      state.total = res.data.total;
      showCurrentTime();
    })
    .catch(() => {});
}
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}
function showCurrentTime() {
  let date = new Date();
  state.currentTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
}

/**
 * 新增用户 dialog
 */
function handleAdd() {
  dialog.value = {
    title: "新增工厂",
    visible: true,
  };
}
/**
 * 编辑用户 dialog
 */
function handleUpdate(row: any) {
  state.dialog = {
    title: "编辑角色",
    visible: true,
  };

  state.selectItem = row;
}

function dialogOpend() {
  formDataRef.value.resetFields();
  if (state.selectItem) {
    state.formData = {
      siteName: state.selectItem.SITENAME,
      description: state.selectItem.DESCRIPTION,
      address: state.selectItem.ADDRESS,
    };
  }
}

/**
 * 取消关闭弹窗
 */
function cancel() {
  state.dialog.visible = false;
}

/**
 * 保存
 */
function submitForm() {
  formDataRef.value.validate((isValid: boolean) => {
    if (isValid) {
      if (state.selectItem) {
        // 编辑
        let params = {
          ...state.formData,
        };

        updateSite(params).then(() => {
          proxy.$ElMessage.success("修改成功");
          cancel();
          handleQuery();
        });
      } else {
        addSite(state.formData).then((res: any) => {

          if (res.code === "0") {
            proxy.$ElMessage.success("新增成功");
          }

          cancel();
          handleQuery();
        });
      }
    }
  });
}
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
