<template>
  <div class="app-container">
    <el-descriptions title="基本信息"> </el-descriptions>
    <el-form
      :model="form"
      ref="Form"
      size="small"
      :inline="true"
      label-width="120px"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item prop="outboundOdd" label="出库单号">
            <el-input
              v-model="form.outboundOdd"
              placeholder="不输入自动生成"
              clearable
              style="width: 300px"
              show-word-limit
              @input="passValue"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出库类型" prop="outboundType">
            <el-select
              v-model="form.outboundType"
              placeholder="请选择出库类型"
              style="width: 300px"
            >
              <el-option label="销售出库" value="1" />
              <el-option label="下捡出库" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出库时间" prop="outboundDate">
            <el-date-picker
              v-model="form.outboundDate"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 300px"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出库员" prop="outboundUser">
            <el-input
              v-model="form.outboundUser"
              placeholder="请输入出库员"
              clearable
              style="width: 300px"
              show-word-limit
              @input="passValue"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              style="width: 1180px"
              type="textarea"
              placeholder="请输入内容"
              v-model="form.remark"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 4 }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <span slot="label"> <span style="color: red">*</span> 选择入库订单</span>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="selectProduct"
              >选择</el-button
            >
          </el-form-item>
        </el-col>
        <el-col
          :span="20"
          style="text-align: center"
          v-if="form.storeOutboundList.length > 0"
        >
          <el-form-item>
            <el-table
              style="width: 1600px"
              :data="form.storeOutboundList"
              @selection-change="handleSelectionChange"
              row-key="id"
            >
              <el-table-column label="商品ID" align="center" prop="spuId" />
              <el-table-column label="商品名称" align="center" prop="spuName" />
              <el-table-column label="商品规格信息" align="center">
                <template slot-scope="scope">
                  skuID:{{ scope.row.skuId }} <br />
                  规格:{{
                    scope.row.skuSpecs ? JSON.parse(scope.row.skuSpecs)[0].specsName : ""
                  }}
                  <br />
                  内容:{{
                    scope.row.skuSpecs ? JSON.parse(scope.row.skuSpecs)[0].specsValue : ""
                  }}
                  <br />
                  计量单位:{{ scope.row.storeUnit }}
                </template>
              </el-table-column>
              <el-table-column label="单位换算" align="center">
                <template slot-scope="scope">
                  1{{ scope.row.spuUnit }} ≈ {{ scope.row.unitConversion
                  }}{{ scope.row.storeUnit }}
                </template>
              </el-table-column>
              <el-table-column label="浮动重量" align="center">
                <template slot-scope="scope">
                  {{ scope.row.floatingWeight }} {{ scope.row.storeUnit }}
                </template>
              </el-table-column>
              <el-table-column label="入库数量" align="center">
                <template slot-scope="scope">
                  {{ scope.row.totalStoreNum }} {{ scope.row.storeUnit }}
                </template>
              </el-table-column>
              <el-table-column label="入库单价" align="center">
                <template slot-scope="scope">
                  {{ scope.row.storeUnitPrice }}元/{{ scope.row.spuUnit }}
                </template>
              </el-table-column>

              <el-table-column label="总入库数量" align="center">
                <template slot-scope="scope">
                  {{ scope.row.totalStoreNum }}{{ scope.row.storeUnit }}
                </template>
              </el-table-column>
              <el-table-column label="可出库数量" align="center" width="120">
                <template slot-scope="scope">
                  {{ scope.row.canOutboundNum }}{{ scope.row.storeUnit }}
                </template>
              </el-table-column>

              <el-table-column label="本次出库数量" align="center" width="120">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.outboundNum"
                    placeholder=""
                    clearable
                    style="width: 100px"
                    show-word-limit
                    @input="passValue"
                  >
                    <span slot="suffix">{{ scope.row.storeUnit }}</span>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="销售单价" align="center" width="120">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.salePrice"
                    placeholder=""
                    clearable
                    style="width: 100px"
                    show-word-limit
                    @input="passValue"
                  >
                    <span slot="suffix">元/{{ scope.row.spuUnit }}</span>
                  </el-input>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="removetable(scope.row, scope.$index)"
                    >移除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer" style="text-align: center">
      <el-button @click="submitCancel">取 消</el-button>
      <el-button type="primary" @click="submitForm" :loading="btnLading"
        >确认新增</el-button
      >
    </div>

    <el-dialog
      title="关联入库订单"
      :visible.sync="dialogVisible"
      width="1500px"
      :before-close="handleClose"
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="120px"
      >
        <el-form-item prop="key">
          <el-input
            v-model="queryParams.key"
            placeholder="入库单号,入库订单名称,入库商品名称,入库商品ID"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="入库时间" prop="storeTime">
          <el-date-picker
            v-model="queryParams.storeTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="rksjchange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getTableList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="productList"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="入库单号" align="center" prop="storeOdd" width="200" />
        <el-table-column label="入库订单名称" align="center" prop="storeOddName" />
        <el-table-column label="入库时间" align="center" prop="storeDate" width="200" />
        <el-table-column label="入库商品信息" align="skuSpecs" width="150">
          <template slot-scope="scope">
            skuID:{{ scope.row.skuId }} <br />
            规格:{{
              scope.row.skuSpecs ? JSON.parse(scope.row.skuSpecs)[0].specsName : ""
            }}
            <br />
            内容:{{
              scope.row.skuSpecs ? JSON.parse(scope.row.skuSpecs)[0].specsValue : ""
            }}
            <br />
            计量单位:{{ scope.row.storeUnit }}
          </template>
        </el-table-column>
        <el-table-column label="入库单位" align="center" prop="storeUnit" />
        <el-table-column label="入库数量" align="center" prop="storeNum">
          <template slot-scope="scope">
            {{ scope.row.storeNum }}{{ scope.row.storeUnit }}
          </template>
        </el-table-column>
        <el-table-column label="生产日期" align="center" prop="produceDate" width="200" />
        <el-table-column label="保质期" align="center" prop="shelfLife" />
        <el-table-column label="可出库数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.canOutboundNum }}{{ scope.row.storeUnit }}
          </template>
        </el-table-column>
        <el-table-column label="供应商名称" align="center" prop="supplierName" />
        <el-table-column label="供应商电话" align="center" prop="supplierPhone" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getTableList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getClassificationListPage } from "@/api/common/index";
