<template>
  <el-card
    v-loading="loading"
    :body-style="{
      height: '100%',
      padding: 0,
      display: 'flex',
      'flex-direction': 'column',
    }"
  >
    <el-super-search
      v-model="params"
      :size="size"
      :dict="dict"
      :columns="SearchColumns"
      @reset="btnResetQuery"
      @submit="getList(params, page)"
    ></el-super-search>

    <el-super-ux-table
      v-model="list"
      :size="size"
      :dict="dict"
      :page="page"
      :columns="TableColumns"
      index
      pagination
      convenitentOperation
      highlight-current-row
      storage-key="ownerShipSuperTable"
      @pagination="getList({ ...page, ...params })"
      style="margin: 16px 0 0"
    >
      <ux-table-column fixed="right" title="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button
            :size="size"
            type="text"
            icon="el-icon-edit"
            @click="btnUpdate(scope.row)"
            >修改</el-button
          >
        </template>
      </ux-table-column>
    </el-super-ux-table>

    <!-- 添加或修改任务对话框 -->
    <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="2">
          <el-descriptions-item
            v-for="({ item, attr }, index) in FormColumns"
            :key="index"
            :label="item.title"
          >
            <el-input
              v-if="attr.is === 'el-input-number'"
              type="number"
              min="0"
              :size="size"
              v-model="form[item.key]"
              @input="useFormQtyChange"
            />
            <span v-else>{{ form[item.key] }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <!-- <el-super-form
        v-model="form"
        :dict="dict"
        :rules="rules"
        :size="size"
        :columns="FormColumns"
        ref="superForm"
        label-width="auto"
        label-position="right"
      >
        <template slot="qty" slot-scope="scope">
          <component
            v-bind="scope.attr"
            v-model="scope.row[scope.item.key]"
            :size="$attrs.size"
            :source.sync="scope.row"
            @change="useFormQtyChange"
          >
          </component
        ></template>
      </el-super-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>
  </el-card>
</template>

<script>
import { materialList, getDetail, update } from "@/api/purchase/ownership.js";
import useColumns from "./columns";
import { dicts } from "./dicts";
export default {
  name: "ownerShip",
  dicts: [...dicts],
  components: {
    ElSuperForm: () => import("@/components/super-form/index.vue"),
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
    ElSuperSearch: () => import("@/components/super-search/index.vue"),
  },
  data() {
    const { SearchColumns, TableColumns, FormColumns } = useColumns();
    const params = this.$init.params(SearchColumns);
    const page = this.$init.page();
    const rules = this.$init.rules(FormColumns);
    const form = this.$init.params(FormColumns);
    return {
      page,
      rules,
      params,
      size: "mini",
      SearchColumns,
      TableColumns,
      FormColumns,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 列表数据
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: form,
      //oldQty
      oldQty: 0,
    };
  },
  created() {
    this.getList(this.params, this.page);
  },
  methods: {
    /** 查询任务列表 */
    getList(params, page) {
      this.loading = true;
      materialList({
        ...params,
        ...page,
      }).then((response) => {
        this.list = response.rows;
        this.page.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");
    },
    /** 重置按钮操作 */
    btnResetQuery() {
      this.params = this.$init.params(this.SearchColumns);
      this.page = this.$init.page();
      this.getList(this.params, this.page);
    },
    /** 修改按钮操作 */
    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() {
      this.dialogLoading = true;
      update(this.form).then(response => {
        this.dialogLoading = false;
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList(this.params, this.page);
      });
    },
    //值改变后
    useFormQtyChange(val) {
      let cha = val - this.oldQty;
      this.form.usedQty = this.form.usedQty - cha;
      this.oldQty = val;
    },
  },
};
</script>

<style scoped lang="scss">
.el-card {
  width: calc(100% - 32px);
  height: calc(100vh - 32px);
  margin: 16px;
  padding: 16px;
  border-radius: 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-button-group + .el-button-group {
  margin: 0 0 0 8px;
}
</style>
