<template>
  <div class="distribute">
    <el-dialog title="添加分发" :visible.sync="storeOpen" width="80%" append-to-body @close="close">
      <el-form
        ref="addStoreForm"
        :model="addStoreForm"
        :inline="true"
        size="mini"
        v-show="showSearchStore"
        label-width="90px">
        <el-form-item label="费用归属" prop="warehouseName">
          <el-input v-model="addStoreForm.warehouseName" clearable placeholder="请输入费用归属" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="storeQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryStore">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            :disabled="!addlist.length"
            @click="batchAddStore"
            >批量添加</el-button
          >
        </el-col>
        <right-toolbar :showSearch.sync="showSearchStore" @queryTable="storeQuery"></right-toolbar>
      </el-row>
      <el-table
        v-loading="loadingStore"
        :data="storeList"
        @selection-change="handleSelectionChangeStore"
        :row-key="getRowKeys"
        ref="dataTable">
        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
        <el-table-column label="费用名称" prop="receiveName" :show-overflow-tooltip="true" />
        <el-table-column label="费用编码" prop="receiveCode" :show-overflow-tooltip="true" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              :disabled="isDisabled(scope.row)"
              @click="addStore(scope.row)"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalStore > 0"
        :total="totalStore"
        :page.sync="addStoreForm.pageNum"
        :limit.sync="addStoreForm.pageSize"
        @pagination="getStoreList" />
    </el-dialog>
  </div>
</template>

<script>
import { selectAllOrganization } from "@/api/sfa/allotInventory";
export default {
  props: {
    // 分发类型
    grantType: [String, Number],
    // 	库位编码
    warehouseCode: [String, Number],
    // 库位类型
    warehouseType: [String, Number],
    // 选中的数据反显
    tableData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      showSearchStore: true,
      storeOpen: true,
      addStoreForm: {
        warehouseName: "", //搜索内容
        pageNum: 1,
        pageSize: 10,
      },
      multipleStore: true, //批量添加按钮状态
      loadingStore: true, //获取数据loading
      storeList: [], //table data
      // 表单参数
      form: {},
      totalStore: 0, //总条数
      // 批量选中数据
      addlist: [],
    };
  },
  created() {
    this.addlist = this.tableData;
    this.storeQuery();
  },
  methods: {
    // 搜索
    storeQuery() {
      this.addStoreForm.pageNum = 1;
      this.getStoreList();
    },
    // 获取列表数据
    getStoreList() {
      this.loadingStore = true;
      let params = {
        grantType: this.grantType, //	分发类型
        warehouseCode: this.warehouseCode, //	库位编码
        warehouseType: this.warehouseType, //	库位类型
        ...this.addStoreForm, //	库位名称（查询条件）
      };
      selectAllOrganization(params).then((response) => {
        this.storeList = response.rows;
        this.totalStore = response.total;
        this.loadingStore = false;
        this.toggleRowSelection();
      });
    },
    // 选中row反现
    toggleRowSelection() {
      this.$nextTick(() => {
        // 没有选中先清空
        if (!this.tableData.length) {
          this.$refs.dataTable.clearSelection();
        } else {
          // 有选中的，先判断当前页有没有选中，没有在清空
          let isFlage = false;
          let num = 0;
          this.tableData.forEach((item, ind) => {
            num++;
            this.storeList.forEach((row) => {
              if (item.receiveCode == row.receiveCode) {
                isFlage = true;
                this.$refs.dataTable.toggleRowSelection(row, true);
              }
            });
            if (num == this.tableData.length) {
              if (!isFlage) {
                this.$refs.dataTable.clearSelection();
              }
            }
          });
        }
      });
    },
    // 添加
    addStore(row) {
      // 上次选择的和这次添加的合并
      this.addlist.push(row);
      this.$emit("addSuccess", this.addlist);
    },
    // 批量添加
    batchAddStore() {
      this.$emit("addSuccess", this.addlist);
    },
    // 重置
    resetQueryStore() {
      this.addStoreForm.shopcode = "";
      this.addStoreForm.shopname = "";
      this.addStoreForm.pageNum = 1;
      this.resetForm("addStoreForm");
      this.storeQuery();
    },
    handleSelectionChangeStore(selection) {
      this.addlist = selection;
    },
    //关闭弹框回调
    close() {
      this.$emit("closeDistribute");
    },
    getRowKeys(row) {},
    // 是否禁止添加
    isDisabled(row) {
      let data = this.addlist.some((val) => val.receiveCode == row.receiveCode);
      return data;
    },
  },
};
</script>

<style scoped lang="scss"></style>
