<!--卸货人员和卸货地点关联-->
<template>
  <div class="systemBase">
    <el-row>
      <el-col :span="24">
        <div
          style="
            margin-top: 10px;
            border-bottom: 1px solid #d5d5d5;
            padding-left: 12px;
          "
        >
          <el-form ref="searchData" :inline="true" :model="searchForm">
            <el-form-item prop="userCode" label="用户账号">
              <el-input
                v-model="searchForm.userCode"
                clearable
                size="small"
                style="width: 150px"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item prop="userName" label="用户名称">
              <el-input
                type="text"
                size="small"
                style="width: 150px"
                v-model="searchForm.userName"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="loadPointName" label="卸货地点">
              <el-input
                type="text"
                size="small"
                style="width: 150px"
                v-model="searchForm.loadPointName"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="单位">
              <el-select
                style="width: 100%"
                v-model="searchForm.orgCode"
                filterable
                clearable
                @change="changeOrg"
                :filter-method="filterSelect1"
                placeholder="请选择机构"
                size="small"
              >
                <el-option
                  ref="orgselect"
                  :value="searchForm.orgCode"
                  :label="searchForm.orgName"
                  style="height: auto; padding: 0px"
                >
                  <el-tree
                    :data="orgTree"
                    highlight-current
                    node-key="id"
                    show-checkbox
                    check-strictly
                    check-on-click-node
                    ref="org1tree"
                    :props="defaultProps"
                    :filter-node-method="filterOrgTree"
                    @check-change="handleCheckChange1"
                    @node-collapse="nodeUpdate2"
                    @node-expand="nodeUpdate1"
                  >
                  </el-tree>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="20px">
              <el-button
                icon="el-icon-search"
                type="primary"
                size="mini"
                @click="searchDatas"
                v-privilege="activeMenu + 'SEARCH'"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div style="border-right: 1px solid #d5d5d5">
          <div class="common-title-div">用户数据</div>
        </div>
        <div class="common-table-div">
          <el-table
            v-loading="dataLoading"
            :row-class-name="tableRowClassName"
            @row-click="rowChange"
            :bigDataShow="groupListU"
            ref="dataTable"
            highlight-current-row
            border
            :height="tableHeight"
            :data="table.list"
            :icore-filter-flag="icoreFilterFlag"
            @selection-change="handleSelectionChange1"
          >
            <el-table-column
              type="index"
              label="序号"
              fixed="left"
              align="center"
            ></el-table-column>
            <el-table-column
              type="selection"
              width="55"
              align="center"
            ></el-table-column>
            <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="userCode"
              label="用户账号"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="userName"
              min-width="300"
              label="用户名称"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="orgName"
              min-width="300"
              label="单位名称"
              align="left"
            ></el-table-column>
          </el-table>
        </div>
        <div class="common-foot-style">
          <el-pagination
            v-loading="dataLoading"
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[100, 500, 1000]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalPage"
          >
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="border-right: 1px solid #d5d5d5">
          <div class="common-title-div">卸货地点数据</div>
        </div>
        <div class="common-table-div">
          <el-table
            v-loading="dataLoading2"
            :row-class-name="tableRowClassName2"
            ref="dataTable"
            highlight-current-row
            border
            :bigDataShow="groupListL"
            :height="tableHeight"
            @selection-change="handleSelectionChange2"
            :data="table.list2"
            :icore-filter-flag="icoreFilterFlag"
          >
            <el-table-column
              type="index"
              label="序号"
              fixed="left"
              align="center"
            ></el-table-column>
            <el-table-column
              type="selection"
              width="55"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="loadPointNo"
              label="卸货点编号"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="loadPointName"
              min-width="300"
              label="卸货点名称"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="createTime"
              label="创建时间"
              align="left"
            ></el-table-column>
          </el-table>
        </div>
        <div class="common-foot-style">
          <el-pagination
            v-loading="dataLoading2"
            @size-change="pageSizeChange2"
            @current-change="pageCurrentChange2"
            :current-page="page2.pageNum"
            :page-sizes="[100, 500, 1000]"
            :page-size="page2.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page2.totalPage"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div style="border-right: 1px solid #d5d5d5">
          <div class="common-title-div">
            <el-form :inline="true">
              <el-form-item label-width="80px">卸货权限配置 </el-form-item>
              <el-form-item label-width="20px">
                <el-button
                  icon="el-icon-circle-plus-outline"
                  type="primary"
                  size="mini"
                  @click="addData"
                  v-privilege="activeMenu + 'ADD'"
                  >关联</el-button
                >
              </el-form-item>
              <el-form-item label-width="20px">
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  icon="el-icon-remove-outline"
                  @click="abolishData"
                  v-privilege="activeMenu + 'ABOLISH'"
                  >解除</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="common-table-div">
          <el-table
            v-loading="dataLoading3"
            ref="dataTable"
            highlight-current-row
            border
            :height="tableHeight"
            @selection-change="handleSelectionChange3"
            :data="table.list3"
            :icore-filter-flag="icoreFilterFlag"
            :bigDataShow="groupListG"
          >
            <el-table-column
              type="index"
              label="序号"
              fixed="left"
              align="center"
            ></el-table-column>
            <el-table-column
              type="selection"
              width="55"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="userCode"
              label="用户编号"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="userName"
              min-width="300"
              label="用户名称"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="loadPointNo"
              label="卸货点编号"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="300"
              prop="loadPointName"
              label="卸货点名称"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="80"
              prop="createManName"
              label="创建人"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="createTime"
              label="创建时间"
              align="center"
              min-width="140"
            ></el-table-column>
          </el-table>
        </div>
        <div class="common-foot-style">
          <el-pagination
            v-loading="dataLoading3"
            @size-change="pageSizeChange3"
            @current-change="pageCurrentChange3"
            :current-page="page3.pageNum"
            :page-sizes="[100, 500, 1000]"
            :page-size="page3.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page3.totalPage"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  getCookie
} from '@/utils/util.js';
import {
  cookieUserId,
  cookieUserName
} from '@/config/config.js';

