<!--计量线程维护-->
<template>
  <div class="systemBase common-container-deriction">
    <div class="common-title-div">计量线程维护
      <div class="common-operation-button-div">
         <el-button icon="el-icon-circle-plus-outline" type="primary" size="mini" v-loading.fullscreen.lock="operateLoading"
           @click="addData"  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="danger" plain icon="el-icon-remove-outline" v-loading.fullscreen.lock="operateLoading"
          @click="abolishData"  v-privilege="activeMenu + 'ABOLISH'">废除</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>
      </div>
    </div>
    <div class="common-table-div">
     <el-table v-loading="dataLoading" @row-click="rowChange" ref="dataTable" :row-class-name="tableRowClassName" highlight-current-row
        border :height="tableHeight" @selection-change="handleSelectionChange" :data="table.list"
        :exchangeFilterMap="{'valueFlag':{'1':'无效','0':'有效'}}"
        :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="120px" prop="threadNo" label="线程编号" align="center"></el-table-column>
        <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="threadName" label="线程名称" align="left"></el-table-column>
        <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="threadEdition" label="线程版本" align="center"></el-table-column>
        <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="threadBelong" label="线程归属" align="left"></el-table-column>
        <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="refreshRate" label="刷新频率（s）" align="center"></el-table-column>
        <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="threadEffect" label="线程作用" align="left"></el-table-column>
        <el-table-column sortable :show-overflow-tooltip="true" min-width="80px" prop="valueFlag" label="状态" align="center">
          <template slot-scope="scope">
              <span v-if="scope.row.valueFlag == 1">无效</span>
              <span v-else-if="scope.row.valueFlag == 0">有效</span>
          </template>
        </el-table-column>
        <el-table-column sortable :show-overflow-tooltip="true" min-width="80px" prop="createManName" label="创建人" align="center"></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="center"></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="border-top: 1px solid #d5d5d5; margin-top: 10px">
      <el-form ref="baseData" label-width="80px" :rules="ruleValidate" :inline="true"  :model="baseData">
         <!-- <el-form-item prop="threadNo" label="线程编号">
           <el-input v-model="baseData.threadNo" clearable readonly disabled size="small" style="width:120px"></el-input>
         </el-form-item> -->
         <el-form-item prop="threadName" label="线程名称">
           <el-input v-model="baseData.threadName" clearable  size="small" placeholder="请输入" style="width:120px"></el-input>
         </el-form-item>
         <el-form-item prop="threadEdition" label="线程版本">
           <el-input v-model="baseData.threadEdition" clearable size="small" placeholder="请输入" style="width:120px"></el-input>
         </el-form-item>
         <el-form-item prop="threadBelong" label="线程归属">
           <el-input v-model="baseData.threadBelong" clearable size="small" placeholder="请输入" style="width:120px"></el-input>
         </el-form-item>
         <el-form-item prop="refreshRate" label="刷新频率">
           <el-input v-model="baseData.refreshRate" clearable size="small" placeholder="请输入" style="width:120px"></el-input>
         </el-form-item>
         <el-form-item prop="threadEffect" label="线程作用">
           <el-input v-model="baseData.threadEffect" clearable size="small" placeholder="请输入" style="width:120px"></el-input>
         </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
 import {
    meterbasethreads
  } from '../../../utils/api.js';
  import {
    Delete,
    Recovery,
    add,
    modify,
    discard
  } from '../../../utils/httpRequest.js';
  import pinyinUtils from '../../../utils/pinyin/pinyinUtils.js'
  export default {
    data () {
      return {
        dataLoading: false,
        operateLoading: false,
        icoreFilterFlag: true,
        baseData: {
          threadNo: '',
          threadName: '',
          threadEdition: '',
          refreshRate: '',
          threadBelong: '',
          threadEffect: ''
        },
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        table: {
          list: []
        },
        multipleSelection: [],
        tableHeight: 0,
        ruleValidate: {
          // threadNo: [{
          //   required: true,
          //   message: '线程编号不能为空',
          //   trigger: 'change'
          // }],
          threadName: [{
            required: true,
            message: '线程名称不能为空',
            trigger: 'change'
          }],
          threadEdition: [{
            required: true,
            message: '线程版本不能为空',
            trigger: 'change'
          },
          { required: true, validator: this.threadEditionIsNum, trigger: 'blur'}],
          refreshRate: [{
            required: true,
            message: '刷新频率不能为空',
            trigger: 'change'
          }],
          threadBelong: [{
            required: true,
            message: '线程归属不能为空',
            trigger: 'change'
          }],
          threadEffect: [{
            required: true,
            message: '线程作用不能为空',
            trigger: 'change'
          }]
        },
        activeMenu: ''
      }
    },
    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.getDataList();
    },
    methods: {
      rowChange (row, column, event) {
        this.baseData = Object.assign ({}, row);
      },
      threadEditionIsNum (rule, value, callback) {
        const patrn = /^\d+(\.\d+)?$/
       if (!patrn.test(this.baseData.threadEdition)) {
        callback(new Error('请输入正确格式的版本号！'))
       }else{
        callback()
       }
      },
      addData () {
        let _this = this;
        _this.$refs['baseData'].validate((valid) => {
          if (valid) {
            _this.operateLoading = true;
            let baseDataAdd = {};
            // baseDataAdd.threadNo = _this.baseData.threadNo,
            baseDataAdd.threadName = _this.baseData.threadName,
            baseDataAdd.threadEdition = _this.baseData.threadEdition,
            baseDataAdd.refreshRate = _this.baseData.refreshRate,
            baseDataAdd.threadBelong = _this.baseData.threadBelong,
            baseDataAdd.threadEffect = _this.baseData.threadEffect
            add(meterbasethreads, 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(meterbasethreads + _this.baseData.threadNo + '/', _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(meterbasethreads + 'Recovery', _this.multipleSelection, (e) => {
          _this.operateLoading = false;
          if (!e) {
            _this.getDataList();
          }
        });
      },
      // deleteData () {
      //   this.$confirm('确定删除选中的计量线程信息？', {
      //       confirmButtonText: '确定',
      //       cancelButtonText: '取消'
      //     })
      //     .then(() => {
      //       this.operateLoading = true;
      //       Delete(meterbasethreads, this.multipleSelection, (e) => {
      //         this.operateLoading = false;
      //         if (!e) {
      //           this.getDataList();
      //         }
      //       })
      //     })
      //     .catch(action => {
      //       this.$message({
      //         type: 'info',
      //         message: action === 'cancel' ? '放弃保存并离开页面' : '停留在当前页面'
      //       })
      //     });
      // },
       abolishData () {
        let _this = this;
        _this.operateLoading = true;
        discard(meterbasethreads + '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(meterbasethreads + '?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.valueFlag !== '0') {
          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>
