<!--动轨单位维护-->
<template>
  <div class="systemBase">
    <div>
      <div style="margin-top: 10px; border-bottom: 1px solid #d5d5d5">
        <el-form :inline="true" :model="search">
          <el-form-item>
            <div style="font-size: 16px; padding: 0px 20px">单位维护</div>
          </el-form-item>
          <el-form-item label-width="70px" prop="carNo" label="单位名称">
            <el-input
              v-model="search.customerSupplierName"
              clearable
              size="small"
              style="width: 160px"
              placeholder="请输入"
            ></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 + 'QUERY'"
              v-loading.fullscreen.lock="operateLoading"
              >查询</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-loading.fullscreen.lock="operateLoading"
              v-privilege="activeMenu + 'ADD'"
              >新增</el-button
            >
          </el-form-item>
          <el-form-item label-width="20px">
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"
              v-privilege="activeMenu + 'PUT'"
              v-loading.fullscreen.lock="operateLoading"
              @click="modifyData"
              >修改</el-button
            >
          </el-form-item>
          <el-form-item label-width="20px">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-check"
              v-privilege="activeMenu + 'RECOVERY'"
              v-loading.fullscreen.lock="operateLoading"
              @click="recoveryData"
              >启用</el-button
            >
          </el-form-item>
          <el-form-item label-width="20px">
            <el-button
              size="mini"
              type="danger"
              plain
              icon="el-icon-remove-outline"
              v-loading.fullscreen.lock="operateLoading"
              @click="abolishData"
              v-privilege="activeMenu + 'ABOLISH'"
              >废除</el-button
            >
          </el-form-item>
          <!-- <el-form-item label-width="20px">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-check"
              v-privilege="activeMenu + 'CHECK'"
              v-loading.fullscreen.lock="operateLoading"
              @click="checkData"
              >审核</el-button
            >
          </el-form-item>
          <el-form-item label-width="20px">
            <el-button
              size="mini"
              type="danger"
              plain
              icon="el-icon-remove-outline"
              v-loading.fullscreen.lock="operateLoading"
              @click="unCheckData"
              v-privilege="activeMenu + 'UNCHECK'"
              >反审</el-button
            >
          </el-form-item> -->
        </el-form>
      </div>
      <!-- <div class="common-title-div">
        <div class="common-operation-button-div">
          <el-button icon="el-icon-circle-plus-outline" type="primary" size="mini" @click="addData"
            v-loading.fullscreen.lock="operateLoading">新增</el-button>
          <el-button icon="el-icon-edit" type="primary" size="mini" v-loading.fullscreen.lock="operateLoading" @click="modifyData">修改</el-button>
          <el-button size="mini" type="primary" icon="el-icon-check" v-loading.fullscreen.lock="operateLoading" @click="recoveryData">启用</el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-remove-outline" v-loading.fullscreen.lock="operateLoading"
            @click="abolishData">废除</el-button>
        </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"
          @selection-change="handleSelectionChange"
          :data="table.list"
          :exchangeFilterMap="{
            validFlag: { '0': '无效', '1': '有效' },
            customerSupplierType: {
              '0': '客户',
              '1': '供应商',
              '2': '客户/供应商',
              '3': '货代',
            },
            checkFlag: { '0': '未审核', '1': '已审核' },
          }"
          :icore-filter-flag="icoreFilterFlag"
          :bigDataShow="groupList"
        >
          <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="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="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="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>
      <!-- <div ref="editTitle" class="common-title-div" style="border-top: 1px solid #d5d5d5;">编辑区
      </div> -->
      <div
        ref="editDiv"
        class="commom-edit-div"
        style="border-top: 1px solid #d5d5d5; margin-top: 10px"
      >
        <el-form
          ref="baseData"
          label-width="80px"
          :inline="true"
          :rules="ruleValidate"
          :model="baseData"
        >
          <el-form-item prop="customerSupplierName" label="单位名称">
            <el-input
              v-model="baseData.customerSupplierName"
              clearable
              size="mini"
              style="width: 160px"
              placeholder="请输入"
              @blur="myBlur"
            ></el-input>
          </el-form-item>
          <el-form-item prop="mnemonicCode" label="拼音助记码">
            <el-input
              v-model="baseData.mnemonicCode"
              clearable
              size="mini"
              style="width: 160px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item prop="customerSupplierLogin" label="账号">
            <el-input
              v-model="baseData.customerSupplierLogin"
              clearable
              size="mini"
              style="width: 160px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item prop="customerSupplierPassword" label="密码">
            <el-input
              v-model="baseData.customerSupplierPassword"
              clearable
              size="mini"
              style="width: 160px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="客商类型">
            <el-select
              v-model="baseData.customerSupplierType"
              filterable
              collapse-tags
              size="mini"
              style="width: 160px"
            >
              <el-option
                v-for="(item, index) in type"
                :key="index"
                :label="item.label"
                :value="item.state"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  meterbasecustomersuppliers
} from '../../../utils/api.js';
import {
  discard,
  Recovery,
  add,
  modify
} from '../../../utils/httpRequest.js';
import pinyinUtils from '../../../utils/pinyin/pinyinUtils.js'
export default {
  data () {
    return {
      dataLoading: false,
      operateLoading: false,
      icoreFilterFlag: true,
      baseData: {
        customerSupplierName: '',
        mnemonicCode: '',
        customerSupplierPassword: '',
        customerSupplierType: '0',
        customerSupplierLogin: ''
      },
      search: {
        customerSupplierType: '',
        customerSupplierName: '',
        checkFlag: ''
      },
      page: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      checkFlagItem: [{
        label: '未审核',
        state: '0'
      },
      {
        label: '已审核',
        state: '1'
      },
      ],
      type: [{
        label: '客户',
        state: '0'
      },
      {
        label: '供应商',
        state: '1'
      },
      {
        label: '客户/供应商',
        state: '2'
      },
      {
        label: '货代',
        state: '3'
      }
      ],
      table: {
        list: []
      },
      multipleSelection: [],
      tableHeight: 0,
      ruleValidate: {
        customerSupplierName: [{
          required: true,
          message: '客商名称不能为空',
          trigger: 'change'
        }],
        // customerSupplierLogin: [{
        //   required: true,
        //   message: '账号不能为空',
        //   trigger: 'change'
        // }],
        // customerSupplierPassword: [{
        //   required: true,
        //   message: '密码不能为空',
        //   trigger: 'change'
        // }]
      },
      activeMenu: '',
      groupList: [8]
    }
  },
  created () {
    this.tableHeight = (window.innerHeight - 220) > 400 ? window.innerHeight - 220 : 400
    this.activeMenu = window.top.localStorage.getItem('activeMenu')
  },
  mounted () {
    // this.tableHeight = this.getTableHeight(this.$refs['dataTable'].$el) - 80;
    this.searchDatas();
  },
  methods: {
    rowChange (row, column, event) {
      this.baseData = Object.assign({}, row);
    },
    radiusEmpty (rule, value, callback) {
      if (this.baseData.useType === '0' && this.baseData.radius === '') {
        return callback(new Error('半径不能为空'))
      } else {
        return callback()
      }
    },
    longitudeSpaceEmpty (rule, value, callback) {
      if (this.baseData.useType === '1' && this.baseData.longitudeSpace === '') {
        return callback(new Error('经度间距不能为空'))
      } else {
        return callback()
      }
    },
    latitudeSpaceEmpty (rule, value, callback) {
      if (this.baseData.useType === '1' && this.baseData.latitudeSpace === '') {
        return callback(new Error('纬度间距半径不能为空'))
      } else {
        return callback()
      }
    },
    addData () {
      let _this = this;
      _this.$refs['baseData'].validate((valid) => {
        if (valid) {
          _this.operateLoading = true;
          let baseDataAdd = {};
          baseDataAdd.customerSupplierName = _this.baseData.customerSupplierName
          baseDataAdd.mnemonicCode = _this.baseData.mnemonicCode
          baseDataAdd.customerSupplierPassword = _this.baseData.customerSupplierPassword
          baseDataAdd.customerSupplierType = _this.baseData.customerSupplierType
          baseDataAdd.customerSupplierLogin = _this.baseData.customerSupplierLogin
          baseDataAdd.memo = '动态轨道衡'
          add(meterbasecustomersuppliers, baseDataAdd, (e) => {
            _this.operateLoading = false;
            // _this.getDataList();
            _this.searchDatas()
            if (!e) {
              _this.$refs['baseData'].resetFields && _this.$refs['baseData'].resetFields();
            }
          })
        }
      });
    },
    modifyData () {
      let _this = this;
      _this.$refs['baseData'].validate((valid) => {
        if (valid) {
          _this.operateLoading = true;
          modify(meterbasecustomersuppliers + _this.baseData.customerSupplierNo + '/', _this.baseData, (e) => {
            _this.operateLoading = false;
            // _this.getDataList();
            _this.searchDatas()
            if (!e) {
              _this.$refs['baseData'].resetFields && _this.$refs['baseData'].resetFields();
            }
          })
        }
      });
    },
    recoveryData () {
      let _this = this;
      _this.operateLoading = true;
      Recovery(meterbasecustomersuppliers + 'Recovery', _this.multipleSelection, (e) => {
        _this.operateLoading = false;
        if (!e) {
          // _this.getDataList();
          _this.searchDatas()
        }
      });
    },
    abolishData () {
      let _this = this;
      _this.operateLoading = true;
      discard(meterbasecustomersuppliers + 'abolish', _this.multipleSelection, (e) => {
        _this.operateLoading = false;
        if (!e) {
          // _this.getDataList();
          _this.searchDatas()
        }
      });
    },
    searchDatas () {
      // 将表格滚动条回到顶部
      this.$refs.dataTable.bodyWrapper.scrollTop = 0;
      this.page.pageNum = 1;
      this.searchData()
    },
    searchData () {
      this.dataLoading = true;
      this.axios.get('pass/systemBase/v1/meterbasecustomersuppliers/like/' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&customerSupplierType=' + this.search.customerSupplierType
        + '&customerSupplierName=' + this.search.customerSupplierName + '&checkFlag=' + this.search.checkFlag + '&memo=动态轨道衡')
        .then(res => {
          this.dataLoading = false;
          if (res.data.list.length < 64) {
            this.groupList = [8]
          } else {
            this.groupList = [8, 1]
          }
          this.table.list = res.data.list;
          this.page.totalPage = res.data.total;
        }).catch(e => {
          this.dataLoading = false;
        });
    },
    checkData () {//审核
      this.axios.post('pass/systemBase/v1/meterbasecustomersuppliers/audit', this.multipleSelection, { individualType: 'json' }).then(res => {
        if (res.code == '0' || res.code == '200') {
          this.$message.success('审核成功');
          this.getDataList();
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    unCheckData () {//反审
      this.axios.post('pass/systemBase/v1/meterbasecustomersuppliers/unaudit', this.multipleSelection, { individualType: 'json' }).then(res => {
        if (res.code == '0' || res.code == '200') {
          this.$message.success('反审成功');
          this.getDataList();
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e.message)
      })

    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    getTableHeight (dom) {
      return (window.innerHeight - dom.offsetTop);
    },
    pageSizeChange (size) {
      this.page.pageSize = size;
      this.searchData()
    },

    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.searchData()
    },
    getDataList () {
      this.dataLoading = true;
      this.axios.get(meterbasecustomersuppliers + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize)
        .then(res => {
          this.dataLoading = false;
          if (res.data.list.length < 64) {
            this.groupList = [8]
          } else {
            this.groupList = [8, 1]
          }
          console.log(this.groupList)
          this.table.list = res.data.list;
          this.page.totalPage = res.data.total;
        }).catch(e => {
          this.dataLoading = false;
        });
    },
    tableRowClassName ({
      row,
      rowIndex
    }) {
      if (row.validFlag !== '1') {
        return 'error-row2';
      }
      return '';
    },
    myBlur () {
      if (this.baseData.customerSupplierName) {
        this.baseData.mnemonicCode = pinyinUtils.initial(this.baseData.customerSupplierName);
      }
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
</style>
