<!--承运单位配置-->
<template>
  <div class="systemBase carrier-wrap-xb">
    <el-row>
      <el-col :span="12">
        <div style="border-right: 1px solid #d5d5d5">
          <div class="common-title-div">
            <el-form ref="searchData" :inline="true" :model="carrierSearchForm">
              <el-form-item label-width="70px"
                ><span style="font-size: 18px">货代数据</span></el-form-item
              >
              <el-form-item prop="customerSupplierName" label="货代名称">
                <el-input
                  type="text"
                  size="mini"
                  clearable
                  v-model="carrierSearchForm.customerSupplierName"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="getDataList(1)"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="common-table-div">
          <el-table
            v-loading="dataLoading"
            :row-class-name="tableRowClassName"
            @row-click="rowChange"
            ref="dataTable"
            highlight-current-row
            border
            :height="tableHeight"
            :data="table.list"
            :exchangeFilterMap="{
              validFlag: { '0': '无效', '1': '有效' },
              customerSupplierType: {
                '0': '客户',
                '1': '供应商',
                '2': '客户/供应商',
                '3': '货代',
              },
              checkFlag: { '0': '未审核', '1': '已审核' },
            }"
            :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="customerSupplierNo"
              label="客商编号"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="customerSupplierName"
              min-width="300"
              label="客商名称"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="mnemonicCode"
              label="拼音助记码"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="customerSupplierType"
              label="客商类型"
              align="left"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.customerSupplierType == '0'">客户</span>
                <span v-else-if="scope.row.customerSupplierType == '1'"
                  >供应商</span
                >
                <span v-else-if="scope.row.customerSupplierType == '2'"
                  >客户/供应商</span
                >
                <span v-else-if="scope.row.customerSupplierType == '3'"
                  >货代</span
                >
              </template>
            </el-table-column>
            <!-- <el-table-column sortable :show-overflow-tooltip="true" min-width="100" prop="customerSupplierLogin" label="账号" align="left"></el-table-column>
                 <el-table-column sortable :show-overflow-tooltip="true" min-width="100" prop="customerSupplierPassword" label="密码" align="left"></el-table-column> -->
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="80"
              prop="validFlag"
              label="状态"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.validFlag == 1">有效</span>
                <span v-else-if="scope.row.validFlag == 0">无效</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="80"
              prop="checkFlag"
              label="审核状态"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.checkFlag == 1">已审核</span>
                <span v-else-if="scope.row.checkFlag == 0">未审核</span>
              </template>
            </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="[50, 100, 200, 400]"
            :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">
            <el-form ref="searchData" :inline="true" :model="custSearchForm">
              <el-form-item label-width="70px"
                ><span style="font-size: 18px">客商数据</span></el-form-item
              >
              <el-form-item prop="customerSupplierName" label="客商名称">
                <el-input
                  type="text"
                  size="mini"
                  clearable
                  v-model="custSearchForm.customerSupplierName"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="getDataList2(1)"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="common-table-div">
          <el-table
            v-loading="dataLoading2"
            :row-class-name="tableRowClassName2"
            ref="dataTable"
            highlight-current-row
            border
            :height="tableHeight"
            @selection-change="handleSelectionChange2"
            :data="table.list2"
            :exchangeFilterMap="{
              validFlag: { '0': '无效', '1': '有效' },
              customerSupplierType: {
                '0': '客户',
                '1': '供应商',
                '2': '客户/供应商',
                '3': '货代',
              },
              checkFlag: { '0': '未审核', '1': '已审核' },
            }"
            :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="customerSupplierNo"
              label="客商编号"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="customerSupplierName"
              min-width="300"
              label="客商名称"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="mnemonicCode"
              label="拼音助记码"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="customerSupplierType"
              label="客商类型"
              align="left"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.customerSupplierType == '0'">客户</span>
                <span v-else-if="scope.row.customerSupplierType == '1'"
                  >供应商</span
                >
                <span v-else-if="scope.row.customerSupplierType == '2'"
                  >客户/供应商</span
                >
                <span v-else-if="scope.row.customerSupplierType == '3'"
                  >货代</span
                >
              </template>
            </el-table-column>
            <!-- <el-table-column sortable :show-overflow-tooltip="true" min-width="100" prop="customerSupplierLogin" label="账号" align="left"></el-table-column>
                 <el-table-column sortable :show-overflow-tooltip="true" min-width="100" prop="customerSupplierPassword" label="密码" align="left"></el-table-column> -->
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="80"
              prop="validFlag"
              label="状态"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.validFlag == 1">有效</span>
                <span v-else-if="scope.row.validFlag == 0">无效</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="80"
              prop="checkFlag"
              label="审核状态"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.checkFlag == 1">已审核</span>
                <span v-else-if="scope.row.checkFlag == 0">未审核</span>
              </template>
            </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-column sortable :show-overflow-tooltip="true" min-width="80" prop="updateManName" label="修改人" align="left"></el-table-column>
                 <el-table-column sortable :show-overflow-tooltip="true" prop="updateTime" label="修改时间" align="center" min-width="140"></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="[50, 100, 200, 400]"
            :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" :model="relationSearchForm">
              <el-form-item label-width="80px"
                ><span style="font-size: 18px">货运代理配置</span></el-form-item
              >
              <el-form-item prop="carrierUnitName" label="货代名称">
                <el-input
                  type="text"
                  size="mini"
                  clearable
                  v-model="relationSearchForm.carrierUnitName"
                ></el-input>
              </el-form-item>
              <el-form-item prop="customerSupplierName" label="客商名称">
                <el-input
                  type="text"
                  size="mini"
                  clearable
                  v-model="relationSearchForm.customerSupplierName"
                ></el-input>
              </el-form-item>
              <el-form-item label-width="20px">
                <el-button type="primary" size="mini" @click="getDataList3(1)"
                  >查询</el-button
                >
              </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="customerSupplierNo"
              label="客商编号"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="customerSupplierName"
              min-width="300"
              label="客商名称"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="carrierUnitNo"
              label="货代编号"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="300"
              prop="carrierUnitName"
              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="[50, 100, 200, 400]"
            :page-size="page3.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page3.totalPage"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      icoreFilterFlag: true,
      dataLoading: false,
      dataLoading2: false,
      dataLoading3: false,
      multipleSelection: {},
      multipleSelection2: [],
      multipleSelection3: [],
      table: {
        list: [],
        list2: [],
        list3: []
      },
      carrierSearchForm: {
        customerSupplierName: ''
      },
      custSearchForm: {
        customerSupplierName: ''
      },
      relationSearchForm: {
        customerSupplierName: '',
        carrierUnitName: ''
      },
      page: {
        pageSize: 100,
        pageNum: 1,
        totalPage: 0
      },
      page2: {
        pageSize: 100,
        pageNum: 1,
        totalPage: 0
      },
      page3: {
        pageSize: 100,
        pageNum: 1,
        totalPage: 0
      },
      activeMenu: ''
    }
  },
  created () {
    this.tableHeight = (window.innerHeight - 290) / 2 > 250 ? (window.innerHeight - 290) / 2 : 250
    this.activeMenu = window.top.localStorage.getItem('activeMenu')
  },
  mounted () {
    this.getDataList()
    this.getDataList2()
    this.getDataList3()
  },
  methods: {
    // 货代数据
    getDataList (flag) {
      if (flag === 1) {
        this.page.pageNum = 1
      }
      this.dataLoading = true;
      this.axios.get('pass/systemBase/v1/meterbasecustomersuppliers/like/' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&customerSupplierType=3' + `&customerSupplierName=${this.carrierSearchForm.customerSupplierName}`)
        .then(res => {
          this.dataLoading = false;
          this.table.list = res.data.list;
          this.page.totalPage = res.data.total;
        }).catch(e => {
          this.dataLoading = false;
        });
    },
    // 客商数据
    getDataList2 (flag) {
      if (flag === 1) {
        this.page2.pageNum = 1
      }
      this.dataLoading2 = true;
      this.axios.get('pass/systemBase/v1/meterbasecustomersuppliers/like/' + '?pageNum=' + this.page2.pageNum + '&pageSize=' + this.page2.pageSize + `&customerSupplierName=${this.custSearchForm.customerSupplierName}&validFlag=1&checkFlag=1`)
        .then(res => {
          this.dataLoading2 = false;
          this.table.list2 = res.data.list;
          this.page2.totalPage = res.data.total;
        }).catch(e => {
          this.dataLoading2 = false;
        });
    },
    // 货代和客商关联数据
    getDataList3 (flag) {
      this.dataLoading3 = true;
      if (flag === 1) {
        this.page3.pageNum = 1
      }
      this.axios.get('pass/systemBase/v1/meterbasecarriercustomers/' + '?pageNum=' + this.page3.pageNum + '&pageSize=' + this.page3.pageSize + `&customerSupplierName=${this.relationSearchForm.customerSupplierName}&carrierUnitName=${this.relationSearchForm.carrierUnitName}`)
        .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
    },
    handleSelectionChange2 (val) {
      this.multipleSelection2 = val
    },
    handleSelectionChange3 (val) {
      this.multipleSelection3 = val
    },
    addData () {
      if (JSON.stringify(this.multipleSelection) == "{}") {
        this.$message.warning('请选择货代数据！');
        return;
      }
      if (this.multipleSelection2.length < 1) {
        this.$message.warning('请勾选客商数据！');
        return;
      }
      let configurationData = this.multipleSelection2
      configurationData.forEach(item => {
        item.carrierUnitNo = this.multipleSelection.customerSupplierNo
        item.carrierUnitName = this.multipleSelection.customerSupplierName
        item.id = ''
      })
      this.axios.post('pass/systemBase/v1/meterbasecarriercustomers/relation', configurationData, { individualType: 'json' }).then(res => {
        if (res.succeed) {
          this.$message.success(res.message);
          this.getDataList3()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    abolishData () {
      if (this.multipleSelection3.length < 1) {
        this.$message.warning('请选择要解除的货代配置！');
        return;
      }
      this.axios.post('pass/systemBase/v1/meterbasecarriercustomers/relieve', this.multipleSelection3, { individualType: 'json' }).then(res => {
        if (res.succeed) {
          this.$message.success(res.message);
          this.getDataList3()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    pageSizeChange (size) {
      this.page.pageSize = size;
      this.getDataList(1);
    },
    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.getDataList();
    },
    pageSizeChange2 (size) {
      this.page2.pageSize = size;
      this.getDataList2(1);
    },
    pageCurrentChange2 (index) {
      this.page2.pageNum = index;
      this.getDataList2();
    },
    pageSizeChange3 (size) {
      this.page2.pageSize = size;
      this.getDataList3(1);
    },
    pageCurrentChange3 (index) {
      this.page2.pageNum = index;
      this.getDataList3();
    },
    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>
.carrier-wrap-xb .common-title-div {
  padding-bottom: 0px;
}
</style>