<template>
  <div class="bg-in-stock">
    <el-form
      ref="goodsExchangeAddForm"
      :model="goodsExchangeAddForm"
      :rules="goodsExchangeAddFormRule"
      label-width="160px"
      inline
      class="change-form"
    >
      <div class="mx">
        <h3>当前库位: {{ code }}</h3>
      </div>
      <div class="mx">
        <h3>绑定商品</h3>
        <el-button
          class="button"
          size="mini"
          type="primary"
          :disabled="type==='check'"
          v-if="type !== 'detail' && type !== 'audit'"
          @click="handleSelectWarehouseEntryBatch"
          >选择</el-button
        >
      </div>
      <div style="width: 100%; display: block">
        <el-form-item style="width: 100%">
          <el-table
            :data="goodsExchangeAddForm.product_list"
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column label="商品编号">
              <template slot-scope="scope">
               {{ scope.row.goods_vo.sn }}
              </template>
            </el-table-column>
            <el-table-column label="商品名称">
              <template slot-scope="scope">
              {{ scope.row.goods_vo.name }}
              </template>
            </el-table-column>
            <el-table-column label="sku">
              <template slot-scope="scope">
             {{ scope.row.product_vo.sku }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="序列号">
              <template slot-scope="scope">

                {{ scope.row.product_vo.sn_code }}
              </template>
            </el-table-column> -->
            <el-table-column prop="product_vo.spec_name" label="规格型号" v-if="id">
              <!-- <template slot-scope="scope">
                {{ scope.row.product_vo.spec_name.join("/") }}
              </template> -->
            </el-table-column>
            <el-table-column prop="product_vo.spec_name" label="规格型号" v-else>
              <!-- <template slot-scope="scope">
                {{ scope.row.product_vo.spec_name.join("/") }}
              </template> -->
            </el-table-column>
            <el-table-column label="单位">
              <template slot-scope="scope">
             {{ scope.row.product_vo.unit }}
              </template>
            </el-table-column>
           <!--  <el-table-column label="数量">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.out_num"
                  type="number"
                  :min="0"
                  :maxlength="20"
                  :disabled="type === 'detail' || type === 'audit'"
                ></el-input>
              </template>
            </el-table-column> -->
          <!--   <el-table-column label="库存数量">
              <template slot-scope="scope">
                {{ scope.row.usable_stock }}
              </template>
            </el-table-column> -->
          <!--   <el-table-column label="剩余数量">
              <template slot-scope="scope">
                {{ scope.row.usable_stock - scope.row.out_num || 0 }}
              </template>
            </el-table-column> -->
            <el-table-column
              label="操作"
              v-if="type !== 'detail' && type !== 'audit'"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="
                    goodsExchangeAddForm.product_list.splice(scope.$index, 1)
                  "
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </div>
    </el-form>
    <div class="footer">
      <el-button
        v-if="type !== 'audit' && type !== 'detail'"
        type="primary"
        :disabled="type==='check'"
        @click="saveGoodsExchangeAddForm"
        >添加
      </el-button>
      <!--   <el-button
        v-if="type !== 'audit' && type !== 'detail'"
        type="primary"
        @click="submitGoodsExchangeAddForm"
        >出库
      </el-button>
      <el-button @click="printIng" v-if="type == 'audit'">打印</el-button>-->
      <el-button @click="$router.back()">返回</el-button>
    </div>

    <el-dialog
      title="商品列表"
      :visible.sync="goodsVisible"
      width="1000px"
      @close="closeGoosData"
    >
      <el-table
      ref="table"
        :data="goodsData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="goods_vo.sn" label="商品编号"> </el-table-column>
        <el-table-column prop="product_vo.sku" label="sku"> </el-table-column>
        <el-table-column prop="product_vo.sn_code" label="序列号"> </el-table-column>
        <el-table-column prop="goods_vo.name" label="商品名称"> </el-table-column>
        <el-table-column prop="product_vo.spec_name" label="规格型号">
          <!-- <template slot-scope="scope">
                {{ scope.row.product_vo.spec_name.join("/") }}
              </template> -->
           </el-table-column>
        <el-table-column prop="product_vo.unit" label="单位"> </el-table-column>
        <el-table-column prop="usable_stock" label="库存数量">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeGoosData">取 消</el-button>
        <el-button type="primary" @click="submitGoosData()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Foundation, RegExp } from "~/ui-utils";
import * as API_GoodsExchange from "@/api/goodsExchange";
import * as API_GoodsLend from "@/api/goodsLend"
import * as API_Setting from "@/api/setting";
import * as API_BasicSetting from "@/api/basicSetting";
import * as API_Erp from "@/api/erp";
import * as API_Auth from "@/api/auth";
export default {
  name: "goodsExchangeAdd",
  data() {
    const checkPrice = (rule, value, callback) => {
      if (!value && value !== 0) {
        return callback(new Error("换货金额不能为空"));
      } else if (!RegExp.money.test(value)) {
        callback(new Error("请输入正整数或者两位小数"));
      } else if (parseFloat(value) > 99999999) {
        callback(new Error("换货金额设置超过上限值"));
      } else {
        callback();
      }
    };
    return {
      typeList: [],
      adminList: [],
      dialogVisible: false,
      warehouseList: [],
      deptList: [],
      deptListAll: [],
      orderList: [],
      id: "",
      type: "",
      /** 出库单表单*/
      goodsExchangeAddForm: {
        product_list: [],
        type: "",
      },
      /** 校验规则 */
      goodsExchangeAddFormRule: {},
      warehouseProduct: null,
      scanDialogVisible: false,
      scanGoodsForm: {},
      //出入库
      sttorageType: "",
      // 出库商品明细
      goodsVisible: false,
      goodsData: [],
      // 暂存已勾选商品
      goodsList: [],
      product_list: [],
      code: "", //当前库位号
      warehouse_id:"",//当前仓库id
      activeList:[]//选中的商品
    };
  },
  mounted() {
    this.id=this.$route.params.id
    this.warehouse_id=this.$route.params.warehouse_id
    this.code = this.$route.params.code;
    this.type=this.$route.params.type
    if(this.type==='check'){
      this.GET_goodsExchangeAddDetail();
    }
    this.GET_WarehouseList();
    this.GET_DeptList();
    this.outType();
  },
  watch: {
    $route: {
      immediate: true,
      handler(newVal) {
        if (this.$route.name === "goodsExchangeEdit") {
          this.type = "edit";
        } else if (this.$route.name === "goodsExchangeAudit") {
          this.type = "audit";
        } else if (this.$route.name === "goodsExchangeReturn") {
          this.type = "return";
        } else if (this.$route.name === "inventoryItem") {
          this.type = "add";
          this.$set(
            this.goodsExchangeAddForm,
            "change_time",
            new Date().getTime()
          );
        } else if (this.$route.name === "goodsExchangeDetail") {
          this.type = "detail";
        }
        if (this.$route.params.id) {
          this.id = this.$route.params.id;
        }
        this.GET_AdministratorList();
      },
    },
  },
  computed: {
    ...mapGetters(["user"]),
  },
  methods: {
    // 保存已选商品
    submitGoosData() {
      if (this.goodsList.length >= 1) {
        this.goodsExchangeAddForm.product_list = this.goodsList
        this.goodsVisible = false;
      } else {
        this.$message.error("请选择商品信息");
      }
    },
    //选择商品
    handleSelectionChange(val) {
      this.goodsList=val
    },
    // 关闭商品明细
    closeGoosData() {
      this.goodsVisible = false;
    },
    //获取出库类型字典
    outType() {
      API_Setting.getPage({ dictType: "out_warehouse_type" }).then((res) => {
        this.typeList = res.data.filter((el) => {
          if (el.value !== "SALE_OUT" && el.value !== "HAIL_OUT") {
            return el;
          }
        });
      });
    },
    // 打印功能
    printIng() {},
    toSearch() {
      API_GoodsExchange.getGoodsInfo({
        barcode: this.scanGoodsForm.bar_code,
      }).then((res) => {});
    },
    // 扫码入库
    scanCode() {
      this.scanDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    /** 获取人员列表 */
    GET_AdministratorList() {
      API_Auth.getAdministratorList({
        page_no: 1,
        page_size: 9999,
        user_state: 0,
      }).then((response) => {
        this.adminList = response.data;
      });
    },
    /** 获取仓库 */
    GET_WarehouseList(e) {
      API_BasicSetting.getWarehouseListAll().then((response) => {
        this.warehouseList = response;
      });
    },
    //保存
    saveGoodsExchangeAddForm() {
      this.$refs["goodsExchangeAddForm"].validate((valid) => {
        if (valid) {
          const { id } = this.goodsExchangeAddForm;
          const params = this.MixinClone(this.goodsExchangeAddForm);
          const query=[]
          if (!this.goodsExchangeAddForm.product_list.length) {
            this.$message.error("请选择商品！");
            return;
          }
          this.goodsExchangeAddForm.product_list.map(el=>{
            return query.push(el.id)
          })
          params.stock_id_list=query
          API_GoodsLend.bindAreaStock(this.warehouse_id,this.id,params).then(() => {
              this.$message.success("添加成功！");
              const { callback } = this.$route.params;
              if (typeof callback === "function") callback();
              this.$store.dispatch("delCurrentViews", {
                view: this.$route,
                $router: this.$router,
              });
              this.$router.push({ name: "goodsLend" });
            });
        }
      });
    },
    reverseSelect(rows) {
         this.$refs.table.toggleRowSelection(rows);
     },
    // 商品列表
    async handleSelectWarehouseEntryBatch() {
      API_GoodsLend.goodNotAreaList(this.warehouse_id,this.params).then((res) => {
        this.goodsData = res.records;
        this.goodsVisible = true;
          API_GoodsLend.getInfo({id:this.id}).then(response=>{
            this.activeList= response.area_stock_vo
            res.records.map(item=>{
              response.area_stock_vo.map(el=>{
                if(item.id===el.product_stock_id){
                  this.reverseSelect(item)
                }
              })
            })
          })
      });
      /* if (!this.goodsExchangeAddForm.warehouse_id) {
        this.$message.error("请先选择仓库！");
        return;
      }
      const goodsData = await this.$EnwarehouseEntryBatch({
        goodsApi: `/admin/erp/warehouseOut/getGoodByWarehouse/${this.goodsExchangeAddForm.warehouse_id}`,
        warehouseList: this.warehouseList,
        //change_list
        selectedIds: this.id
          ? this.goodsExchangeAddForm.product_list &&
            this.goodsExchangeAddForm.product_list.map((item) => item.id)
          : this.goodsExchangeAddForm.product_list.map((item) => item.id),
        purchasePlanApiParams: {
          warehouse_id: this.goodsExchangeAddForm.warehouse_id,
        },
      });
      this.goodsExchangeAddForm.warehouse_id = goodsData.warehouse_id;
      this.goodsExchangeAddForm.product_list = goodsData.purchasePlans;
      this.goodsExchangeAddForm.change_amount =
        this.goodsExchangeAddForm.product_list.reduce(
          (sum, obj) => sum + obj.entry_price,
          0
        );*/
    },
    /** 选择订单编号 */
    async handleSelectOrderSn() {
      const orders = await this.$EnPickerOrder({
        orderApi: "admin/erp/order",
        selectedIds: [this.goodsExchangeAddForm.order_sn],
        limit: 1,
      });
      this.$set(
        this.goodsExchangeAddForm,
        "distribution_name",
        orders[0].distribution_name
      );
      const orderIds = orders.map((v) => v.sn);
      this.$set(this.goodsExchangeAddForm, "order_sn", orderIds.join(","));
      this.GET_WarehouseOutProduct();
    },
    /** 获取出库单商品明细 */
    async GET_WarehouseOutProduct() {
      const res = await API_Erp.getWarehouseOutProduct({
        order_sn: this.goodsExchangeAddForm.order_sn,
      });
      this.goodsExchangeAddForm.return_list = res.data.map((item) => {
        item.amount = item.product_price;
        item.product_sn = item.product_sn;
        item.product_name = item.product_name;
        item.specification = item.product_specification;
        item.product_id = item.product_id;
        item.unit = item.product_unit;
        item.out_num = item.return_num;
        item.stock_sn = item.warehouse_entry_sn;
        item.cost_price = item.product_cost_price;
        return item;
      });
    },
    /** 获取仓库 */
    GET_DeptList() {
      API_GoodsExchange.getInfo().then((response) => {
        this.deptListAll = response;
        this.deptListAll.password = "";
      });
    },
    /** 切换仓库 */
    handleChangeWareHouse(val) {
      //this.goodsExchangeAddForm.product_list = []change_list
    },
    /** 获取详情页面数据 */
    GET_goodsExchangeAddDetail() {
      this.$nextTick(() => {
        API_GoodsLend.getInfo({id:this.id}).then(res=>{
         this.goodsExchangeAddForm.product_list=res.area_stock_vo
        })
      });
    },
  },
};
</script>

<style type="text/scss" lang="scss" scoped>
/** 底部步骤 */
.footer {
  width: 100%;
  padding: 10px;
  bottom: 0px;
  text-align: center;
  z-index: 999;
}

.mx {
  display: flex;
  align-items: center;
  width: 100%;

  .button {
    margin-left: 10px;
  }
}

.change-form {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  min-width: 900px;

  .change-form-item {
    width: 30%;
    margin: 0 10px 20px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  /deep/ {
    .el-form-item__content {
      flex: 1;
      width: 100%;
    }

    .el-date-editor,
    .el-cascader,
    .el-select {
      width: 100%;
    }
  }
}

.bg-in-stock {
  background-color: #fff;
  margin: 10px;
  padding: 25px;
}

.goods-info {
  display: flex;

  .goods-name-box {
    text-align: left;

    .goods-name {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 16px;
    }

    .specs {
      color: #999999;
    }
  }
}

/deep/ {
  .el-input--suffix .el-input__inner {
    padding-right: 10px;
  }

  .error-input {
    .el-input__inner {
      border: 1px solid red;
    }
  }
}
</style>
