<template>
  <div class="mainContentBox">
    <avue-crud
      ref="crudRef"
      v-model:search="search"
      v-model="form"
      :data="data"
      :option="option"
      v-model:page="page"
      @row-save="createRow"
      @row-update="updateRow"
      @row-del="deleteRow"
      @search-change="searchChange"
      @search-reset="resetChange"
      @size-change="dataList"
      @current-change="dataList"
    >
      <template #menu-left="{ size }">
        <el-button
          type="primary"
          icon="el-icon-primary"
          :size="size"
          @click="addVal"
          >新增</el-button
        >
      </template>
      <template #menu="{ size, row, index }">
        <el-button
          icon="el-icon-setting"
          text
          @click="showSeqPage(row)"
          type="primary"
          :size="size"
          >出入库明细</el-button
        >
      </template>
    </avue-crud>
    <el-dialog
      v-model="dialog4.visible"
      :title="dialog4.title"
      width="950px"
      @close="dialog4.visible = false"
    >
      <order-details :orderInfo="infoObj" />
    </el-dialog>
    <el-dialog
      v-model="dialog3.visible"
      :title="dialog3.title"
      width="1100px"
      :destroy-on-close="true"
      @close="dialog3.visible = false"
    >
      <el-form ref="ruleFormRef" label-width="90px" :rules="rules">
        <el-row :gutter="22" style="margin-top: 5px">
          <el-col :span="11">
            <el-form-item label="类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择" @change="changeShow">
                <el-option
                  v-for="option in fieldOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="单据编号" prop="orderNo">
              <el-input
                v-model="form.orderNo"
                placeholder="请输入单据编号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22" style="margin-top: 5px" v-if="isShow">
          <el-col :span="11">
            <el-form-item label="仓库编号" prop="houseNo">
              <el-input
                v-model="form.houseNo"
                placeholder="仓库编号"
                :readonly="true"
                @click="selectHouse"
              />
            </el-form-item>
          </el-col>

            <el-col :span="11">
                <el-form-item label="仓库名称" prop="houseName">
                    <el-input
                            :disabled="true"
                            v-model="form.houseName"
                            placeholder="仓库名称"
                    />
                </el-form-item>
            </el-col>
          <!--          <el-col :span="11">
            <el-form-item label="载具编号">
              <el-input
                  v-model="form.vehicleCode"
                  placeholder="请输入载具编号"
              />
            </el-form-item>
          </el-col>-->
        </el-row>
          <el-row :gutter="22" style="margin-top: 5px" v-if="isShow">
              <el-col :span="11">
                  <el-form-item label="货位" prop="coordinate">
                      <el-input
                              :disabled="true"
                              v-model="form.coordinate"
                              placeholder="货位"
                      />
                  </el-form-item>
              </el-col>

              <el-col :span="11">
                  <el-form-item label="层数" prop="position">
                      <el-input
                              :disabled="true"
                              v-model="form.position"
                              placeholder="层数"
                      />
                  </el-form-item>
              </el-col>

          </el-row>

          <el-row :gutter="22" style="margin-top: 5px">
              <el-col :span="11">
                <el-form-item label="载具编号">
                  <el-input
                      v-model="form.vehicleCode"
                      placeholder="请输入载具编号"
                  />
                </el-form-item>
              </el-col>
          </el-row>
        <el-divider />
        <el-text class="mx-1" size="large">物料详情</el-text>
        <el-button
          type="primary"
          @click="addItem"
          icon="el-icon-plus"
          style="margin-left: 15px; width: 25px; height: 25px"
          circle
        />
        <el-button
          type="danger"
          @click="minusItem"
          icon="el-icon-minus"
          style="margin-left: 15px; width: 25px; height: 25px"
          circle
        />
        <el-row
          :gutter="22"
          style="margin-top: 5px"
          v-for="(item, index) in formDataList"
          :key="index"
        >
          <el-col :span="3">
            <el-input
              v-model="item.materialNo"
              placeholder="请选择物料编号"
              readonly
              @click="choiceItem(item,index)"
            />
          </el-col>
          <el-col :span="3"
            ><el-input
              v-model="item.materialName"
              placeholder="请选择物料名称"
              readonly
            />
          </el-col>
          <el-col :span="4">
            <el-input v-model="item.spec" placeholder="物料型号" readonly />
          </el-col>
