<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :size="size"
      :inline="true"
      label-width="68px"
    >
      <el-row>
        <el-col :span="18">
          <el-form-item label="来源单据">
            <el-input
              v-model="queryParams.source"
              clearable
              @keyup.enter.native="btnQuery"
            />
          </el-form-item>
          <el-form-item label="客户">
            <DrPopoverSelectV2
              :size="size"
              v-model="queryParams.customerName"
              valueKey="name"
              referName="CUSTOMER_PARAM"
              :dataMapping="{
                customer: 'id',
                customerName: 'name',
              }"
              :source.sync="queryParams"
            >
            </DrPopoverSelectV2>
          </el-form-item>
          <el-form-item label="物料">
            <DrPopoverSelectV2
              :size="size"
              v-model="queryParams.materialName"
              valueKey="name"
              referName="MATERIAL_PARAM"
              :dataMapping="{
                material: 'id',
                materialName: 'name',
              }"
              :source.sync="queryParams"
            >
            </DrPopoverSelectV2>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item style="float: right">
            <el-button
              type="primary"
              icon="el-icon-search"
              :size="size"
              @click="btnQuery"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              :size="size"
              @click="btnResetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :size="size" v-loading="loading" :data="list" height="500px">
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center"
        fixed
      />
      <el-table-column
        show-overflow-tooltip
        width="200"
        label="来源单据"
        align="center"
        prop="source"
      />
      <el-table-column
        show-overflow-tooltip
        width="150"
        label="集采编号"
        align="center"
        prop="puCode"
      />
      <el-table-column
        show-overflow-tooltip
        width="200"
        label="客户"
        align="center"
        prop="customerName"
      />
      <el-table-column
        show-overflow-tooltip
        width="150"
        label="物料编码"
        align="center"
        prop="materialCode"
      />
      <el-table-column
        show-overflow-tooltip
        width="300"
        label="物料"
        align="center"
        prop="materialName"
      />
      <el-table-column
        show-overflow-tooltip
        width="150"
        label="可用量"
        align="center"
        prop="qty"
      />
      <el-table-column
        show-overflow-tooltip
        width="150"
        label="已用量"
        align="center"
        prop="usedQty"
      />
      <el-table-column
        show-overflow-tooltip
        width="150"
        label="预留数量"
        align="center"
        prop="reservedQty"
      />
      <el-table-column
        show-overflow-tooltip
        width="150"
        label="创建时间"
        align="center"
        prop="createTime"
      />
      <el-table-column
        width="250"
        label="操作"
        fixed="right"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            :size="size"
            type="text"
            icon="el-icon-edit"
            @click="btnUpdate(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationClass">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改任务对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form :size="size" ref="form" :model="form" label-width="80px">
        <el-descriptions :column="1">
          <el-descriptions-item label="单据来源">{{
            form.source
          }}</el-descriptions-item>
          <el-descriptions-item label="集采编号">{{
            form.puCode
          }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            form.createTime
          }}</el-descriptions-item>
          <el-descriptions-item label="客户">{{
            form.customerName
          }}</el-descriptions-item>
          <el-descriptions-item label="物料编码">{{
            form.materialCode
          }}</el-descriptions-item>
          <el-descriptions-item label="物料" span="2">{{
            form.materialName
          }}</el-descriptions-item>
          <el-descriptions-item label="已用量">{{
            form.usedQty
          }}</el-descriptions-item>
          <el-descriptions-item label="预留数量">{{
            form.reservedQty
          }}</el-descriptions-item>
        </el-descriptions>
        <el-form-item label="可用量">
          <el-input
            type="number"
            min="0"
            :size="size"
            v-model="form.qty"
            @input="useFormQtyChange"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button :size="size" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button :size="size" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { materialList, getDetail, update } from "@/api/purchase/ownership.js";

export default {
  data() {
    return {
      size: "mini",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 列表数据
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        source: null,
        customer: null,
        customerName: null,
        material: null,
        materialName: null,
      },
      // 表单参数
      form: {},
      //oldQty
      oldQty: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询任务列表 */
    getList() {
      this.loading = true;
      materialList(this.queryParams).then((response) => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        id: null,
        ownerId: null,
        material: null,
        materialName: null,
        unit: null,
        unitName: null,
        reservedQty: null,
        reservedPeriod: null,
        warehouse: null,
        warehouseName: null,
        allocation: null,
        allocationName: null,
        qty: null,
        usedQty: null,
        revision: null,
        delFlag: null,
        demandItemId: null,
        materialCode: null,
        source: null,
        customerName: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    btnQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    btnResetQuery() {
      // this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        source: null,
        customer: null,
        customerName: null,
        material: null,
        materialName: null,
      };
      this.btnQuery();
    },
    /** 修改按钮操作 */
    btnUpdate(row) {
      this.oldQty = null;
      this.reset();
      this.form.source = row.source;
      this.form.customerName = row.customerName;
      const id = row.id || this.ids;
      getDetail(id).then((response) => {
        this.form = { ...this.form, ...response.data };
        this.open = true;
        this.title = "修改预留";
        this.oldQty = this.form.qty || 0;
      });
    },
    /** 提交表单 */
    submitForm() {
      update(this.form).then((response) => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    //值改变后
    useFormQtyChange(val) {
      let cha = val - this.oldQty;
      this.form.usedQty = this.form.usedQty - cha;
      this.oldQty = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.paginationClass {
  z-index: 500;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 100%;
  line-height: var(--footer-height);
  color: #fff;
}
</style>
