<template>
  <!-- 万州港装船作业报表 -->
  <div class="control" style="width:100%;">
    <div style="height:100%;width:100%">
      <div class="search" style="display:flex;margin: 10px;">
        <el-date-picker
        v-model="month"
        type="month"
        placeholder="选择月"
        style="margin: 10px;"
        @change="search">
        </el-date-picker>
      </div>

      <!-- 装车出库详情 -->
      <div ref="controlData" style="width:100%;height:500px;float:left;margin-left:5px">
        <div class="loadTable" style="height:500px;width:100%;overflow:scroll;">
             <el-table
          ref="controlTable"
          highlight-current-row
          border
          fit
          :data="controlTable"
          :row-style="{height:'40px'}"
          style="width: 100%;font-size: 18px">
          <el-table-column
          align="center"
            prop="lineDate"
            label="日期">
          </el-table-column>
          <el-table-column
          align="center"
            prop="up"
            label="上行等闸数量">
            <template slot-scope="scope">
                  <el-input type="number" v-model="scope.row.up" @change="update(scope.row)"></el-input>
            </template>
          </el-table-column>
           <el-table-column
          align="center"
            prop="down"
            label="下行等闸数量">
            <template slot-scope="scope">
                  <el-input type="number" v-model="scope.row.down" @change="update(scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column
          align="center"
            prop="count"
            label="等闸总量">
          </el-table-column>
        </el-table>
        </div >
      </div>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime } from "@/utils/sharedJsFile";
import {getCookie} from "@/utils/util.js";
import FileSaver from "file-saver";
import BigNumber from "bignumber.js";
export default {
  components: { PageTitle },
  data() {
    return {
        month:new Date(),
        controlTable:[]
    };
  },
  mounted(){
    this.search();
  },
  watch: {
    controlTable: {
      handler(newVal) {
        this.computedTableData();
      },
      deep: true,
      immediate: false
    },
  },
  methods: {
    search(){
        let year=this.month.getFullYear();
        let month=this.month.getMonth()+1;
        console.log("year:",year);
        console.log("month:",month);
        let map={
            year:year,
            month:month
        }
        this.axios.post("/api/v1/tms/getControlLines",map).then((res)=>{
            this.controlTable=res.data.data;
        });
    },
    computedTableData(){
        this.controlTable.forEach((item, index) => {
            item.count=parseInt(item.up)+parseInt(item.down);
        });
    },
    update(row){
        if(row.up==''){
          row.up=0
        }
        if(row.down==''){
          row.down=0
        }
        this.axios.post("/api/v1/tms/updateControlLine",row).then((res)=>{
            this.$message.success("修改成功");
        });
    }
  },
};
</script>
<style lang='scss'>

</style>

