<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="请输入单据类型"
          ></el-input>
        </el-form-item>
        <el-form-item class="query-form-item" label="出入库类型:">
          <el-select v-model="filterQuery.mainAction" placeholder="请选择出入库类型">
            <el-option label="全部" value=""></el-option>
            <el-option label="入库" value="WareHouseIn"></el-option>
            <el-option label="出库" value="WareHouseOut"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="query-form-item" label="是否启用:">
          <el-select v-model="filterQuery.enable" placeholder="是否启用">
            <el-option label="全部" value=""></el-option>
            <el-option label="已启用" value=1></el-option>
            <el-option label="未启用" value=0></el-option>
          </el-select>
        </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 type="primary" icon="el-icon-download" @click="exportJsonFile">导出单据类型</el-button>
            <el-upload
              :action="uploadFileUrl"
              multiple
              :limit="3"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleChange"
              :file-list="fileList"
            >
              <el-button icon="el-icon-upload2" type="primary">导入单据类型</el-button>
            </el-upload>
          </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="name"></el-table-column>
        <el-table-column label="出入库类型" prop="mainAction">
          <template slot-scope="scope">
            <span>{{ mainActionMap[scope.row.mainAction] }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column label="扫码单据类型代码" prop="action" fixed></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="checkEnable">
          <template slot-scope="scope">
            <span>{{ enableMap[scope.row.checkEnable] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="二次核对" prop="secCheckEnable">
          <template slot-scope="scope">
            <span>{{ enableMap[scope.row.secCheckEnable] }}</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"
              :disabled="!configParams.typeScan"
              @click.native.stop="deleteDialog(scope.row)"
            >删除
            </el-button
            >
          </template>

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

      <el-dialog
        title="新增扫码单据类型"
        :visible.sync="addDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="addDialogVisible"
        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"
                     :disabled="!configParams.typeScan"
          >提交
          </el-button
          >
          <el-button size="small" @click="cancelDialog"
          >取消
          </el-button
          >
        </div>
      </el-dialog>

      <el-dialog
        title="编辑单据类型"
        :visible.sync="modifyDialogVisible"
        width="70%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="modifyDialogVisible"
      >
        <modifyDialog :inputQuery="inputQuery" :modifySubmit="onModifySubmit"></modifyDialog>
        <div style="text-align: center">
          <el-button type="primary" size="small" icon="search" @click="onModifySubmit"
                     :disabled="!configParams.typeScan"
          >提交
          </el-button
          >
          <el-button type="primary" size="small" icon="search" @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 {getBusTypeList, deleteBusType, updateBusType, insertBusType, exportFile} from "@/api/basic/busType";
import modifyDialog from "./bussinessTypeModify";
import axios from "axios";
import store from "@/store";
import {findConfig} from "@/api/thrsys/spsSyncStatus";
import {isBlank} from "@/utils/strUtil";

export default {
  data() {
    return {
      filterQuery: {
        name: null,
        mainAction: null,
        enable: "1",
        page: 1,
        limit: 20,
      },
      addDialogVisible: false,
      modifyDialogVisible: false,
      list: [],
      inputQuery: {
        action: "",
        name: "",
        enable: null,
        remark: "",
        mainAction: "",
        thirdSysFk: "",
        id: "",
        checkEnable: false,
        genUnit: false,
        innerOrder: false,
        spUse: null,
        secCheckEnable: null,
        checkUdims: null,
        checkPdaEd: null,
        checkPdaUn: null,
        checkPc: null,
        checkWebNew: null,
        checkChange: null,
        checkCopy: null,
        secCheckUdims: null,
        secCheckPdaEd: null,
        secCheckPdaUn: null,
        secCheckPc: null,
        secCheckWebNew: null,
        secCheckChange: null,
        thirdAction: null,
        secCheckSp: null,
        checkSp: null,
        secCheckCopy: null,
        corpType: null,
        storageCode: null,
        supplementOrderType: null,
        defaultUnit: null,
        useDyCount: null,
        expireTip: true,
        prefix: null,
        outToSpms: null,
        ullageFill: null,
        scanPreIn: null,
        vailInv: null,
        entrutSpms: null,
        codeFillCheck: null,
        defaultInv: null,
        defaultSubInv: null,
        orderVisibleType: null,
        advanceType: null,
        preIn: null,
        originAction: null,
        checkBalance: null,
        secCheckBalance: null,
        preInBack:null,
        vailDispatch:null,
        vailGroupBuy:null,
      },
      enableMap: {
        true: "是",
        false: "否",
      },
      mainActionMap: {
        WareHouseIn: "入库",
        WareHouseOut: "出库"
      },
      fileList: [],
      total: 0,
      multipleSelection: [],
      uploadFileUrl: null,
      headers: {},
      configParams: {},
      loading: false,

    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        name: null,
        mainAction: null,
        enable: "1",
        page: 1,
        limit: 20,
      };
      this.getList();
    },
    cancelDialog() {
      this.modifyDialogVisible = false;
      this.addDialogVisible = false;
      this.getList();
    },
    search() {
      this.filterQuery.page = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getBusTypeList(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.name)) {
        this.$message.error("单据类型名称不能为空！");
        return;
      }
      if (this.$isBlank(this.inputQuery.corpType)) {
        this.$message.error("往来信息类型不能为空！");
        return;
      }
      if (this.inputQuery.mainAction == "" || this.inputQuery.mainAction == null) {
        this.$message.error("出入库类型不能为空！");
        return;
      }
      insertBusType(this.inputQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.loading = false;
            this.cancelDialog();
            this.getList();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    onModifySubmit() {
      if (this.inputQuery.name == "" || this.inputQuery.name == null) {
        this.$message.error("单据类型不能为空！");
        return;
      }
      if (this.inputQuery.mainAction == "" || this.inputQuery.mainAction == null) {
        this.$message.error("出入库类型不能为空！");
        return;
      }
      updateBusType(this.inputQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.loading = false;
            this.cancelDialog();
            this.getList();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.cancelDialog();
        });
    },
    exportJsonFile() {
      exportFile().then((response) => {
        const binaryData = [];
        binaryData.push(response);
        let url = window.URL.createObjectURL(
          new Blob(binaryData, {type: "application/json"})
        );
        this.loading = false;
        const eleLink = document.createElement('a');
        // var timestamp = "yyyy-MM-dd_hh:mm";
        eleLink.download = "扫码单据类型导出" + ".json";
        eleLink.style.display = 'none';
        eleLink.href = url;
        document.body.appendChild(eleLink)
        eleLink.click()
        document.body.removeChild(eleLink)
      }).catch(() => {
        this.loading = false;
      });
    },

    handleAddClick() {
      this.inputQuery = {
        action: "",
        name: "",
        enable: true,
        remark: "",
        mainAction: "",
        thirdSysFk: "",
        id: "",
        checkEnable: false,
        genUnit: false,
        innerOrder: false,
        spUse: null,
        secCheckEnable: null,
        checkUdims: null,
        checkPdaEd: null,
        checkPdaUn: null,
        checkPc: null,
        checkWebNew: null,
        checkChange: null,
        checkCopy: null,
        secCheckUdims: null,
        secCheckPdaEd: null,
        secCheckPdaUn: null,
        secCheckPc: null,
        secCheckWebNew: null,
        secCheckChange: null,
        thirdAction: null,
        secCheckSp: null,
        checkSp: null,
        checkBalance: null,
        secCheckBalance: null,
        secCheckCopy: null,
        corpType: null,
        storageCode: null,
        supplementOrderType: null,
        defaultUnit: null,
        useDyCount: null,
        expireTip: true,
        prefix: null,
        outToSpms: null,
        ullageFill: null,
        scanPreIn: null,
        vailInv: null,
        entrutSpms: null,
        codeFillCheck: null,
        defaultInv: null,
        defaultSubInv: null,
        orderVisibleType: null,
        advanceType: null,
        preIn: null,
        originAction: null,
        preInBack:null,
        vailDispatch:null,
        vailGroupBuy:null,
      }
      this.addDialogVisible = true;
    },

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

    deleteDialog(rowId) {
      this.$confirm("此操作将永久删除该扫码类型信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteOrders(rowId);
        })
        .catch(() => {
        });
    },

    deleteOrders(data) {
      this.loading = true;
      let tquery = {
        id: data.id + "",
      };
      deleteBusType(tquery)
        .then((response) => {
          this.getList();
          if (response.code == 20000) {
            this.$message({
              type: "success",
              message: "删除成功！",
            });
          } else {
            this.$message.error(response.message);
          }

        })
        .catch(() => {
        });
    },
    handleChange(response, files, fileList) {
      if (response.code != 20000) {
        this.$message.error(response.message);
      } else {
        this.$message.success(response.data);
        this.getList();
      }
    },
    init() {
      axios.get("./config.json").then(res => {
        // 基础地址
        let response = res.data.BASE_URL;
        this.uploadFileUrl = response + "/udiwms/bussinessType/file/upload";
      });
      this.headers = {
        ADMIN_ID: store.getters.adminId,
        ADMIN_TOKEN: store.getters.token,
      };
    },
    getSyncConfig() {
      findConfig()
        .then((response) => {
          if (response.code == 20000) {
            this.configParams = response.data;
          }
        })
        .catch(() => {
        });
    },
  },
  components: {
    modifyDialog,
  },
  mounted() {
  },
  created() {
    this.init();
    this.getSyncConfig();
    this.getList();
  },
};
</script>

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