<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch">
      <el-row :gutter="40">
        <el-col :span="5">
          <el-form-item label="借用时间" prop="borrowTime">
            <el-date-picker
              v-model="borrowTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              placeholder="请选择借用时间"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="项目号" prop="xmNo">
            <el-input
              v-model="queryParams.xmNo"
              placeholder="请输入项目号"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单编号" prop="sapNo">
            <el-input
              v-model="queryParams.sapNo"
              placeholder="请输入订单编号"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="单据号" prop="billNo">
            <el-input
              v-model="queryParams.billNo"
              placeholder="请输入单据号"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['wisdom:borrow:add']"
          >新增借料</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Printer"
          @click="handlePrint"
          v-print="printViewInfo"
          v-hasPermi="['wisdom:borrow:print']"
          >打印单据</el-button
        >
      </el-col>

      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="outboundList"
      @selection-change="printSelectionChange"
      border
      ref="infoTableRef"
      highlight-current-row
      @row-click="(row) => tableInfoRowClick(row, infoTableRef)"
      show-overflow-tooltip
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" width="70" />
      <el-table-column
        label="单据号"
        align="center"
        prop="billNo"
        width="180"
      />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <dict-tag :options="dictTagData()" :value="scope.row.isBorrowed" />
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        align="center"
        prop="sapNo"
        width="150"
      />
      <el-table-column label="项目号" align="center" prop="xmNo" width="150" />
      <el-table-column
        label="项目描述"
        align="center"
        prop="xmMs"
        width="150"
      />
      <el-table-column
        label="（借用方）项目号"
        align="center"
        prop="xmNoCk"
        width="150"
      />
      <el-table-column
        label="（借用方）项目描述"
        align="center"
        prop="xmMsCk"
        width="150"
      />
      <el-table-column label="物料号" align="center" prop="wlNo" width="100" />
      <el-table-column
        label="物料描述"
        align="center"
        prop="wlMs"
        width="150"
      />
      <el-table-column
        label="供应商编码"
        align="center"
        prop="gysNo"
        width="150"
      />
      <el-table-column
        label="供应商名称"
        align="center"
        prop="gysMc"
        width="150"
      />
      <el-table-column label="合同单价" align="center" prop="htDj" />

      <el-table-column label="计量单位" align="center" prop="dw" />
      <el-table-column
        label="借用数量"
        align="center"
        prop="realQty"
        width="120"
      />
      <el-table-column
        label="所属大库"
        align="center"
        prop="parentWarehouseName"
        width="150"
      />
      <el-table-column
        label="所属小库"
        align="center"
        prop="warehouseName"
        width="150"
      />
      <el-table-column label="库位码" align="center" prop="pcode" width="120" />
      <el-table-column label="托盘码" align="center" prop="trayCode" />
      <el-table-column
        label="身份码"
        align="center"
        prop="entityId"
        width="150"
      />
      <el-table-column
        label="出库类型"
        align="center"
        prop="operationTypeName"
      />
      <el-table-column label="借用时间" align="center" width="100">
        <template #default="scope">
          <span>{{ parseTime(scope.row.borrowTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="理货员" align="center" prop="operatorName" />
      <el-table-column label="备注" align="center" prop="remark" width="150" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            v-show="scope.row.isBorrowed == 1"
            link
            type="primary"
            icon="Edit"
            @click="handleReturn(scope.row)"
            >还料</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 打印 -->
    <div id="printMe" class="printMeBox" v-show="showContent">
      <printBill :billAllObj="printList" />
    </div>
    <!-- 添加或修改库存单据主对话框 -->
    <el-dialog
      :title="title"
      v-model="open"
      width="70%"
      :z-index="4"
      :close-on-click-modal="false"
      :draggable="true"
    >
      <el-form ref="stockRef" :model="storeData" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="项目号">
              <el-input
                v-model="outQueryParams.xmNo"
                placeholder="请输入项目号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单号">
              <el-input
                v-model="outQueryParams.sapNo"
                placeholder="请输入订单号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料号">
              <el-input
                v-model="outQueryParams.wlNo"
                placeholder="请输入物料号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="searchPlan">查询</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="出库类型" prop="ckType">
              <el-select
                v-model="storeData.ckType"
                placeholder="请选择出库类型"
                disabled
              >
                <el-option
                  v-for="dict in storeTypeList"
                  :key="dict.id"
                  :label="dict.typeName"
                  :value="dict.typeCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="施工队" prop="teamCode">
              <el-select
                v-model="storeData.teamCode"
                placeholder="请选择施工队"
                clearable
              >
                <el-option
                  v-for="dict in wzTypeList"
                  :key="dict.id"
                  :label="dict.teamName"
                  :value="dict.teamCode"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="理货员" prop="operator">
              <el-select
                v-model="storeData.operator"
                placeholder="请选择理货员"
                clearable
              >
                <el-option
                  v-for="dict in personList"
                  :key="dict.userId"
                  :label="dict.userName"
                  :value="dict.userId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="借用时间" prop="borrowTime">
              <el-date-picker
                clearable
                v-model="storeData.borrowTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择借用时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="归还时间">
              <el-date-picker
                clearable
                v-model="storeData.returnTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择归还时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目号">
              <el-input v-model="storeData.xmNoCk" placeholder="请输入项目号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称">
              <el-input
                v-model="storeData.xmMsCk"
                placeholder="请输入项目名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="planList"
        height="400"
        show-overflow-tooltip
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" type="index" width="70" />
        <el-table-column
          label="物料号"
          align="center"
          prop="wlNo"
          width="100"
        />
        <el-table-column
          label="订单号"
          align="center"
          prop="sapNo"
          width="100"
        />
        <el-table-column
          label="物料描述"
          align="center"
          prop="wlMs"
          width="300"
        />
        <el-table-column
          label="出库数量"
          align="center"
          prop="realQty"
          width="120"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.realQty"
              placeholder="请输入出库数量"
            />
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" prop="htDj" />
        <el-table-column label="单位" align="center" prop="dw" />
        <el-table-column
          label="库位"
          align="center"
          prop="pcode"
          width="150"
        ></el-table-column>
        <el-table-column
          label="容器码"
          align="center"
          prop="trayCode"
        ></el-table-column>

        <el-table-column
          label="身份码"
          align="center"
          prop="entityId"
          width="200"
        ></el-table-column>

        <el-table-column
          label="项目号"
          align="center"
          prop="xmNo"
          width="150"
        />
        <el-table-column
          label="项目名称"
          align="center"
          prop="xmMs"
          width="250"
        />
        <el-table-column
          label="供应商"
          align="center"
          prop="gysMc"
          width="200"
        />
        <el-table-column label="备注" align="center" width="200">
          <template #default="scope">
            <el-input
              v-model="scope.row.remark"
              placeholder="请输入备注"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">出 库</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 还料弹框 -->
    <el-dialog title="还料" v-model="returnOpen" append-to-body width="40%">
      <el-form ref="returnRef" :model="returnData" label-width="100px">
        <el-form-item label="还料时间">
          <el-date-picker
            style="width: 100%"
            v-model="returnData.returnTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            type="date"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="returnForm">还 料</el-button>
          <el-button @click="cancelReturn">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Borrow">
import { returnBill, listStockByXm } from "@/api/wisdom/borrow"; //列表
import { warehouseAll } from "@/api/information/warehouseinfo";
import { listOuttype } from "@/api/information/outtype"; //出库类型
import { listConstruction } from "@/api/information/construction"; //施工队
import { personListDict } from "@/api/system/user"; //理货员
import { getKwAllList } from "@/api/information/pcdedetail"; //库位下拉数据
import printBill from "@/components/printBill/bill.vue";
import { ref } from "vue";
import { listStock } from "@/api/wisdom/record";
import { addOutbound } from "@/api/wisdom/outbound";

const { proxy } = getCurrentInstance();

const showSearch = ref(true);

const data = reactive({
  storeData: {
    ckType: "JLCK",
  }, //借料数据
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    isBorrowed: "1",
    //   borrowTime:[],     //借料时间
    xmNo: "",
    sapNo: "",
    billNo: "",
    ids: [],
  },
  outQueryParams: {
    xmNo: "",
    wlNo: "",
    sapNo: "",
    pageNum: 1,
    pageSize: 50,
    isChuku: 0,
  },
  rules: {
    ckType: [
      { required: true, message: "出库类型不能为空", trigger: "change" },
    ],
    teamCode: [
      { required: true, message: "施工队不能为空", trigger: "change" },
    ],
    borrowTime: [
      { required: true, message: "借用时间不能为空", trigger: "change" },
    ],
    operator: [
      { required: true, message: "理货员不能为空", trigger: "change" },
    ],
  },
  printViewInfo: {
    id: "printMe", //打印区域的唯一的id属性
    popTitle: "入库信息打印",
    beforeOpenCallback() {
      showContent.value = false;
    }, // 开始打印之前的callback
    openCallback() {}, // 调用打印时的callback
    closeCallback() {}, // 关闭打印的callback(无法区分确认or取消)
    clickMounted() {},

    standard: "",
    extarCss: "",
  },
});

const { queryParams, storeData, rules, printViewInfo, outQueryParams } =
  toRefs(data);

const statusList = ref([
  { value: 1, label: "未还料", elTagType: "danger", elTagClass: null },
  { value: 2, label: "已还料", elTagType: "primary", elTagClass: null },
]);
const dictTagData = () => {
  return statusList.value.map((item) => ({
    ...item,
    value: String(item.value),
  }));
};

/** 查询库存单据主列表 */
const outboundList = ref([]);
const infoTableRef = ref(null);
const loading = ref(true);
const total = ref(0);
function getList() {
  loading.value = true;
  listStock({ ...queryParams.value, bizType: "2" }).then((response) => {
    outboundList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
getList();

/** 搜索按钮操作 */
const borrowTime = ref([]);
function handleQuery() {
  if (borrowTime.value && borrowTime.value.length > 0) {
    queryParams.value.startDate = borrowTime.value[0];
    queryParams.value.endDate = borrowTime.value[1];
  } else {
    queryParams.value.startDate = "";
    queryParams.value.endDate = "";
  }
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  borrowTime.value = [];
  handleQuery();
}

//获取出库类型下拉数据
const storeTypeList = ref([]); //出库类型下拉数据
const getOutTypeList = () => {
  listOuttype({ pageNum: 1, pageSize: 50 }).then((response) => {
    storeTypeList.value = response.rows;
  });
};
getOutTypeList();

// 获取施工队下拉数据
const wzTypeList = ref([]); //施工队下拉数据
const getConstructionList = () => {
  listConstruction({ pageNum: 1, pageSize: 50 }).then((response) => {
    wzTypeList.value = response.rows;
  });
};
getConstructionList();

// 获取理货员下拉数据
const personList = ref([]); //理货员下拉数据
const getPersonList = () => {
  personListDict().then((response) => {
    personList.value = response.data;
  });
};
getPersonList();

/** 新增按钮操作 */
const open = ref(false);
const title = ref("");
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加借料单据";
}

//查询库存中数据 搜索
const planList = ref([]); //从供应计划中添加列表
function searchPlan() {
  if (
    !outQueryParams.value.xmNo &&
    !outQueryParams.value.wlNo &&
    !outQueryParams.value.sapNo
  ) {
    proxy.$modal.msgWarning("查询条件不能为空");
    return;
  }
  listStockByXm(outQueryParams.value).then((response) => {
    response.rows.forEach((e) => {
      e.remark = e.remark;
    });
    if (response.rows.length == 0) {
      proxy.$modal.msgWarning("库存无数据");
      planList.value = [];
    } else {
      planList.value = response.rows;
    }
  });
}

//出库 多选框选中数据
const ids = ref([]);
function handleSelectionChange(selection) {
  ids.value = selection.map((info) => info.id);
}

/** 借料出库 提交按钮 */
function submitForm() {
  proxy.$refs["stockRef"].validate((valid) => {
    if (valid) {
      if (ids.value.length == 0) {
        proxy.$modal.msgError("请勾选数据");
        return;
      }
      let dataList = planList.value
        .filter((x) => ids.value.includes(x.id))
        .map((info) => ({
          id: info.id,
          realQty: info.realQty,
          remark: info.remark,
        }));
      let submitData = {
        rkBill: {
          borrowTime: storeData.value.borrowTime, //借用时间
          returnTime: storeData.value?.returnTime, // 归还时间
          teamCode: storeData.value.teamCode, //施工队
          operator: storeData.value.operator, //理货员
          xmNoCk: storeData.value.xmNoCk ? storeData.value.xmNoCk : "", //原本要出的项目号-借用方项目
          xmMsCk: storeData.value.xmMsCk ? storeData.value.xmMsCk : "", //原本要出的项目描述-借用方项目号
          bizType: "2",
          operationType: "JLCK",
        },
        rkInfoList: dataList,
      };
      addOutbound(submitData).then((response) => {
        proxy.$modal.msgSuccess("操作成功");
        open.value = false;
        getList();
      });
    }
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  planList.value = [];
  storeData.value = {
    ckType: "JLCK",
  };
  proxy.resetForm("stockRef");
}

//打印单据  多选框选中数据
const printList = ref([]); //要打印的数据列表
function printSelectionChange(selection) {
  printList.value = selection;
}

//打印单据
const dateStr = ref(""); //打印单据生成的日期
const showContent = ref(false); // 控制打印内容是否显示
function handlePrint() {
  if (printList.value.length == 0) {
    proxy.$modal.msgError("请勾选数据");
    return;
  }
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // 月份从0开始，需要加1
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  dateStr.value =
    year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
  showContent.value = true;
}

const returnId = ref([]);
const returnData = ref({});
const returnOpen = ref(false);
//打开还料弹框
function handleReturn(row) {
  returnId.value[0] = row.id;
  returnData.value.returnTime = "";
  returnOpen.value = true;
}
//还料保存
function returnForm() {
  if (!returnData.value.returnTime) {
    proxy.$modal.msgError("请选择还料时间");
    return;
  }
  let ids = JSON.parse(JSON.stringify(returnId.value));
  let items = ids.map((item) => {
    return {
      recordId: item,
      returnTime: returnData.value.returnTime,
    };
  });
  returnBill({ items }).then((response) => {
    proxy.$modal.msgSuccess("操作成功");
    returnOpen.value = false;
    getList();
  });
}
//取消还料弹框
function cancelReturn() {
  returnOpen.value = false;
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "wisdom/stock/export",
    {
      ...queryParams.value,
    },
    `stock_${new Date().getTime()}.xlsx`
  );
}

const warehouseData = ref([]); //仓库下拉列表
function warehouseFun() {
  //所属仓库下拉数据
  warehouseAll().then((response) => {
    warehouseData.value = response.data;
  });
}
warehouseFun();
</script>

<style scoped lang="scss">
.printMeBox {
  div {
    line-height: 30px;
  }
}
</style>