import {
  getstoreOutboundListByShopId,
  storeManageSave,
  queryStoreOdd,
  outboundManageSave,
} from "@/api/manage/storage";
export default {
  data() {
    return {
      dialogVisible: false,
      queryParams: {
        spuName: "",
        categoryId: "",
        pageNo: 1,
        pageSize: 10,
        storeTime: [],
      },
      categoryprops: {
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.categoryLazyLoad,
      },
      total: 0,
      productList: [],
      form: {
        outboundDate: "",
        outboundOdd: "",
        outboundType: "",
        storeOutboundList: [],
        outboundUser: "",
        remark: "",
      },
      multipleSelection: [],
      rules: {
        outboundType: [{ required: true, message: "出库类型不能为空", trigger: "blur" }],
        outboundDate: [{ required: true, message: "出库时间不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    rksjchange(val) {
      this.queryParams.storeStartTime = val[0];
      this.queryParams.storeEndTime = val[1];
    },
    submitForm() {
      console.log(this.form);
      if (this.form.storeOutboundList.length < 1) {
        this.$message.error("请选择出库商品！");
        return;
      }
      for (let index = 0; index < this.form.storeOutboundList.length; index++) {
        const e = this.form.storeOutboundList[index];
        if (!e.outboundNum) {
          this.$message.error("请输入出库商品的数量");
          return;
        } else if (!e.salePrice) {
          this.$message.error("请输入出库商品的销售价");
          return;
        }
      }
      this.$refs.Form.validate((valid) => {
        if (valid) {
          outboundManageSave(this.form).then((res) => {
            if (res.code == 200) {
              this.$message.success("新增成功！");
              this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
              this.$router.replace({ path: "/storage/outbound/index" });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    removetable(row, index) {
      console.log(index);
      this.form.storeOutboundList.splice(index, 1);
    },
    dialogOk() {
      this.dialogVisible = false;
      console.log("this.", this.multipleSelection);
      for (let index = 0; index < this.multipleSelection.length; index++) {
        let params = {
          outboundNum: "",
          salePrice: "",
          storeGoodsId: this.multipleSelection[index].id,
        };
        let obj = { ...this.multipleSelection[index], ...params };
        this.form.storeOutboundList.push(obj);
      }
      console.log(this.form.storeOutboundList);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    selectProduct() {
      this.getTableList();
    },
    getTableList() {
      this.loading = true;
      queryStoreOdd(this.queryParams).then((res) => {
        this.dialogVisible = true;
        this.productList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },

    submitCancel() {
      this.$confirm("是否取消新增,所填写的信息将会消失?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
          this.$router.replace({ path: "/storage/storage/index" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    resetQuery() {
      this.queryParams.storeStartTime = "";
      this.queryParams.storeEndTime = "";
      this.resetForm("queryForm");
      this.getTableList();
    },
    cascaderChange(val) {
      if (val.length == 1) {
        this.queryParams.categoryId = val[0];
      } else if (val.length == 2) {
        this.queryParams.categoryId = val[1];
      } else if (val.length == 3) {
        this.queryParams.categoryId = val[2];
      }
    },
    categoryLazyLoad(node, resolve) {
      let level = node.level;
      console.log(node);
      if (!node.data) {
        getClassificationListPage({ parentId: 0 }).then((res) => {
          //接口
          const nodes = Array.from(res.data).map((item, index) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 2,
          }));
          console.log("111", node);
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 1) {
        getClassificationListPage({ parentId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 2,
            // level: 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 2) {
        getClassificationListPage({ parentId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 1,
            level: 1,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else {
        resolve({});
      }
    },
  },
};
</script>

<style></style>
