<!-- 耗材列表的新增耗材盘点 -->
<template>
  <el-dialog title="耗材盘点" v-model="dialogVisible" width="80%" @close="reset">
    <el-form ref="form" :model="form" :rules="rules" label-position="left" inline>
      <el-form-item label="账存数量">
        <el-input v-model="form.stockNumber" readonly style="width: 180px"></el-input>
      </el-form-item>
      <el-form-item label="实际数量">
        <el-input-number v-model="form.actualNumber" :min="0" :step="1" step-strictly
          style="width: 180px"></el-input-number>
      </el-form-item>
      <el-form-item label="盈亏数量">
        <el-input v-model="profitNumber" readonly :class="{ lose: profitNumber < 0 }" style="width: 180px"></el-input>
      </el-form-item>
      <el-form-item label="单价">
        <el-input v-model="form.price" readonly></el-input>
      </el-form-item>
      <el-form-item label="盈亏金额">
        <el-input v-model="profitPrice" readonly :class="{ lose: profitNumber < 0 }" style="width: 180px"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" placeholder="请输入备注" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
      </el-form-item>
    </el-form>
    <div class="head-container">
      <el-table ref="table" :data="tableData.list" v-loading="tableData.loading" border stripe>
        <el-table-column label="商品信息" width="150px">
          <template v-slot="scope">
            <div class="shop_info">
              <el-image :src="scope.row.coverImg" style="width: 30px; height: 30px">
                <template #error>
                  <div class="img_error">
                    <i class="icon el-icon-document-delete"></i>
                  </div>
                </template>
              </el-image>
              <span>{{ scope.row.conName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="售价" prop="price">
          <template v-slot="scope">￥{{ scope.row.winLossAmount }}</template>
        </el-table-column>
        <el-table-column label="账存数量" prop="beforeNumber"></el-table-column>
        <el-table-column label="盈亏数量" prop="inOutNumber"></el-table-column>
        <el-table-column label="盈亏金额" prop="winLossAmount">
          <template v-slot="scope">￥{{ scope.row.winLossAmount }}</template>
        </el-table-column>
        <el-table-column label="实际库存" prop="actualNumber"></el-table-column>
        <el-table-column label="盘点时间" prop="createTime"></el-table-column>
        <el-table-column label="盘点备注" prop="remark"></el-table-column>
      </el-table>
    </div>
    <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-sizes="[5, 10, 30, 50]"
      :page-size="tableData.size" @current-change="paginationChange" @size-change="sizeChange"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </el-dialog>
</template>

<script>
import { ElNotification } from "element-plus";
import { formatDecimal } from "@/utils/tools.js";
import { hasPermission } from "@/utils/limits.js";
import stockApi from "@/api/product/stock";
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {
        skuId: "", // sku商品必传
        productId: "", // 必传
        stocktakinNum: "", // 必传
        price: "", // 商品价格 非必传 为空盘点价格为商品价格
        remark: "", // 盘点备注 非必传
        actualNumber: 0,
        stockNumber: "",
      },
      rules: {
        stocktakinNum: [
          {
            required: true,
            message: "请输入盘点数量",
            trigger: "blur",
          },
        ],
      },
      resetForm: "",
      searhForm: {
        name: "",
        skuId: "",
        productId: "",
      },
      tableData: {
        page: 1,
        size: 5,
        total: 0,
        loading: false,
        list: [],
      },
    };
  },
  mounted() {
    this.resetForm = { ...this.form };
  },
  computed: {
    profitNumber() {
      if (this.form.stockNumber == undefined) {
        return this.form.actualNumber - 0;
      } else {
        return this.form.actualNumber - this.form.stockNumber;
      }
    },
    profitPrice() {
      return formatDecimal((this.form.actualNumber - this.form.stockNumber) * this.form.price);
    },
  },
  methods: {
    reset() {
      this.form = { ...this.resetForm };
    },
    onSubmitHandle() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            this.form.winLossNumber = this.profitNumber;
            this.loading = true;
            let res = await stockApi.check({
              conId: this.form.id,
              conName: this.form.conName,
              stockNumber: this.form.stockNumber,
              actualNumber: this.form.actualNumber,
              winLossNumber: this.form.winLossNumber,
              price: this.form.price,
              remark: this.form.remark,
            });
            this.$emit("success", res);
            this.dialogVisible = false;
            this.loading = false;
            ElNotification({
              title: "注意",
              message: `添加成功`,
              type: "success",
            });
            this.getTableData();
          } catch (error) {
            this.loading = false;
            console.log(error);
          }
        }
      });
    },
    async show(obj) {
      console.log(obj);
      let res = await hasPermission("允许耗材盘点");
      if (!res) {
        return;
      }
      this.form.remark = "";
      this.form.stocktakinNum = 0;
      this.form.winLossNumber = 0;

      this.form = Object.assign(this.form, obj);
      this.dialogVisible = true;
      this.form.conInfoId = obj.consId;
      this.form.actualNumber = obj.stockNumber < 0 ? 0 : obj.stockNumber;
      // this.form.stockNumber = obj.actualNumber
      this.form.stockNumber = obj.stockNumber;
      this.form.price == null ? 0 : this.form.price;
      this.searhForm.productId = obj.id;
      this.getTableData();
    },
    // 分页大小改变
    sizeChange(e) {
      this.tableData.size = e;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    // 商品列表
    async getTableData() {
      try {
        this.tableData.loading = true;
        const res = await stockApi.checkRecord({
          page: this.tableData.page,
          size: this.tableData.size,
          conId: this.searhForm.productId,
          sort: "id,desc",
        });
        this.tableData.list = res.records;
        this.tableData.total = res.totalRow;
        setTimeout(() => {
          this.tableData.loading = false;
        }, 500);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
:deep(.lose .el-input__inner) {
  color: rgb(238, 29, 29);
}

.shop_info {
  display: flex;
  align-items: center;

  span {
    margin-left: 10px;
  }
}
</style>