<!--来源去向配置管理-->
<template>
  <div class="systemBase">
    <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" v-privilege="activeMenu + 'ADD'">新增</el-button>
          <el-button icon="el-icon-edit" type="primary" size="mini" v-loading.fullscreen.lock="operateLoading" @click="modifyData" v-privilege="activeMenu + 'UPDATE'">修改</el-button>
          <el-button size="mini" type="primary" icon="el-icon-check" v-loading.fullscreen.lock="operateLoading" @click="recoveryData" v-privilege="activeMenu + 'RECOVERY'">启用</el-button>
          <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>
        </div>
      </div>
      <div class="common-table-div">
        <el-table v-loading="dataLoading" :row-class-name="tableRowClassName" ref="dataTable" border :height="tableHeight"
          @selection-change="handleSelectionChange" :data="table.list" highlight-current-row @row-click="rowChange"
          :exchangeFilterMap="{'validFlag':{'0':'无效','1':'有效'}, 'useType':{'0':'半径','1':'间距','2':'不使用'}}"
          :icore-filter-flag="icoreFilterFlag">
          <el-table-column type="index" label="序号" fixed="left" align="center"></el-table-column>
          <el-table-column type="selection" width="55" fixed="left" align="center"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="100px" prop="loadPointNo" label="装卸点编号" align="center"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="100px" prop="loadPointName" label="装卸点名称" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="100px" prop="indexCode" label="索引码" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="100px" prop="meterCode" label="计量码" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="100px" prop="longitude" label="经度" align="center"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="100px" prop="latitude" label="纬度"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="100px" prop="radius" label="半径" align="center"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="100px" prop="longitudeSpace" label="经度间距" align="center"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="100px" prop="latitudeSpace" label="纬度间距" align="center"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="80px" prop="useType" label="使用类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.useType == '0'">半径</span>
              <span v-else-if="scope.row.useType == '1'">间距</span>
              <span v-else-if="scope.row.useType == '2'">不使用</span>
            </template>
          </el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="80px" 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="80px" prop="createManName" label="创建人" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="createTime" label="创建时间" align="center"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="80px" prop="updateManName" label="修改人" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="updateTime" 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>
      <!-- <div ref="editTitle" class="common-title-div" style="border-top: 1px solid #d5d5d5;">编辑区
      </div> -->
      <div ref="editDiv" class="commom-edit-div"  style="margin-top: 10px; border-top: 1px solid #d5d5d5;">
        <el-form ref="baseData" label-width="80px" :rules="ruleValidate" :model="baseData" :inline="true">
              <el-form-item prop="loadPointName" label="装卸点名称">
                <el-input  v-model="baseData.loadPointName" clearable style="width:120px" size="small" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item prop="useType" label="使用类型">
                <el-select  v-model="baseData.useType" clearable filterable collapse-tags size="small" style="width:120px" @change="selectTrigger(baseData.useType)">
                  <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-item prop="radius" label="半径">
                <el-input  v-model="baseData.radius" clearable style="width:120px" :disabled="isInput" size="small"></el-input>
              </el-form-item>
              <el-form-item prop="longitudeSpace" label="经度间距">
                <el-input  v-model="baseData.longitudeSpace" clearable style="width:120px" :disabled="isInput2" size="small"></el-input>
              </el-form-item>
              <el-form-item prop="latitudeSpace" label="纬度间距">
                <el-input  v-model="baseData.latitudeSpace" clearable style="width:120px" :disabled="isInput2" size="small"></el-input>
              </el-form-item>
              <el-form-item prop="indexCode" label="索引码">
                <el-input  v-model="baseData.indexCode" clearable style="width:120px" size="small" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item prop="longitude" label="经度">
                <el-input  v-model="baseData.longitude" clearable style="width:120px" size="small" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item prop="latitude" label="纬度">
                <el-input  v-model="baseData.latitude" clearable style="width:120px" size="small" placeholder="请输入"></el-input>
              </el-form-item>
               <el-form-item prop="meterCode" label="计量码">
                <el-input  v-model="baseData.meterCode" clearable style="width:120px" size="small"></el-input>
              </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    meterbaseloadpoints
  } from '../../../utils/api.js';
  import {
    discard,
    Recovery,
    add,
    modify
  } from '../../../utils/httpRequest.js';
  export default {
    data () {
      return {
        dataLoading: false,
        operateLoading: false,
        icoreFilterFlag: true,
        type: [{
            label: '半径',
            state: '0'
          },
          {
            label: '间距',
            state: '1'
          },
          {
            label: '不使用',
            state: '2'
          }
        ],
        table: {
          list: []
        },
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        isInput2: true,
        isInput: false,
        tableHeight: 0,
        multipleSelection: [],
        baseData: {
          loadPointName: '',
          indexCode: '',
          longitude: '',
          latitude: '',
          radius: '',
          longitudeSpace: '',
          latitudeSpace: '',
          useType: '0',
          meterCode: ''
        },
        ruleValidate: {
          loadPointName: [{
            required: true,
            message: '装卸点名称不能为空',
            trigger: 'change'
          }],
          radius: [{
            required: true,
            validator: this.radiusEmpty,
            trigger: 'change'
          }],
          longitudeSpace: [{
            required: false,
            validator: this.longitudeSpaceEmpty,
            trigger: 'change'
          }],
          latitudeSpace: [{
            required: false,
            validator: this.latitudeSpaceEmpty,
            trigger: 'change'
          }],
          meterCode: [{
            required: true,
            message: '计量码不能为空',
            trigger: 'change'
          }]
        },
        activeMenu: ''
      }
    },
    created(){
      this.tableHeight = window.innerHeight - 220 > 500 ? window.innerHeight - 220 : 500;
      this.activeMenu = window.top.localStorage.getItem('activeMenu')
    },
    mounted () {
      this.getDataList();
    },
    methods: {
      selectTrigger(useType) {
        if (useType === '0') {
          this.isInput = false;
          this.isInput2 = true;
          this.baseData.longitudeSpace = '';
          this.baseData.latitudeSpace = '';
          this.ruleValidate.longitudeSpace[0].required = false;
          this.ruleValidate.latitudeSpace[0].required = false;
          this.ruleValidate.radius[0].required = true;
        } else if (useType === '1') {
          this.isInput2 = false;
          this.isInput = true;
          this.baseData.radius = '';
          this.ruleValidate.longitudeSpace[0].required = true;
          this.ruleValidate.latitudeSpace[0].required = true;
          this.ruleValidate.radius[0].required = false;
        } else if (useType === '2') {
          this.isInput2 = true;
          this.isInput = true;
          this.baseData.longitudeSpace = '';
          this.baseData.latitudeSpace = '';
          this.baseData.radius = '';
          this.ruleValidate.longitudeSpace[0].required = false;
          this.ruleValidate.latitudeSpace[0].required = false;
          this.ruleValidate.radius[0].required = false;
        }
      },
      rowChange (row, column, event) {
        this.baseData = Object.assign ({}, row);
         if (row.useType === '0') {
          this.isInput = false;
          this.isInput2 = true;
          this.ruleValidate.longitudeSpace[0].required = false;
          this.ruleValidate.latitudeSpace[0].required = false;
          this.ruleValidate.radius[0].required = true;
        } else if (row.useType === '1') {
          this.isInput2 = false;
          this.isInput = true;
          this.ruleValidate.longitudeSpace[0].required = true;
          this.ruleValidate.latitudeSpace[0].required = true;
          this.ruleValidate.radius[0].required = false;
        } else if (row.useType === '2') {
          this.isInput2 = true;
          this.isInput = true;
          this.ruleValidate.longitudeSpace[0].required = false;
          this.ruleValidate.latitudeSpace[0].required = false;
          this.ruleValidate.radius[0].required = false;
        }
      },
      radiusEmpty (rule, value, callback) {
        if (this.baseData.useType === '0' && (this.baseData.radius === '' || this.baseData.radius === null)) {
          return callback(new Error('半径不能为空'))
        } else {
          return callback()
        }
      },
      longitudeSpaceEmpty (rule, value, callback) {
        if (this.baseData.useType === '1' && (this.baseData.longitudeSpace === ''|| this.baseData.longitudeSpace === null)) {
          return callback(new Error('经度间距不能为空'))
        } else {
          return callback()
        }
      },
      latitudeSpaceEmpty (rule, value, callback) {
        if (this.baseData.useType === '1' && (this.baseData.latitudeSpace === ''|| this.baseData.latitudeSpace === null)) {
          return callback(new Error('纬度间距半径不能为空'))
        } else {
          return callback()
        }
      },
      addData () {
        let _this = this;
        _this.$refs['baseData'].validate((valid) => {
          if (valid) {
            _this.operateLoading = true;
            let baseDataAdd = {};
            baseDataAdd.loadPointName = _this.baseData.loadPointName,
            baseDataAdd.indexCode = _this.baseData.indexCode,
            baseDataAdd.longitude = _this.baseData.longitude,
            baseDataAdd.latitude = _this.baseData.latitude,
            baseDataAdd.radius = _this.baseData.radius,
            baseDataAdd.longitudeSpace = _this.baseData.longitudeSpace,
            baseDataAdd.latitudeSpace = _this.baseData.latitudeSpace,
            baseDataAdd.useType = _this.baseData.useType,
            baseDataAdd.meterCode = _this.baseData.meterCode,
            add(meterbaseloadpoints, baseDataAdd, (e) => {
              _this.operateLoading = false;
              _this.getDataList();
              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(meterbaseloadpoints + _this.baseData.loadPointNo + '/', _this.baseData, (e) => {
              _this.operateLoading = false;
              _this.getDataList();
              if (!e) {
                _this.$refs['baseData'].resetFields && _this.$refs['baseData'].resetFields();
              }
            })
          }
        });
      },
      recoveryData () {
        let _this = this;
        _this.operateLoading = true;
        Recovery(meterbaseloadpoints + 'Recovery', _this.multipleSelection, (e) => {
          _this.operateLoading = false;
          if (!e) {
            _this.getDataList();
          }
        });
      },
      abolishData () {
        let _this = this;
        _this.operateLoading = true;
        discard(meterbaseloadpoints + 'abolish', _this.multipleSelection, (e) => {
          _this.operateLoading = false;
          if (!e) {
            _this.getDataList();
          }
        });
      },
      handleSelectionChange (val) {
        this.multipleSelection = val;
      },
      getTableHeight (dom) {
        return (window.innerHeight - dom.offsetTop);
      },
      pageSizeChange (size) {
        this.page.pageSize = size;
        this.getDataList();
      },

      pageCurrentChange (index) {
        this.page.pageNum = index;
        this.getDataList();
      },
      getDataList () {
        this.dataLoading = true;
        this.axios.get(meterbaseloadpoints + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize)
          .then(res => {
            this.dataLoading = false;
            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 '';
      }
    }
  }
</script>

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