<!--          <el-col :span="2">
            <el-select v-model="item.materialType" placeholder="请选择物料类别">
              <el-option
                v-for="option in stock_material_type_list"
                :key="option.dictValue"
                :label="option.dictLabel"
                :value="option.dictValue"
              />
            </el-select>
          </el-col>-->
          <el-col :span="2">
            <el-input v-model="item.unit" placeholder="单位" readonly />
          </el-col>
          <el-col :span="6">
            <el-input v-model="item.batchCode" placeholder="二维码" />
          </el-col>
          <el-col :span="2">
            <el-input
              v-model="item.num"
              placeholder="数量"
              min="1"
              :max="maxList[index]"
              type="number"
            />
          </el-col>
        </el-row>

        <div class="dialog-footer" style="margin-top: 20px" align="center">
          <el-button type="primary" @click="handleSubmit">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      v-model="dialog2.visible"
      :title="dialog2.title"
      width="950px"
      @close="dialog2.visible = false"
    >
      <ChoiceItemPage @material-info="materialInfo" :enabled="-1" />
    </el-dialog>
      <CommonTable
              ref="houseRef"
              tableTitle="选择仓库位置"
              tableType="HOUSE_POSITION"
              @selected-sure="onSelectedFinish"
      />
      <CommonTable
              ref="stockRef"
              tableTitle="库存选择"
              tableType="HOUSE_STOCK"
              @selected-sure="onSelected"
      />
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import { queryDictDataByType } from "@/api/system/dict";
import { wmsOrderAdd } from "@/api/storage";
import { useCommonStoreHook } from "@/store";
import ChoiceItemPage from "@/views/base/materials/components/choice-item-page.vue";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const ruleFormRef = ref(ElForm);
const test = () => {
  isShowTable.value = true;
  tableType.value = tableType.value == 1 ? 2 : 1;
};
const maxList=ref([]);
const isShow=ref(true);
const houseRef=ref(null);
const selectHouse =()=>{
    houseRef.value.startSelect();
}

const stockRef=ref(null);
const showSeqPage = (info) => {
  infoObj.value = info;
  dialog4.visible = true;
};
const changeShow=()=>{
    if(form.value.type==='2'){
       isShow.value=false;
    }else {
        isShow.value=true;
    }
}
const dialog3 = reactive({
  title: "新增",
  visible: false,
});
const dialog4 = reactive({
  title: "出入库明细",
  visible: false,
});
const rules = reactive({
  type: [{ required: true, message: "请选择类型", trigger: "blur" }],
    orderNo: [{ required: true, message: "请输入单据编号", trigger: "blur" }]

});

const onSelectedFinish =(val)=>{
   form.value.houseNo=val.houseNo;
   form.value.houseName=val.houseName;
    form.value.coordinate=val.coordinate;
    form.value.position=val.layer;
}
const materialInfo = (value) => {
  clickObj.value.materialNo = value.materialCode;
  clickObj.value.materialName = value.materialName;
  clickObj.value.spec = value.spec;
  clickObj.value.unit = value.unitDictValue;
  dialog2.visible = false;
};

