<template>
  <div>
    <el-card>
      <el-form :inline="true"  class="query-form" size="mini">
        <el-form-item class="query-form-item" label="单据类型名称:">
          <el-input
            v-model="filterQuery.originName"
            placeholder="请输入单据类型名称"
          ></el-input>
        </el-form-item>
        <el-form-item class="query-form-item" label="单据类型代码:">
          <el-input
            v-model="filterQuery.originAction"
            placeholder="请输入单据类型代码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button-group style="margin-left: 10px;display:flex;">
            <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="handleAddClick">新增</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row>
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="补单类型名称" prop="originName"></el-table-column>
        <el-table-column label="补单类型代码" prop="originAction"></el-table-column>
        <el-table-column label="目标单据类型" prop="targetBusName"></el-table-column>
        <el-table-column label="类型" prop="type">
          <template slot-scope="scope">
            <span>{{ typeMap[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="enable">
          <template slot-scope="scope">
            <span>{{ enableMap[scope.row.enable] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click.native.stop="handleModifyClick(scope.row)"
            >编辑
            </el-button
            >
            <el-button
              type="text"
              @click.native.stop="deleteDialog(scope.row.id)"
            >删除
            </el-button
            >
          </template>

        </el-table-column>
      </el-table>

      <el-dialog
        :title="formMap[formName]"
        :visible.sync="modifyDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="modifyDialogVisible"
        class="dialog-two"
        width="60%"
        top="5vh"
      >
        <modifyDialog :inputQuery="inputQuery"></modifyDialog>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="onAddSubmit"
          >提交
          </el-button
          >
          <el-button size="small" @click="cancelDialog"
          >取消
          </el-button
          >
        </div>
      </el-dialog>

      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="getList"
      ></pagination>
    </el-card>
  </div>
</template>
<script>
import {isBlank} from "@/utils/strUtil";
import modifyDialog from "@/views/system/param/busTypeChangeModify.vue";
import {
  getBusTypeChangeList,
  updateBusTypeChange,
  addBusTypeChange,
  deleteBusTypeChange
} from "@/api/basic/busTypeChange";

export default {
  data() {
    return {
      filterQuery: {
        name: null,
        originAction: null,
        page: 1,
        limit: 20,
      },
      modifyDialogVisible: false,
      list: [],
      inputQuery: {
        id: null,
        originName: null,
        originAction: null,
        targetAction: null,
        name: null,
        enable: null,
        type: null,
        remark: null
      },
      enableMap: {
        false: "禁用",
        true: "启用",
      },
      total: 0,
      loading: false,
      typeMap: {
        1: "耗材领用",
        2: "产品申购",
        3: "采购计划",
        4: "盘点转单"
      },
      formMap: {
        add: "新增单据生成设置",
        edit: "编辑单据生成设置",
      },
      formName: null,

    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        name: null,
        originAction: null,
        page: 1,
        limit: 20,
      };
      this.getList();
    },
    cancelDialog() {
      this.getList();
      this.modifyDialogVisible = false;

    },
    search() {
      this.filterQuery.page = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getBusTypeChangeList(this.filterQuery)
        .then((response) => {
          if (response.code === 20000) {
            this.list = response.data.list || [];
            this.total = response.data.total || 0;
          } else {
            this.$message.error(response.message);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },

    onAddSubmit() {
      if (isBlank(this.inputQuery.originName)) {
        this.$message.error("单据类型名称不能为空！")
        return;
      }
      if (isBlank(this.inputQuery.originAction)) {
        this.$message.error("单据类型代码不能为空！");
        return;
      }
      if (isBlank(this.inputQuery.targetAction)) {
        this.$message.error("目标单据类型不能为空！")
        return;
      }
      if (isBlank(this.inputQuery.enable)) {
        this.$message.error("请选择启用状态！");
        return;
      }
      if (isBlank(this.inputQuery.type)) {
        this.$message.error("请选择类型！");
        return;
      }

      if (this.formName === "add") {
        let numRegExp = '^[0-9]*$';
        let numReg = new RegExp(numRegExp);
        if (numReg.test(this.inputQuery.name)) {
          this.$message.error("单据类型名称不得为纯数字类型！");
          return;
        }

        addBusTypeChange(this.inputQuery).then((res) => {
          if (res.code === 20000) {
            this.cancelDialog();
            this.loading = false;
            this.getList();
          }
        }).catch((error) => {
          this.loading = false;
        });
      } else {
        updateBusTypeChange(this.inputQuery).then((res) => {
          if (res.code === 20000) {
            this.loading = false;
            this.cancelDialog();
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        }).catch((error) => {
          this.loading = false;
          this.$message.error(error.message);
          this.cancelDialog();
        });
      }
    },

    handleAddClick() {
      this.formName = 'add';
      this.inputQuery = {
        id: null,
        originName: null,
        originAction: null,
        targetAction: null,
        name: null,
        enable: null,
        remark: null
      };
      this.modifyDialogVisible = true;
    },

    handleModifyClick(row) {
      this.formName = 'edit';
      this.inputQuery = row;
      this.modifyDialogVisible = true;
    },

    deleteDialog(rowId) {
      this.$confirm("此操作将永久删除该补单设置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {id: rowId};
          deleteBusTypeChange(params).then((res) => {
            if (res.code === 20000) {
              this.$message.success("删除成功！");
              this.getList();
            } else {
              this.$message.error(res.message);
            }
          })
        })
        .catch(() => {
        });
    },
  },
  components: {
    modifyDialog
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.el-form-item--mini.el-form-item {
  margin-bottom: 9px;
}
</style>
