<template>
  <div>
    <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
      <el-form-item class="query-form-item">
        <el-input
          v-model="filterQuery.thirdType"
          placeholder="第三方业务类型编码"
        ></el-input>
      </el-form-item>
      <el-form-item class="query-form-item">
        <el-input
          v-model="filterQuery.udiwmsType"
          placeholder="本系统业务类型"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="onReset"
        ></el-button>
        <el-button type="primary" icon="search" @click="getList"
          >查询</el-button
        >
        <!-- <el-button type="primary" icon="search" @click="handleAddClick"
          >新增</el-button
        > -->
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column label="序号" type="index" fixed></el-table-column>
      <el-table-column
        label="第三方业务类型编码"
        prop="thirdId"
        fixed
      ></el-table-column>
      <el-table-column
        label="第三方业务类型名称"
        prop="thirdType"
        fixed
      ></el-table-column>

      <el-table-column label="本系统业务类型" prop="udiwmsType" fixed>
        <template slot-scope="scope">
          <span>{{ wareHouseMap[scope.row.udiwmsType] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" fixed></el-table-column>

      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.stop="handleModifyClick(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native.stop="deleteDialog(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="新增业务类型关联"
      :visible.sync="addDialogVisible"
      width="70%"
      v-if="addDialogVisible"
    >
      <modifyDialog :inputQuery="inputQuery"></modifyDialog>
      <div style="text-align: center">
        <el-button
          type="primary"
          size="small"
          icon="search"
          @click="onAddSubmit"
          >提交</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="search"
          @click="cancelDialog"
          >取消</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="编辑业务类型关联"
      :visible.sync="modifyDialogVisible"
      width="70%"
      v-if="modifyDialogVisible"
    >
      <modifyDialog :inputQuery="inputQuery"></modifyDialog>
      <div style="text-align: center">
        <el-button
          type="primary"
          size="small"
          icon="search"
          @click="onModifySubmit"
          >提交</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="search"
          @click="cancelDialog"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <el-pagination
      :page-size="filterQuery.limit"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>
  <script>
import {
  getBussinessType,
  deleteBussinessType,
  updateBussinessType,
  insertBussinessType,
} from "../../api/receipts/bussinessType";

import modifyDialog from "./ModifyBussinessType";

export default {
  data() {
    return {
      filterQuery: {
        udiwmsType: "",
        thirdType: "",
        page: 1,
        limit: 20,
      },
      addDialogVisible: false,
      modifyDialogVisible: false,
      list: [],
      inputQuery: {
        thirdId: "",
        thirdType: "",
        udiwmsType: "",
        remark: "",
        id: "",
      },
      total: 0,
      multipleSelection: [],
      wareHouseMap: {
        ProduceWareHouseIn: "生产入库",
        SalesWareHouseOut: "销售出库",
        AllocateWareHouseIn: "调拨入库",
        PurchaseWareHouseIn: "采购入库",
        ReturnWareHouseOut: "退货出库",
        ProduceWareHouseOut: "销售出库",
        AllocateWareHouseOut: "调拨出库",
        ReworkWareHouseOut: "返工出库",
        DestoryWareHouseOut: "销毁出库",
        CheckWareHouseOut: "抽检出库",
        DirectAllocateWareHouseOut: "直调出库",
        CodeReplace: "码替换",
        CodeDestory: "码注销",
        StockCheck: "盘点",
        ReturnWareHouseIn: "退货入库",
      },
    };
  },

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

    getList() {
      this.loading = true;
      getBussinessType(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },

    handleAddClick(row) {
      this.addDialogVisible = true;
      this.inputQuery = {
        thirdId: "",
        thirdType: "",
        udiwmsType: "",
        remark: "",
        id: "",
      };
    },

    onAddSubmit() {
      insertBussinessType(this.inputQuery)
        .then((response) => {
          this.loading = false;
          this.cancelDialog();
          this.getList();
        })
        .catch(() => {
          this.loading = false;
          this.cancelDialog();
        });
    },

    onModifySubmit() {
      updateBussinessType(this.inputQuery)
        .then((response) => {
          this.loading = false;
          this.cancelDialog();
          this.getList();
        })
        .catch(() => {
          this.loading = false;
          this.cancelDialog();
        });
    },

    handleModifyClick(row) {
      this.modifyDialogVisible = true;
      this.inputQuery = {
        id: row.id,
        remark: row.remark,
        udiwmsType: row.udiwmsType,
        thirdType: row.thirdType,
        thirdId: row.thirdId,
      };
    },

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

    deleteOrders(data) {
      this.loading = true;
      let tquery = {
        id: data.id + "",
      };

      deleteBussinessType(tquery)
        .then((response) => {
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功！",
          });
        })
        .catch(() => {});
    },
  },
  components: {
    modifyDialog,
  },
  mounted() {},
  created() {
    this.getList();
  },
};
</script>