<!--物料计量时间段管理-->
<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" @row-click="rowChange" ref="dataTable"
          border :height="tableHeight" @selection-change="handleSelectionChange" :data="table.list" highlight-current-row
          :exchangeFilterMap="{'validFlag':{'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="100px" prop="timesNo" label="时间编号" align="center"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="startTime" label="开始时间" align="center"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="endTime" label="结束时间" align="center"></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" width="140"></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" 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 class="lineDiv" v-if="detailData" style="border-bottom: 1px solid #DCDCDC;height:5px" ref="lineDiv"></div>
      <div class="common-title-div">物料配置</div>
      <el-row>
        <el-col :span="11">
          <div class="common-table-div">
            <el-table v-loading="dataLoading2" border :height="tableHeight" @selection-change="handleSelectionChange2"
              :data="table2.list" highlight-current-row
              :icore-filter-flag="icoreFilterFlag" ref="dataTable2">
              <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="matterNo" label="物料编号" align="center"></el-table-column>
              <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="matterName" label="物料名称" align="left"></el-table-column>
              <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="matterNatureName" label="物料属性名称" align="left"></el-table-column>
              <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="meterNatureName" label="计量属性名称" align="left"></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-col :span="2">
          <div style="display: flex;flex-direction: column;justify-content: center;height: 262px;">
            <el-button size="mini" icon="el-icon-caret-right" type="primary"  @click="rightClick" v-privilege="activeMenu + 'RIGHT'">右移</el-button>
            <el-button size="mini" icon="el-icon-caret-left" type="primary" style="margin-top: 50px;" @click="leftClick" v-privilege="activeMenu + 'LEFT'">左移</el-button>
          </div>
        </el-col>
        <el-col :span="11">
          <div class="common-table-div">
            <el-table v-loading="dataLoading3" border :height="tableHeight" @selection-change="handleSelectionChange3"
              :data="table3.list" highlight-current-row
              :icore-filter-flag="icoreFilterFlag" ref="dataTable3">
              <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="matterNo" label="物料编号" align="center"></el-table-column>
              <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="matterName" label="物料名称" align="left"></el-table-column>
               <el-table-column sortable :show-overflow-tooltip="true" min-width="100px" prop="timesNo" label="时间编号" align="center"></el-table-column>
              <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="matterNatureName" label="物料属性名称" align="left"></el-table-column>
              <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="meterNatureName" 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>
      <div ref="editTitle" class="common-title-div" style="border-top: 1px solid #d5d5d5;">编辑区
      </div>
      <div ref="editDiv" class="commom-edit-div">
        <el-form ref="baseData" label-width="80px" :inline="true" :model="baseData" :rules="ruleValidate">
              <el-form-item prop="startTime" label="开始时间">
                <el-time-picker style="width: 160px" clearable size="small" v-model="baseData.startTime">
                </el-time-picker>
              </el-form-item>
              <el-form-item prop="endTime" label="结束时间">
                <el-time-picker style="width: 160px" clearable size="small" v-model="baseData.endTime">
                </el-time-picker>
              </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    formatDate,
    convertDate
  } from '@/utils/util.js';
  import {
    meterbasetimesinfos,
    meterbasematterinfos,
    meterbasemattertimess
  } from '../../../utils/api.js';
  import {
    discard,
    Recovery,
    add,
    modify
  } from '../../../utils/httpRequest.js';
  export default {
    data () {
      return {
        dataLoading: false,
        dataLoading2: false,
        dataLoading3: false,
        operateLoading: false,
        icoreFilterFlag: true,
        table: {
          list: []
        },
        table2: {
          list: []
        },
        table3: {
          list: []
        },
        baseData: {
          startTime: '',
          endTime: ''
        },
        multipleSelection: [],
        multipleSelection2: [],
        multipleSelection3: [],
        tableHeight: 0,
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        page2: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        page3: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        ruleValidate: {
          startTime: [{
            required: true,
            message: '请选择开始时间',
            trigger: 'change'
          }],
          endTime: [{
            required: true,
            message: '请选择结束时间',
            trigger: 'change'
          },
          { 
            required: true, 
            validator: this.endTimeVerify, 
            trigger: 'blur' 
          }]
        },
        detailData: true,
        activeMenu: ''
      }
    },
    created(){
      this.tableHeight = (window.innerHeight - 370)/2 > 200 ? (window.innerHeight - 370)/2 : 200;
      this.activeMenu = window.top.localStorage.getItem('activeMenu')
    },
    mounted () {
      // this.tableHeight = this.getTableHeight(this.$refs['dataTable'].$el) - 80;
      this.getDataList();
      this.getDataList2();
      // this.getDataList3();
      this.changeTableHeigh()
    },
    methods: {
      rowChange (row, column, event) {
        this.baseData = Object.assign ({}, row);
        this.baseData.startTime = convertDate('2020-10-26 ' + this.baseData.startTime)
        this.baseData.endTime = convertDate('2020-10-26 ' + this.baseData.endTime)
        this.firstRow = row
        this.getDataList3(this.firstRow)
      },
      endTimeVerify (rule, value, callback) {
         if(this.baseData.endTime){
	          if(Date.parse(this.baseData.endTime) > Date.parse(this.baseData.startTime)){
	            callback();
	          }else{
	            callback(new Error('结束时间不得早于开始时间！'));
	          }
	        }else{
	          callback();
          }
      },
      changeTableHeigh () {
       var tableDiv = this.$refs.dataTable.$el
       var dtable = this.$refs.dataTable2.$el
       var dtable2 = this.$refs.dataTable3.$el
       var oDiv = this.$refs.lineDiv
       oDiv.onmousedown = function(ev){
       var theight = parseInt(tableDiv.offsetHeight)//parseInt为了不指向对象
       var dheight = parseInt(dtable.offsetHeight)
       var dheight2 = parseInt(dtable2.offsetHeight)
       oDiv.style.cursor = 's-resize'
       var ev = ev || event;
       //鼠标按下坐标
       var mouseDownX = ev.clientX;
       var mouseDownY = ev.clientY;
       // IE8 取消默认行为-设置全局捕获
       if(oDiv.setCapture){
       oDiv.setCapture();
       }
       document.onmousemove = function(ev){
       var ev = ev || event;
       // 鼠标移动时的鼠标位置
       var mouseMoveX = ev.clientX;
       var mouseMoveY = ev.clientY;
       tableDiv.style.height = theight+(mouseMoveY-mouseDownY)+"px"
       dtable.style.height = dheight +(mouseDownY-mouseMoveY)+"px"
       dtable2.style.height = dheight2 +(mouseDownY-mouseMoveY)+"px"
       }
       }
       document.onmouseup = function(){
       document.onmousemove = null;
       // 释放全局捕获
       if(oDiv.releaseCapture){
       oDiv.releaseCapture();
       }
       }
       return false;
      },
      handleSelectionChange (val) {
        this.multipleSelection = val;
      },
      handleSelectionChange2 (val) {
        this.multipleSelection2 = val;
      },
      handleSelectionChange3 (val) {
        this.multipleSelection3 = val;
      },
      getTableHeight (dom) {
        return (window.innerHeight - dom.offsetTop);
      },
      addData () {
        let _this = this;
        _this.$refs['baseData'].validate((valid) => {
          if (valid) {
            _this.operateLoading = true;
            let baseDataAdd = {}
            baseDataAdd.startTime = formatDate (_this.baseData.startTime, 'HH:mm:ss')
            baseDataAdd.endTime = formatDate (_this.baseData.endTime, 'HH:mm:ss')
            add(meterbasetimesinfos, 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;
            _this.baseData.startTime = formatDate (_this.baseData.startTime, 'HH:mm:ss')
            _this.baseData.endTime = formatDate (_this.baseData.endTime, 'HH:mm:ss')
            modify(meterbasetimesinfos + _this.baseData.timesNo + '/', _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(meterbasetimesinfos + 'Recovery', _this.multipleSelection, (e) => {
          _this.operateLoading = false;
          if (!e) {
            _this.getDataList();
          }
        });
      },
      abolishData () {
        let _this = this;
        _this.operateLoading = true;
        discard(meterbasetimesinfos + '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(meterbasetimesinfos + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize)
          .then(res => {
            this.dataLoading = false;
            this.table.list = res.data.list;
            if (this.table.list.length > 0) {
                this.$refs.dataTable.setCurrentRow(this.table.list[0])
                this.firstRow = this.table.list[0]
                this.getDataList3(this.firstRow)
            }
            // this.table.list.forEach(item => {item
            //   item.startTime1 = formatDate(item.startTime,'HH:mm:ss')
            //   item.endTime1 = formatDate(item.endTime,'HH:mm:ss')
            // });
            this.page.totalPage = res.data.total;
          }).catch(e => {
            this.dataLoading = false;
          });
      },
      tableRowClassName ({
        row,
        rowIndex
      }) {
        if (row.validFlag !== '1') {
          return 'error-row2';
        }
        return '';
      },
      pageSizeChange2 (size) {
        this.page2.pageSize = size;
        this.getDataList2();
      },

      pageCurrentChange2 (index) {
        this.page2.pageNum = index;
        this.getDataList2();
      },
      getDataList2 () {
        this.dataLoading2 = true;
        this.axios.get(meterbasematterinfos + 'timecorrelation' + '?pageNum=' + this.page2.pageNum + '&pageSize=' + this.page2
            .pageSize + '&validFlag=1')
          .then(res => {
            this.dataLoading2 = false;
            this.table2.list = res.data.list;
            this.page2.totalPage = res.data.total;
          }).catch(e => {
            this.dataLoading2 = false;
          });
      },
      pageSizeChange3 (size) {
        this.page3.pageSize = size;
        this.getDataList3(this.firstRow);
      },

      pageCurrentChange3 (index) {
        this.page3.pageNum = index;
        this.getDataList3(this.firstRow);
      },
      getDataList3 (row) {
        this.dataLoading3 = true;
        this.axios.get(meterbasemattertimess + '?pageNum=' + this.page3.pageNum + '&pageSize=' + this.page3
            .pageSize + '&timesNo=' + row.timesNo)
          .then(res => {
            this.dataLoading3 = false;
            this.table3.list = res.data.list;
            this.page3.totalPage = res.data.total;
          }).catch(e => {
            this.dataLoading3 = false;
          });
      },
      leftClick () {
        if (this.multipleSelection3.length === 0) {
          this.$message.warning('请至少选择一条物料数据');
          return;
        }
        this.operateLoading = true;
        this.axios.put(meterbasemattertimess, this.multipleSelection3, {
            diy: true,
            headers: {
              'Content-type': 'application/json;charset=UTF-8'
            }
          })
          .then(res => {
            this.operateLoading = false;
            this.$message.success('操作成功');
            this.getDataList2();
            this.getDataList3(this.firstRow);
          })
          .catch(e => {
            this.operateLoading = false;
            this.$message.error(e.message)
          })
      },
      rightClick () {
        if (this.multipleSelection.length !== 1) {
          this.$message.warning('请选择一条时间段配置数据');
          return;
        }
        if (this.multipleSelection2.length === 0) {
          this.$message.warning('请至少选择一条物料数据');
          return;
        }
        this.operateLoading = true;
        this.multipleSelection2.forEach(item => {
          item.timesNo = this.multipleSelection[0].timesNo
        })
        // this.multipleSelection2[0].timesNo = this.multipleSelection[0].timesNo
        this.axios.post(meterbasemattertimess, this.multipleSelection2, {
            diy: true,
            headers: {
              'Content-type': 'application/json;charset=UTF-8'
            }
          })
          .then(res => {
              if (res.succeed) {
                this.operateLoading = false;
                this.$message.success('操作成功');
                this.getDataList2();
                this.getDataList3(this.firstRow);
              }  else {
               this.$message.error(res.message)
               this.operateLoading = false;
              }
          })
          .catch(e => {
            this.operateLoading = false;
            this.$message.error(e.message)
          })
      }
    }
  }
</script>

<style scoped>
  .lineDiv:hover{
    cursor:s-resize;
  }
  .el-select {
    width: 100%;
  }
</style>
