<template>
  <div>
    <el-form :inline="true" :model="userQuery" class="query-form" size="mini">
      <el-form-item class="query-form-item" label="用户名称/账号:">
        <el-input
          v-model="userQuery.key"
          placeholder="请输入用户名称或用户账号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onUserReset"
          >重置
          </el-button>
          <el-button type="primary" @click="loadUserList"
                     icon="el-icon-search"
          >查询
          </el-button
          >
          <el-button type="primary" @click="addUser()"
                     icon="el-icon-document-add"
          >选入用户
          </el-button
          >
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table
      :data="userData"
      key="row.id"
      border
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column
        prop="employeeName"
        label="用户名"
        min-width="30%">
      </el-table-column>
      <el-table-column
        prop="username"
        label="账号"
        min-width="20%">
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="30%"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            :disabled="!configParms.basicInv"
            @click.native="rmInvUser(scope.row)">
            移除
          </el-button>

          <!--              <el-button-->
          <!--                type="text"-->
          <!--                size="small" :disabled="!configParms.basicInv"-->
          <!--                @click.native="rmInvUser(scope.row)">-->
          <!--                授权-->
          <!--              </el-button>-->
          <el-button
            type="text"
            :disabled="!configParms.basicInv"
            @click.native="relBusttype(scope.row)">
            管理单据类型
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="userTotal>0"
      :total="userTotal"
      :page.sync="userQuery.page"
      :limit.sync="userQuery.limit"
      @pagination="loadUserList"
    />

    <!--添加用户弹窗-->
    <el-dialog
      v-if="userFormVisible"
      title="仓库信息-选入用户"
      :close-on-click-modal="false"
      width="45%"
      append-to-body
      :close-on-press-escape="false"
      :visible.sync="userFormVisible"
    >
      <el-table v-loading="userloading" :data="selectUserList"
                ref="selectUserList"
                @selection-change="handleUserSelectionChange"
                border
                style="width: 100%">
        <el-table-column
          type="selection"
          :reserve-selection="false"
          width="55">
        </el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="账号" prop="userName"></el-table-column>
        <el-table-column label="用户名" prop="employeeName"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="userFormVisible = !userFormVisible"
        >取消
        </el-button
        >
        <el-button
          type="primary"
          @click.native="addUserData()"
        >选入
        </el-button>
      </div>
      <pagination
        v-show="selectUserToatl>0"
        :total="selectUserToatl"
        :page.sync="selectUserQuery.page"
        :limit.sync="selectUserQuery.limit"
        @pagination="getSelectUser"
      />
    </el-dialog>
    <!--    用户业务单据类型关联-->
    <el-dialog
      title="仓库-用户单据类型管理"
      :visible.sync="relBusUserVisile"
      width="45%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      v-if="relBusUserVisile"
    >
      <inv-user-rel-bus-types :inputQuery="curSeleUser" :closeDialog="cancelRelBusDiaolog"></inv-user-rel-bus-types>
    </el-dialog>
  </div>
</template>

<script>
import {addWarehouseUser, deleteWarehouseUser, warehouseUserList} from "@/api/system/invWarehouse";
import {selectNotSelectUser} from "@/api/auth/authUser";
import InvUserRelBusTypes from "@/views/system/dept/invUserRelBusTypes";

export default {
  name: "invRelUsers",
  components: {InvUserRelBusTypes},
  props: {
    configParms: {
      type: Object,
      required: true,
    },
    inputQuery: {
      type: Object,
      required: true,
    },
    closeDialog: {
      type: Function,
      required: true,
    },
  },

  data() {
    return {
      //---------------仓库-用户相关---------------------
      userQuery: {
        code: null,
        page: 1,
        limit: 10
      },
      userData: [],
      userTotal: 0,


      //---------------仓库添加用户-----
      selectUserQuery: {
        code: null,
        page: 1,
        limit: 10
      },
      userFormVisible: false,
      userloading: false,
      selectUserList: [],
      selectUserToatl: 0,
      selectAddUser: [],


      //------用户-单据类型相关-----------------------
      curSeleUser: null,
      relBusUserVisile: false,
    }


  },

  methods: {
    //用户相关
    onUserReset() {
      this.userQuery = {
        code: null,
        page: 1,
        limit: 10
      };
    },
    loadUserList(val) {   //获取仓库用户列表
      if (val != null) {
        this.userQuery.page = val;
      }
      //加载用户数据
      warehouseUserList(this.userQuery).then((res) => {
        this.userData = res.data.list;
        this.userTotal = res.data.total;
      }).catch((error) => {
        this.$message.error("用户数据加载失败")
      });
    },

    addUser() {         //添加仓库关联用户弹窗
      this.currentCode = this.inputQuery.code;
      this.userFormVisible = true;
      this.selectUserQuery.code = this.inputQuery.code;
      this.selectUserQuery.page = 1;
      this.getSelectUser();
    },

    rmInvUser(row) { //移除仓库关联用户
      this.$confirm("确定移除该仓库关联用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {id: row.id};
          deleteWarehouseUser(params).then((res) => {
            if (res.code == 20000) {
              this.loadUserList();
            } else {
              this.$message.error(res.message);
            }
          }).catch((error) => {
          });
        })
        .catch(() => {
        });
    },

    handleUserSelectionChange(val) {
      this.selectAddUser = val;
    },

    getSelectUser() {
      selectNotSelectUser(this.selectUserQuery).then((res) => {
        this.selectUserList = res.data.list;
        this.selectUserToatl = res.data.total;
      }).catch((error) => {
        this.$message.error("用户数据加载失败")
      });
    },

    addUserData() {     //提交选入用户
      let query = {
        code: this.currentCode,
        userList: JSON.stringify(this.selectAddUser)
      };
      addWarehouseUser(query).then((res) => {
        if (res.code === 20000) {
          this.userFormVisible = false;
          this.$message.success("添加成功");
          this.userQuery = {
            code: this.currentCode,
            page: 1,
            limit: 10
          }
          //重新加载数据
          warehouseUserList(this.userQuery).then((res) => {
            this.userData = res.data.list;
            this.userTotal = res.data.total;
          }).catch((error) => {
            this.userData = [];
            this.userTotal = 0;
          });
        } else {
          this.$message.error(res.message);
        }
      }).catch((error) => {
        this.$message.error("添加失败");
      });
    },

    //用户-单据类型 相关
    relBusttype(row) {
      this.curSeleUser = row;
      this.relBusUserVisile = true;
    },
    cancelRelBusDiaolog() {
      this.relBusUserVisile = false;
    },
  },

  created() {
    this.userQuery.code = this.inputQuery.code;
    this.loadUserList();
  }
}
</script>

<style scoped>

</style>
