<!--新系统物资和老系统物资关联-->
<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.newMatName"
                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.oldMatName"
                placeholder="请输入"
                clearable
              ></el-input>
            </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-item label-width="35px">
              <img
                @click="showMsg"
                class="quest_icon"
                src="../../../assets/img/images/header/question.svg"
                alt=""
              />
            </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"
            @current-change="handleCurrentChange"
            ref="dataTable"
            highlight-current-row
            :bigDataShow="[4, 18]"
            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
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="matterName"
              label="物资名称"
              align="center"
            ></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
            :height="tableHeight"
            :bigDataShow="[4, 18]"
            @current-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="matterNameOld"
              label="物资名称"
              align="center"
            ></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"
          >
            <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="matterName"
              label="新系统物资名称"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="matterNameOld"
              min-width="300"
              label="老系统物资名称"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="createManName"
              label="创建人"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="300"
              prop="createTime"
              label="创建时间"
              align="left"
            ></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>
    <!-- 操作提示弹窗 -->
    <el-dialog
      title="操作说明"
      :visible.sync="msgDialogVisible"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="msg_wrap">
        <span class="text_indent">1、一个老系统物资名称可以关联多个新系统物资名称。</span>
        <span class="text_indent">2、新系统物资名称数据通过点击数据行前的复选框进行选中，老系统物资名称数据通过鼠标点击要关联的数据的所在行选中。</span>
        <span class="text_indent">3、选择好要进行关联的新老系统物资名称数据后，点击下方的关联按钮进行关联。</span>
        <span class="text_indent">4、如果需要解除新老系统物资名称数据之间的关联关系，在下方的关联数据展示表格中选中要解除关联的数据，然后点击解除按钮，一次可以解除多条关联关系。</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showMsg" size="mini" type="primary">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      icoreFilterFlag: true,
      dataLoading: false,
      dataLoading2: false,
      dataLoading3: false,
      multipleSelection: {},
      multipleSelection2: [],
      multipleSelection3: [],
      table: {
        list: [],
        list2: [],
        list3: []
      },
      searchForm: {
        newMatName: '', // 新系统物资名称
        oldMatName: '' // 老系统物资名称
      },
      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: {},
      msgDialogVisible: false // 操作指南弹窗
    }
  },
  async created () {
    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.searchNewData(1)
      this.searchOldData(1)
      this.getMatLinkData(1)
    },
    // 显示操作指南
    showMsg () {
      this.msgDialogVisible = !this.msgDialogVisible
    },
    // 分页查询新系统物资数据
    searchNewData (flag) {
      this.dataLoading = true;
      if (flag === 1) {
        this.page.pageNum = 1
      }
      let newMatName = this.searchForm.newMatName.split('\\')[0]
      this.axios.get('pass/systemBase/v1/meterbasematterinfomatchs/like/' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + `&matterName=${newMatName}`)
        .then(res => {
          this.table.list = res.data.list;
          this.dataLoading = false;
          this.page.totalPage = res.data.total;
        }).catch(e => {
          this.dataLoading = false;
        });
    },
    // 分页查询老系统物资数据
    searchOldData (flag) {
      this.dataLoading2 = true
      if (flag === 1) {
        this.page2.pageNum = 1
      }
      let oldMatName = this.searchForm.oldMatName.split('\\')[0]
      this.axios.get('pass/systemBase/v1/meterbasematterinfoolds/like/' + '?pageNum=' + this.page2.pageNum + '&pageSize=' + this.page2.pageSize + `&matterNameOld=${oldMatName}`)
        .then(res => {
          // 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;
        });
    },
    // 分页查询新系统物资和老系统物资关联数据
    getMatLinkData (flag) {
      this.dataLoading3 = true;
      if (flag === 1) {
        this.page3.pageNum = 1
      }
      let newMatName = this.searchForm.newMatName.split('\\')[0]
      let oldMatName = this.searchForm.oldMatName.split('\\')[0]
      this.axios.get('pass/systemBase/v1/meterbasematterinfomatchs/like/' + '?pageNum=' + this.page2.pageNum + '&pageSize=' + this.page2.pageSize + `&matterName=${newMatName}&matterNameOld=${oldMatName}&allowedTareWeight=1`)
        .then(res => {
          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
    },
    // 新系统物资表格行选中
    handleCurrentChange (item) {
      if (item) {
        this.searchForm.newMatName = item.matterName
        this.getMatLinkData()
      }
    },
    // 新系统物资数据表格多选回调
    handleSelectionChange1 (val) {
      this.multipleSelection1 = val
    },
    // 老系统物资数据表格行选中
    handleSelectionChange2 (item) {
      console.log(item)
      if (item) {
        this.multipleSelection2 = [{ ...item }]
        this.searchForm.oldMatName = item.matterNameOld
        this.getMatLinkData()
      }
    },
    // 新老系统物资关联数据多选回调
    handleSelectionChange3 (val) {
      this.multipleSelection3 = val
    },
    // 添加关联数据
    addData () {
      if (this.multipleSelection1.length < 1) {
        this.$message.warning('请勾选新系统物资数据！');
        return;
      }
      if (this.multipleSelection2.length < 1) {
        this.$message.warning('请勾选老系统物资数据！');
        return;
      }
      let linkList = []
      // 将勾选的用户数据和卸货点数据组合起来
      this.multipleSelection1.forEach(oItem => {
        oItem.matterNameOld = this.multipleSelection2[0].matterNameOld
        oItem.allowedTareWeight = '1'
        oItem.createManNo = this.getCookie('icore.icp-Authorization')
        oItem.createManName = this.getCookie('icore.icp-username')
        linkList.push({ ...oItem })
      })

      let configurationData = linkList
      this.axios.post('pass/systemBase/v1/meterbasematterinfomatchs/relation', configurationData, { individualType: 'json' }).then(res => {
        if (res.succeed) {
          this.$message.success(res.message);
          this.searchDatas()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    getCookie (name) {
      let start = document.cookie.indexOf(name + '=');
      if ((!start) && (name !== document.cookie.substring(0, name.length))) { return ''; }
      if (start === -1) { return ''; }
      let len = start + name.length + 1;
      let end = document.cookie.indexOf(';', len);
      if (end === -1) { end = document.cookie.length; }
      return decodeURIComponent(document.cookie.substring(len, end));
    },
    // 作废数据
    abolishData () {
      let ids = ''
      if (this.multipleSelection3.length < 1) {
        this.$message.warning('请选择要解除的关联配置！');
        return;
      }
      // 将所有选中的关联数据的id拼接成一个由逗号分隔的字符串
      this.multipleSelection3.forEach((item, index) => {
        // item.matterNameOld = ''
        item.allowedTareWeight = '0'
      })
      let configurationData = [...this.multipleSelection3]
      this.axios.post('pass/systemBase/v1/meterbasematterinfomatchs/relation', configurationData, { individualType: 'json' }).then(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.searchNewData(1);
    },
    // 新系统物资数据页跳转变化回调
    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.searchNewData();
    },
    // 老系统物资数据页大小变化回调
    pageSizeChange2 (size) {
      this.page2.pageSize = size;
      this.searchOldData(1);
    },
    // 老系统物资数据页跳转变化回调
    pageCurrentChange2 (index) {
      this.page2.pageNum = index;
      this.searchOldData();
    },
    // 新老系统物资关联数据页大小变化回调
    pageSizeChange3 (size) {
      this.page2.pageSize = size;
      this.getMatLinkData(1);
    },
    // 新老系统物资关联数据页跳转变化回调
    pageCurrentChange3 (index) {
      this.page2.pageNum = index;
      this.getMatLinkData();
    },
    // 根据行属性设置行样式
    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>
.quest_icon {
  width: 24px;
  height: 24px;
}

.quest_icon:hover {
  cursor: pointer;
  color: rgba(100, 100, 245, 0.651);
}

.text_indent {
  /* text-indent: -2em; */
  display: block;
  padding-left: 2em;
}
</style>