<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
        <el-form-item class="query-form-item" label="单据类型名称:">
          <el-input
            v-model="filterQuery.name"
            placeholder="请输入单据类型名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="query-form-item" label="单据类型代码:">
          <el-input
            v-model="filterQuery.originAction"
            placeholder="请输入单据类型代码"
            clearable
          ></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="出入库单" header-align="center">
          <el-table-column label="目标出入库单" prop="targetName"></el-table-column>
          <el-table-column label="时间间隔(h)" prop="beforeTime"></el-table-column>
          <el-table-column label="单据状态" prop="auditStatus">
            <template slot-scope="scope">
              <span>{{ orderStatus[scope.row.auditStatus] }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="业务单" header-align="center">
          <el-table-column label="目标业务单" prop="targetBusName"></el-table-column>
          <el-table-column label="时间间隔(h)" prop="busBeforeTime"></el-table-column>
          <el-table-column label="单据状态" prop="busAuditStatus">
            <template slot-scope="scope">
              <span>{{ orderStatus[scope.row.busAuditStatus] }}</span>
            </template>
          </el-table-column>
        </el-table-column>


        <!--        <el-table-column label="目标当前仓库" prop="invName"></el-table-column>-->
        <!--        <el-table-column label="目标往来仓库" prop="defaultInvName"></el-table-column>-->
        <el-table-column label="补单方式" prop="supplementAll">
          <template slot-scope="scope">
            <span>{{ enableMap[scope.row.supplementAll] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建单据模式" prop="createType">

          <template slot-scope="scope">
            <span>{{ createTypeMap[scope.row.createType] }}</span>
          </template>

        </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" :loading="addLoading"
          >提交
          </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/busTypePreModify.vue";
import {
  getBusTypePreResList2,
  addBusTypePre,
  updateBusTypePre,
  deleteBusTypePre, getBusTypePreList
} from "@/api/basic/busTypePre";

export default {
  data() {
    return {
      filterQuery: {
        name: null,
        originAction: null,
        page: 1,
        limit: 20,
      },
      modifyDialogVisible: false,
      list: [],
      inputQuery: {
        id: null,
        originAction: null,
        action: null,
        invCode: null,
        defaultInvCode: null,
        beforeTime: 0,
        busBeforeTime: 0,
        supplementAll: true,
        intro: null,
        remark: null,
        auditStatus: null,
        busAuditStatus: null,
        createType: null,
        splitOrder: null,
      },
      enableMap: {
        true: "全量补单",
        false: "缺量补单",
      },

      orderStatus: {
        1: "草稿",
        2: "待审核",
        3: "已审核"
      },

      createTypeMap: {
        1: "送货至入库补单",
        2: "向上级仓库补单",
        3: "预验收转入库补单",
        4: "寄售转入库补单",
      },

      total: 0,
      loading: false,
      formMap: {
        add: "新增出入库单据流转设置",
        edit: "编辑出入库单据流转设置",
      },
      formName: null,
      addLoading: false,
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        name: null,
        originAction: null,
        page: 1,
        limit: 20,
      };
      this.getList();
    },
    cancelDialog() {
      this.modifyDialogVisible = false;
      this.getList();
    },
    search() {
      this.filterQuery.page = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getBusTypePreResList2(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.originAction)) {
        this.$message.error("原单据类型不能为空！");
        return;
      }
      if (isBlank(this.inputQuery.action) && isBlank(this.inputQuery.targetBusAction)) {
        this.$message.error("目标出入库单与目标业务单不能同时为空！")
        return;
      }
      if (isBlank(this.inputQuery.supplementAll)) {
        this.$message.error("补单方式不能为空！")
        return;
      }
      if (this.inputQuery.beforeTime < 0) {
        this.$message.error("生成出入库单时间间隔不能为负数！")
        return;
      }
      if (this.inputQuery.busBeforeTime < 0) {
        this.$message.error("生成业务单时间间隔不能为负数！")
        return;
      }
      // if (isBlank(this.inputQuery.invCode)) {
      //   this.$message.error("目标所在仓库不能为空！")
      //   return;
      // }
      // if (!isBlank(this.inputQuery.beforeTime) && this.inputQuery.beforeTime < 0) {
      //   this.$message.error("推移时间不能小于0！");
      //   return;
      // }

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

        addBusTypePre(this.inputQuery).then((res) => {
          this.addLoading = false
          if (res.code === 20000) {
            // this.loading = false;
            this.cancelDialog();
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        }).catch(() => {
          this.addLoading = false
        });
      } else {
        this.addLoading = true
        updateBusTypePre(this.inputQuery).then((res) => {
          this.addLoading = false
          if (res.code === 20000) {
            this.cancelDialog();
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        }).catch((error) => {
          this.addLoading = false
          this.$message.error(error.message);
          this.cancelDialog();
        });
      }
    },

    handleAddClick() {
      this.formName = 'add';
      this.inputQuery = {
        id: null,
        originAction: null,
        action: null,
        invCode: null,
        defaultInvCode: null,
        beforeTime: 0,
        busBeforeTime: 0,
        supplementAll: true,
        intro: null,
        remark: null,
        auditStatus: null,
        busAuditStatus: null,
        createType: null,
        splitOrder: 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};
          deleteBusTypePre(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>