const onSelected=(value)=>{
    for(let i=0;i<formDataList.value.length;i++){
       if(value.id===formDataList.value[i].houseStockId){
           ElMessage.error("该库存已经选择过了!");
           return;
       }
    }
    clickObj.value.materialNo = value.materialNo;
    clickObj.value.materialName = value.materialName;
    clickObj.value.spec = value.spec;
    clickObj.value.unit = value.unit;
    clickObj.value.num = value.num;
    maxList.value[line.value]=value.num;
    clickObj.value.houseStockId =value.id;
}
const dialog2 = reactive({
  title: "物料选择",
  visible: false,
});
const addVal = () => {
  dialog3.visible = true;
};
const addItem = () => {
  typeIndex.value = 1;
  formDataList.value.push({});
  maxList.value.push(9999);
};
const typeIndex = ref(0);
const minusItem = () => {
  typeIndex.value = 0;
  formDataList.value.splice(formDataList.value.length - 1, 1);
    maxList.value.slice(maxList.value.length-1,1);
};
const clickObj = ref(null);
const line=ref(0);
const choiceItem = (item,index) => {
  if (typeIndex.value === 1) {
      line.value=index;
    clickObj.value = item;
    if(form.value.type==='2'){
        stockRef.value.startSelect();
    }else if(form.value.type){
        dialog2.visible = true;
    }
  }
};
const fieldOptions = ref([
  { label: "入库", value: "1" },
  { label: "出库", value: "2" },
  { label: "退料", value: "3" },
]);
const stock_material_type_list = ref();
const formDataList = ref([]);
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/wmsOrder",
    dataListUrl: "/api/v1/wmsOrder/pageDetails",
  });
const handleSubmit = () => {
  form.value.details = formDataList.value;
  wmsOrderAdd(form.value).then((res) => {
    if (res.code === "200") {
      ElMessage.success("操作成功");
      dataList();
      form.value = null;
      formDataList.value = [];
      maxList.value=[];
      dialog3.visible = false;
    }
  });
};
const infoObj = ref(null);
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具

const crudRef = ref(null); //crudRef.value 获取avue-crud对象
// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  searchEnter: true,
  delBtn: false,
  selection: false,
  viewBtn: false,
  editBtn: false,
  menu: true,
  addBtn: false,
  column: [
    /*{
      label: "任务单号",
      prop: "taskNo",
      search: true,
      width:150,
      overHidden: true
    },
    {
      label: "计划单号",
      prop: "planNo",
      search: true,
    },*/
    {
      label: "类型",
      prop: "type",
      type: "select",
      search: true,
      dicData: [
        { label: "入库", value: "1" },
        { label: "出库", value: "2" },
        { label: "退料", value: "3" },
      ],
    },
    {
      label: "仓库编号",
      overHidden: true,
      prop: "houseNo",
    },

      {
          label: "仓库名称",
          overHidden: true,
          prop: "houseName",
      },
    /*{
      label: "物料编号",
      width: 130,
      search: true,
      overHidden: true,
      prop: "materialNo",
    },
    {
      label: "物料名称",
      width:130,
      search: true,
      overHidden: true,
      prop: "materialName",
    },
    {
      label: "物料型号",
      width:130,
      overHidden: true,
      prop: "spec",
    },
    {
      label: "单位",
      overHidden: true,
      prop: "unit",
    },*/
    {
      label: "库位",
      overHidden: true,
      prop: "coordinate",
    },
      {
          label: "层数",
          overHidden: true,
          prop: "position",
      },
    /* {
      label: "二维码",
      prop: "batchCode",
      width:150,
      overHidden: true,
      formatter:(val,value,label)=>{
        if(val.seqNo){
          return val.seqNo;
        }else{
          return val.batchCode
        }
      }
    },
    {
      label: "数量",
      prop: "num",
    },*/
    /*{
      label: "状态",
      prop: "state",
      type: "select",
      search: true,
      dicUrl:
          dictDataUtil.request_url +
          dictDataUtil.TYPE_CODE.warehouse_task_state,
      props: {
        label: "dictLabel",
        value: "dictValue",
      }
    },*/
    {
      label: "操作时间",
      prop: "created",
      display: false,
    },
    {
      label: "操作人",
      prop: "creator",
      display: false,
    },
  ],
});

onMounted(() => {
  // console.log("crudRef", crudRef)
  //search.value.type = '2'
  dataList();
  queryDictDataByType("stock_material_type").then((res) => {
    stock_material_type_list.value = res.data;
  });
});
</script>
