<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="filterQuery" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item class="query-form-item" label="盘点仓库:">
              <el-select v-model="filterQuery.invStorageCode" placeholder="请选择盘点仓库" clearable="true" style="width: 90%"
              >
                <el-option
                  v-for="item in invList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.code">
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button-group>
                <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  @click="onReset"
                ></el-button>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit"
                >查询
                </el-button
                >
                <el-button type="primary" icon="el-icon-plus" @click="addSetting"
                >添加盘点设置
                </el-button
                >
              </el-button-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table v-loading="loading" :data="list" style="width: 100%"
                border
                highlight-current-row="true"
      >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="盘点仓库" prop="invName" width="120"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="盘点货位" prop="spaceName" width="120"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="盘盈单据类型" prop="inBusTypeName" width="160"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="盘盈单往来单位" prop="inFromCorpName" width="160"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="盘亏单据类型" prop="outBusTypeName" width="160"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="盘亏往来单位" prop="outFromCorpName" width="160"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="备注" prop="remark" width="180"
                         show-overflow-tooltip></el-table-column>

        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.stop="handleEdit(scope.row)"
            >编辑
            </el-button
            >

            <el-button
              type="text"
              size="small"
              @click.native.stop="handleDel(scope.row)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-pagination
          :page-size="filterQuery.limit"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
      ></el-pagination>-->
    </el-card>

    <el-dialog
      :title="formMap[formName]"
      :visible.sync="settingFormVisible"
      width="45%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="settingFormVisible"
      append-to-body
    >
      <el-form :model="formData" ref="dataForm" label-width="160px"
               :rules="rules">

        <el-form-item class="query-form-item" label="盘点仓库:" prop="invStorageCode">
          <el-select v-model="formData.invStorageCode" placeholder="盘点仓库信息"
                     @change="setInvChange"
                     style="width: 80%"
                     clearable>
            <el-option
              v-for="item in setInvList"
              :key="item.name"
              :label="item.name"
              :value="item.code">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item class="query-form-item" label="盘点货位:">
          <el-select v-model="formData.invWarehouseCode" placeholder="盘点货位信息"
                     style="width: 80%"
                     clearable>
            <el-option
              v-for="item in spaceList"
              :key="item.name"
              :label="item.name"
              :value="item.code">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.parentName }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="盘盈单据类型：" prop="inAction">
          <el-select v-model="formData.inAction" placeholder="请选择单据类型" style="width: 80%"
          >
            <el-option
              v-for="item in inBusList"
              :key="item.name"
              :label="item.name"
              :value="item.action">
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="盘盈往来单位：" prop="inFromCorp">
          <el-select
            v-model="formData.inFromCorp"
            filterable
            remote
            clearable="true"
            style="width: 80%"
            reserve-keyword
            placeholder="请输入往来单位"
            :remote-method="findMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in corpList"
              :key="item.erpId"
              :label="item.name"
              :value="item.erpId"
            >
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="盘亏单据类型：" prop="outAction">
          <el-select v-model="formData.outAction" placeholder="请选择单据类型" style="width: 80%"
          >
            <el-option
              v-for="item in outBusList"
              :key="item.name"
              :label="item.name"
              :value="item.action">
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="盘亏往来单位：" prop="outFromCorp">
          <el-select
            v-model="formData.outFromCorp"
            filterable
            remote
            clearable="true"
            style="width: 80%"
            reserve-keyword
            placeholder="请输入往来单位"
            :remote-method="findMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in corpList"
              :key="item.erpId"
              :label="item.name"
              :value="item.erpId"
            >
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="settingFormVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click.native="save">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getSettingList, saveCountSetting, verifyAdd} from "@/api/inventory/invCountSetting";
import {getJoinBussinessType} from "@/api/basic/bussinessType";
import {getInvListByUser} from "@/api/system/invWarehouse";
import {getInvSpaceList} from "@/api/inventory/invSpace";
import {isBlank} from "@/utils/strUtil";
import {getLocalJoinByUser} from "@/api/basic/busType";
import {getBasicUnitMaintains} from "@/api/basic/basicUnitMaintain";