export default {
  data () {
    return {
      icoreFilterFlag: true,
      dataLoading: false,
      dataLoading2: false,
      dataLoading3: false,
      multipleSelection: {},
      multipleSelection2: [],
      multipleSelection3: [],
      table: {
        list: [],
        list2: [],
        list3: []
      },
      searchForm: {
        userCode: '',
        userName: '',
        loadPointName: '',
        orgCode: '',
        orgName: ''
      },
      page: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      page2: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      page3: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      activeMenu: '',
      orgTree: [],
      multipleSelection1: [],
      //  默认配置数据对应项
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      selectedData: {},
      groupListU: [8],
      groupListL: [8],
      groupListG: [8],
      userCode: '',
      userName: ''
    }
  },
  async created () {
    this.userName = getCookie(cookieUserName);
    this.userCode = getCookie(cookieUserId);
    this.tableHeight = (window.innerHeight - 290) / 2 > 250 ? (window.innerHeight - 290) / 2 : 250
    this.activeMenu = window.top.localStorage.getItem('activeMenu')
    await this.init()
  },
  mounted () {
    this.searchDatas()
  },
  methods: {
    async init () {
      // 查询所有机构信息数据
      const data = await this.axios.get('pass/v1/sysorgs/listtree?companyId=713710108567277568')
      this.orgTree = data.data
    },
    // 分别查询三张表的数据
    async searchDatas () {
      this.searchUserData(1)
      this.searchUnloadData(1)
      this.getUnloadRoleData(1)
    },
    // 分页查询人员数据
    searchUserData (flag) {
      this.dataLoading = true;
      if (flag === 1) {
        this.page.pageNum = 1
      }
      this.axios.get('pass/v1/sysusers/getUsersByOrgCode/' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&companyId=713710108567277568' + '&userCode=' + this.searchForm.userCode + '&userName=' + this.searchForm.userName + `&orgCode=${this.searchForm.orgCode}&orgName=${this.searchForm.orgName}`)
        .then(res => {
          if (res.data.list.length < 64) {
            this.groupListU = [8]
          } else {
            this.groupListU = [8, 1]
          }
          this.table.list = res.data.list;
          for (let a = 0; a < this.table.list.length; a++) {
            this.table.list[a].orgName = this.getOrgName(this.orgTree, this.table.list[a].orgCode);
          }
          this.dataLoading = false;
          this.page.totalPage = res.data.total;
        }).catch(e => {
          this.dataLoading = false;
        });
    },
    // 树形控件过滤数据
    filterOrgTree (value, data, node) {
      if (!value) return true;
      return data.orgName.indexOf(value) !== -1;
    },
    handleCheckChange1 (data, checked, node) {
      console.log(data, '选中的数据')
      this.selectedData = { ...data }
      let res = this.$refs.org1tree.getCheckedNodes(false, true);
      if (res.length > 1) {
        // this.$message.warning('查询机构不可选择多个！');
        this.$refs.org1tree.setCheckedNodes([data]);
      } else if (res.length === 1) {
        this.searchForm.orgCode = res[0].orgCode;
        this.searchForm.orgName = res[0].orgName;
      } else if (res.length === 0) {
        this.searchForm.orgCode = '';
        this.searchForm.orgName = '';
      }
    },
    changeOrg () {
      this.$forceUpdate()
      this.searchForm.orgCode = ''
      this.searchForm.orgName = ''
      this.$refs.org1tree.setChecked(this.selectedData.id, false);
    },
    filterSelect1 (val) {
      this.$refs.org1tree.filter(val);
    },
    // 节点展开更新下拉板
    nodeUpdate2 (data) {
      setTimeout(() => {
        let width = this.$refs.orgselect.$el.getElementsByClassName('el-tree')[0].clientWidth;
        let num = document.body.clientWidth - width - 15;
        let allWid = parseInt($('.el-select-dropdown')[1].style.left) + width + 15;
        if (document.body.clientWidth - allWid > 25) {
          // console.log(width, num)
          this.$nextTick(() => {
            $('.el-select-dropdown')[1].style.left = num + 'px'
          })
        }
      }, 500);
    },
    // 节点展开更新下拉板
    nodeUpdate1 (data) {
      setTimeout(() => {
        let width = this.$refs.orgselect.$el.getElementsByClassName('el-tree')[0].clientWidth;
        let num = document.body.clientWidth - width - 15;
        let allWid = parseInt($('.el-select-dropdown')[1].style.left) + width + 15;
        if (allWid > document.body.clientWidth) {
          // console.log(width, num)
          this.$nextTick(() => {
            $('.el-select-dropdown')[1].style.left = num + 'px'
          })
        }
      }, 100);
    },
    // 查询机构名称
    getOrgName (list, code) {
      var name = '';
      for (let i = 0; i < list.length; i++) {
        try {
          if (list[i].orgCode === code) {
            name = list[i].orgName
            return name
          } else if (list[i].children && list[i].children.length >= 1) {
            name = this.getOrgName(list[i].children, code);
            if (name) {
              return name
            }
          }
        } catch (error) {
          console.log(error)
        }
      }
      return name;
    },
    // 分页查询卸货地点数据
    searchUnloadData (flag) {
      this.dataLoading2 = true
      if (flag === 1) {
        this.page2.pageNum = 1
      }
      this.axios.get('pass/systemBase/v1/meterbaseloadpoints/like/' + '?pageNum=' + this.page2.pageNum + '&pageSize=' + this.page2.pageSize + `&loadPointName=${this.searchForm.loadPointName}`)
        .then(res => {
          if (res.data.list.length < 64) {
            this.groupListL = [8]
          } else {
            this.groupListL = [8, 1]
          }
          // console.log(res.data.list, '卸货地点数据')
          this.dataLoading2 = false;
          this.table.list2 = res.data.list;
          this.page2.totalPage = res.data.total;
        }).catch(e => {
          this.dataLoading2 = false;
        });
    },
    // 分页查询人员和卸货地点数据
    getUnloadRoleData (flag) {
      this.dataLoading3 = true;
      if (flag === 1) {
        this.page3.pageNum = 1
      }
      this.axios.get('pass/systemBase/v1/meterbaseloaduserloadinfos/like/' + '?pageNum=' + this.page2.pageNum + '&pageSize=' + this.page2.pageSize + `&userCode=${this.searchForm.userCode}&userName=${this.searchForm.userName}&loadPointName=${this.searchForm.loadPointName}`)
        .then(res => {
          if (res.data.list.length < 64) {
            this.groupListG = [8]
          } else {
            this.groupListG = [8, 1]
          }
          console.log(res.data.list, '卸货和用户关联数据')
          this.dataLoading3 = false;
          this.table.list3 = res.data.list;
          this.page3.totalPage = res.data.total;
        }).catch(e => {
          this.dataLoading3 = false;
        });
    },
    rowChange (val) {
      this.multipleSelection = val
    },
    // 用户数据表格多选回调
    handleSelectionChange1 (val) {
      this.multipleSelection1 = val
    },
    // 卸货地点数据表格多选回调
    handleSelectionChange2 (val) {
      this.multipleSelection2 = val
    },
    // 关联数据多选回调
    handleSelectionChange3 (val) {
      this.multipleSelection3 = val
    },
    // 添加关联数据
    addData () {
      // if (JSON.stringify(this.multipleSelection) == "{}") {
      //   this.$message.warning('请选择用户数据！');
      //   return;
      // }
      if (this.multipleSelection1.length < 1) {
        this.$message.warning('请勾选用户数据！');
        return;
      }
      if (this.multipleSelection2.length < 1) {
        this.$message.warning('请勾选卸货点数据！');
        return;
      }
      let linkList = []
      // 将勾选的用户数据和卸货点数据组合起来
      this.multipleSelection1.forEach(oItem => {
        this.multipleSelection2.forEach(iItem => {
          iItem.userCode = oItem.userCode
          iItem.userName = oItem.userName
          iItem.id = ''
          iItem.createManName = this.userName
          iItem.createManNo = this.userCode
          linkList.push({ ...iItem })
        })
      })

      let configurationData = linkList
      // configurationData.userCode = this.multipleSelection.userCode
      // configurationData.userName = this.multipleSelection.userName
      // configurationData.forEach(item => {
      //   item.userCode = this.multipleSelection.userCode
      //   item.userName = this.multipleSelection.userName
      //   item.id = ''
      // })
      console.log(configurationData, '要添加关联的数据')
      this.axios.post('pass/systemBase/v1/meterbaseloaduserloadinfos/relation', configurationData, { individualType: 'json' }).then(res => {
        // console.log(res, '新增关联的返回结果')
        if (res.succeed) {
          this.$message.success(res.message);
          this.searchDatas()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    // 作废数据
    abolishData () {
      let ids = ''
      if (this.multipleSelection3.length < 1) {
        this.$message.warning('请选择要解除的卸货配置！');
        return;
      }
      // 将所有选中的关联数据的id拼接成一个由逗号分隔的字符串
      this.multipleSelection3.forEach((item, index) => {
        if (index !== this.multipleSelection3.length - 1) {
          ids += item.id + ','
        } else {
          ids += item.id
        }
      })
      this.axios.delete(`pass/systemBase/v1/meterbaseloaduserloadinfos/${ids}`).then(res => {
        // console.log(res, '删除的返回结果')
        if (res.succeed) {
          this.$message.success(res.message);
          this.searchDatas()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    // 页大小变化回调
    pageSizeChange (size) {
      this.page.pageSize = size;
      this.searchUserData(1);
    },
    // 页跳转变化回调
    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.searchUserData();
    },
    // 页大小变化回调
    pageSizeChange2 (size) {
      this.page2.pageSize = size;
      this.searchUnloadData(1);
    },
    // 页跳转变化回调
    pageCurrentChange2 (index) {
      this.page2.pageNum = index;
      this.searchUnloadData();
    },
    // 页大小变化回调
    pageSizeChange3 (size) {
      this.page2.pageSize = size;
      this.getUnloadRoleData(1);
    },
    // 页跳转变化回调
    pageCurrentChange3 (index) {
      this.page2.pageNum = index;
      this.getUnloadRoleData();
    },
    // 根据行属性设置行样式
    tableRowClassName ({
      row,
      rowIndex
    }) {
      if (row.validFlag == '0') {
        return 'error-row2';
      }
      return '';
    },
    // 根据行属性设置行样式
    tableRowClassName2 ({
      row,
      rowIndex
    }) {
      if (row.validFlag == '0') {
        return 'error-row2';
      }
      return '';
    }
  }
}
</script>
<style scoped>
</style>