<template>
  <div class="page-horizontal-wrap">
    <div class="page-left-container">
      <div class="page-left-container-head">
        <div class="page-form-title">
          <span>发货单信息</span>
        </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="发货单号" prop="SHIPREQUESTNAME">
            <el-input v-model="formData.SHIPREQUESTNAME" />
          </el-form-item>
          <el-form-item label="Ship 类型" prop="email">
            <el-input v-model="formData.email" disabled />
          </el-form-item>
          <el-form-item label="预留计划时间" prop="email">
            <el-input v-model="formData.email" disabled />
          </el-form-item>
          <el-form-item label="物料号" prop="email">
            <el-input v-model="formData.email" disabled />
          </el-form-item>
          <el-form-item label="接收人" prop="email">
            <el-input v-model="formData.email" disabled />
          </el-form-item>
          <el-form-item label="创建抬头文本" prop="email">
            <el-input v-model="formData.email" disabled />
          </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-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>
      </div>
    </div>
    <div class="vue-element-page-wrap" ref="tableContainer">
      <div class="vue-element-page-table">

        <div class="page-table-operate">
          <div class="page-table-title">
            <div class="page-table-title-left">
              <span>发货单列表</span>
            </div>
          </div>

        </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>
        </el-table>
      </div>
      <div class="vue-element-page-table">
        <div class="page-table-operate">
          <div class="page-table-title">
            <div class="page-table-title-left">
              <span>已经分配的标签列表</span>
            </div>
          </div>
        </div>
        <el-table border v-loading="loading" :data="pageList" highlight-current-row row-key="id">
          <template v-for="(col, index) in column1" :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>
        </el-table>
      </div>
      <el-row class="page-search" justify="space-between" align="middle">
        <el-form ref="operateFormRef" :model="queryParams.params" :inline="true">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="物料凭证号" prop="operateParams.date">
                <el-Input v-model="queryParams.params.DESCRIPTION" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="过账时间" prop="operateParams.date"> <el-date-picker v-model="operateParams.date"
                  type="date" placeholder="Pick a date" clearable /> </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="page-search-btns">
          <el-button type="primary" @click="resetQuery">出库</el-button>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "manualStockOut",
};
</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";
import { useRoute } from "vue-router";

const route = useRoute();


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

const state = reactive({
  queryParams: {
    queryId: "getSiteNameList",
    version: "web001",
    params: {
      SITENAME: "",
      DESCRIPTION: "",
      SHIPREQUESTNAME: ""
    },
    pageNum: 1,
    pageSize: 10,
  },
  operateParams: {
    date: new Date(),
  },
  total: 0,
  loading: false,
  pageList: [] as any,
  selectItem: undefined as any,
  dialog: {
    title: "新增工厂",
    visible: false,
  },
  formData: {
    SHIPREQUESTNAME: route.query.SHIPREQUESTNAME, // 发货单据
    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,
  column1: [] as any,
  currentTime: "",
});
const { queryParams, total, column1, operateParams, loading, pageList, dialog, formData, selectItem, rules, column, currentTime } = toRefs(state);

onMounted(() => {
  state.column = [
    { header: "工厂", field: "SITENAME", hide: false },
    { header: "ERP工厂", field: "ERPFACTORYNAME", hide: false },
    { header: "行项", field: "SHIPREQUESTDETAILNAME", hide: false },
    { header: "发货单号", field: "SHIPREQUESTNAME", hide: false },
    { header: "物料编号", field: "MATERIALSPECNAME", hide: false },
    { header: "中文描述", field: "DESC_CN", hide: false },
    { header: "批次", field: "CHARGE", hide: false },
    { header: "单位", field: "MATERIALUNIT", hide: false },
    { header: "Ship类型", field: "SHIPREQUESTTYPE", hide: false },
    { header: "移动类型", field: "SHIPREQUESTDETAILTYPE", hide: false },
    { header: "请求数量", field: "REQUESTQUANTITY", hide: false },
    { header: "绑定数量", field: "ASSIGNEDQUANTITY", hide: false },
    { header: "ERP库位", field: "ERPLOCATION", hide: false },
    { header: "接受库存地", field: "ERPRECEIVELOCATION", hide: false },
  ];
  state.column1 = [
    { header: "工厂", field: "SITENAME", hide: false },
    { header: "BOXID", field: "MATERIALPACKINGNAME", hide: false },
    { header: "物料类型", field: "MATERIALTYPE", hide: false },
    { header: "物料编号", field: "MATERIALSPECNAME", hide: false },
    { header: "品质状态", field: "PACKINGGRADE", hide: false },
    { header: "位置", field: "LOCATIONNAME", hide: false },
    { header: "物料总数量", field: "MATERIALQUANTITY", 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>