export default {
  data() {
    return {
      filterQuery: {
        id: null,
        page: 1,
        limit: 20,
      },
      list: [],
      total: 0,
      loading: true,
      formName: null,
      formMap: {
        add: "添加盘点设置参数",
        edit: "编辑盘点设置参数"
      },
      settingFormVisible: false,
      formData: {
        inAction: null,
        outAction: null
      },
      inBusList: [],
      outBusList: [],
      invList: [],
      setInvList: [],
      spaceList: [],
      corpList: [],
      rules: {
        invStorageCode: [{required: true, message: "请选择盘点仓库", trigger: "blur"},],
        inAction: [{required: true, message: "请选择盘盈单据类型", trigger: "blur"}],
        inFromCorp: [{required: true, message: "请选择盘盈往来单位", trigger: "blur"}],
        outAction: [{required: true, message: "请选择盘亏单据类型", trigger: "blur"}],
        outFromCorp: [{required: true, message: "请选择盘亏往来单位", trigger: "blur"}],
      },
    };
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        id: null,
        page: 1,
        limit: 20,
      };
      this.invChange();
      this.getList();
    },
    onSubmit() {
      this.loading = true;
      this.filterQuery.page = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },
    handleEdit(row) {
      this.settingFormVisible = true;
      this.formName = 'edit';
      this.formData = row;
      this.getInBusType();
      this.getOutBusType();
      this.findMethod(this.formData.inFromCorp)
      this.findMethod(this.formData.outFromCorp)
    },

    handleDel(row) {

    },

    addSetting() {
      this.settingFormVisible = true;
      this.formName = 'add';
      this.formData = {
        invAction: null,
        outAction: null
      }

    },
    getList() {
      this.loading = true;
      let params = {};
      getSettingList(params).then((res) => {
        this.loading = false;
        if (res.code === 20000) {
          this.list = res.data.list || [];
          this.total = res.data.total || 0;
        }
      }).catch((error) => {
        this.loading = false;
        this.list = [];
        this.total = 0;
      })
    },


    getInvList() {
      getInvListByUser()
        .then((response) => {
          this.invList = response.data || [];
          this.getList();
        })
        .catch(() => {
        });
    },


    getSetInvList() {
      getInvListByUser()
        .then((response) => {
          this.setInvList = response.data || [];
        })
        .catch(() => {
        });
    },

    setInvChange() {
      // 切换仓库时同步切换部门ID
      this.formData.invSpaceCode = null;
      this.getSpaceList();
      this.getInBusType();
      this.getOutBusType();
    },

    getSpaceList() {
      this.spaceList = [];
      let params = {invWarehouseCode: this.formData.invStorageCode, status: 1};
      getInvSpaceList(params).then((res) => {
        this.spaceList = res.data.list || [];
      });
    },

    save() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          saveCountSetting(this.formData, this.formName).then((res) => {
            if (res.code === 20000) {
              this.settingFormVisible = false;
              this.getList();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });

    },
    getInBusType() {
      let params = {
        code: this.formData.invStorageCode,
        enable: true,
        mainAction: "WareHouseIn"

      }
      getLocalJoinByUser(params).then((res) => {
        this.inBusList = res.data.list || [];
      })
    },
    getOutBusType() {
      let params = {
        code: this.formData.invStorageCode,
        enable: true,
        mainAction: "WareHouseOut"
      };
      getLocalJoinByUser(params).then((res) => {
        this.outBusList = res.data.list || [];
      })
    },
    //获取特殊往来
    findMethod(query) {
      this.corpList = [];
      let cQuery = {
        key: query,
        corpType: 4,
        page: 1,
        limit: 20
      };
      getBasicUnitMaintains(cQuery)
        .then((response) => {
          this.loading = false;
          this.corpList = response.data.list || [];
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
  created() {
    this.getSetInvList()
    this.getList();

  },
};
</script>

<style type="text/scss" lang="scss">
</style>
