<template>
  <div class="app-container">
    <el-card>
      <el-date-picker
        v-model="startTime"
        value-format="yyyy-MM-dd"
        size="small"
        style="width: 170px;margin:0px 10px"
        type="date"
        placeholder="选择开始加工日期"/>
      <span class="demonstration">~</span>
      <el-date-picker
        v-model="endTime"
        value-format="yyyy-MM-dd"
        size="small"
        style="width: 170px;margin:0px 10px"
        type="date"
        placeholder="选择加工完成日期"/>
      <el-button type="primary" class="el-icon-search" size="small" plain style="margin:0px 10px" @click="pageCurrent=1;total = 0;searchTable();">查询</el-button>
    </el-card>
    <el-row>
      <el-col :span="7">
        <el-card>
          <el-table v-loading="loading" :data="tableData" highlight-current-row size="mini" stripe style="width: 100%;" height="700px" border element-loading-text="拼命加载中" @row-click="searchTable2">
            <el-table-column label="操作者" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.操作工 }}
              </template>
            </el-table-column>
            <el-table-column label="完成数量" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.总数量 }}
              </template>
            </el-table-column>
            <el-table-column label="加工工时(分)" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.完成总工时 }}
              </template>
            </el-table-column>
            <!--<el-table-column label="录入准结" align="center" width="70px">-->
            <!--<template slot-scope="scope">-->
            <!--{{ scope.row.修补准结总工时 }}-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column label="扫码工时(分)" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.扫码总工时 }}
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination
              v-if="!loading"
              :current-page="pageCurrent"
              :page-size="pageSize"
              :total="total"
              layout="total"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card>
          <el-table v-loading="loading2" :data="tableData2" size="mini" style="width: 100%;" height="700px" border element-loading-text="拼命加载中">
            <el-table-column label="零件图号" align="center" width="150px" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <el-table-column label="零件名称" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column label="工艺名称" align="center" width="80px" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.工艺名称 }}
              </template>
            </el-table-column>
            <el-table-column label="完成数量" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.完成数量 }}
              </template>
            </el-table-column>
            <!--<el-table-column label="计划工时(分)" align="center" width="70px">-->
            <!--<template slot-scope="scope">-->
            <!--{{ scope.row.计划工时 }}-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column label="单件工时(分)" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.修补单件工时 }}
              </template>
            </el-table-column>
            <el-table-column label="加工工时(分)" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.完成工时 }}
              </template>
            </el-table-column>
            <el-table-column label="录入准结" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.修补工时 }}
              </template>
            </el-table-column>
            <el-table-column label="扫码工时(分)" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.扫码工时 }}
              </template>
            </el-table-column>
            <el-table-column label="完成日期" align="center" width="115px">
              <template slot-scope="scope">
                {{ scope.row.完成日期 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" fixed="right" width="90px">
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination
              v-if="!loading2"
              :current-page="pageCurrent2"
              :page-size="pageSize2"
              :total="total2"
              layout="total"
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"/>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-el-drag-dialog :visible.sync="dialogVisible1" :close-on-click-modal="false" class="dialog3" title="编辑" center width="500px">
      <el-form ref="form1" :model="form1" label-position="right" label-width="160px">
        <el-form-item label="零件图号：">
          <span style="font-size: 20px">{{ partNumber }}</span>
        </el-form-item>
        <el-form-item label="零件名称：">
          <span style="font-size: 20px">{{ partName }}</span>
        </el-form-item>
        <el-form-item label="工艺名称：">
          <span style="font-size: 20px">{{ procedure }}</span>
        </el-form-item>
        <el-form-item label="完成数量：" prop="完成数量">
          <el-input-number :min="0" :max="剩余数量" v-model="form1.完成数量" style="width: 200px" @change="timeChange()"/>
        </el-form-item>
        <el-form-item label="单件工时(分)：" prop="录入工时">
          <el-input-number :min="0" v-model="form1.录入工时" style="width: 200px" @change="timeChange()"/>
          <!--<el-input class="editWorkTime" v-positive="'float'" v-model="form1.录入工时" placeholder="录入工时" style="width:200px;" type="number"/>-->
        </el-form-item>
        <el-form-item label="录入准结(分)：" prop="录入准结">
          <el-input-number :min="0" v-model="form1.录入准结" style="width: 200px"/>
          <!--<el-input class="editWorkTime" v-positive="'float'" v-model="form1.录入准结" placeholder="录入准结" style="width:200px;" type="number"/>-->
        </el-form-item>
        <el-form-item label="加工工时(分)：" prop="加工时间">
          <span style="font-size: 20px">{{ 加工时间 }}</span>
        </el-form-item>
        <el-form-item v-show="false" label="备注：" prop="备注">
          <el-input v-model="form1.备注" :rows="4" type="textarea" placeholder="备注" clearable size="small" style="width:200px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="callOff1('form1')">取消</el-button>
        <el-button type="primary" @click="submit1('form1')" >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchtable, searchtable2 } from '@/api/ManufacturingCenter/ScheduleCompletionDetails'
import { getNowShotTime } from '@/utils/tool'
export default {
  data() {
    return {
      startTime: getNowShotTime(), // 开始时间
      endTime: getNowShotTime(), // 结束时间
      tableData: [], // 操作者工时统计
      loading: false,
      tableData2: [], // 工序统计表
      loading2: false,
      partNumber: '',
      partName: '',
      procedure: '',
      pageCurrent: 1,
      pageSize: 10000,
      total: 0,
      pageCurrent2: 1,
      pageSize2: 10000,
      total2: 0,
      timeCheck: '',
      operater: '',
      row: [],
      dialogVisible1: false,
      form1: {
        完成数量: '',
        录入工时: '',
        录入准结: '',
        备注: ''
      },
      加工时间: 0,
      剩余数量: 0
    }
  },
  created() {
    this.searchTable()
  },
  methods: {
    // 查询表格数据
    searchTable() {
      this.loading = true
      this.tableData = []
      this.tableData2 = []
      this.total2 = 0
      var STime = ''
      var ETime = ''
      STime = this.startTime + ' 00:00:00'
      ETime = this.endTime + ' 23:59:59'
      searchtable(STime, ETime, this.pageCurrent, this.pageSize).then(response => {
        if (response.data.total === 0) {
          this.loading = false
        } else {
          this.total = response.data.total
          this.tableData = response.data.rows
        }
      }).then(() => {
        this.loading = false
      })
    },
    // 获取工序表
    searchTable2(row) {
      this.loading2 = true
      this.row = row
      this.tableData2 = []
      this.pageCurrent2 = 1
      var STime = ''
      var ETime = ''
      STime = this.startTime + ' 00:00:00'
      ETime = this.endTime + ' 23:59:59'
      searchtable2(row.人员编号, STime, ETime, this.pageCurrent2, this.pageSize2).then(response => {
        if (response.data.rows.length !== 0) {
          this.tableData2 = response.data.rows
        }
        this.loading2 = false
        this.total2 = response.data.total
      })
    },
    handleEdit(row) {
      var param = []
      param[0] = ['工序流水号', row.工序流水号]
      param[1] = ['完成过程流水号', row.完成过程流水号]
      var Data1 = this.CreateData('11', 'MES_机加工MES_修改完成工时数量查询', param)
      this.ExecDatabase(Data1).then(response => {
        this.剩余数量 = response.data[0].剩余数量
        this.完成过程流水号 = row.完成过程流水号
        this.工序流水号 = row.工序流水号
        this.完成数量_原 = row.完成数量
        this.form1.录入工时 = row.修补单件工时
        this.form1.录入准结 = row.修补工时
        this.form1.备注 = row.备注
        this.加工时间 = this.form1.录入工时
        this.form1.完成数量 = row.完成数量
        this.procedure = row.工艺名称
        this.partName = row.零件名称
        this.partNumber = row.零件图号
        this.timeChange()
        this.dialogVisible1 = true
      })
    },
    callOff1() {
      this.dialogVisible1 = false
    },
    timeChange() {
      if (this.form1.完成数量 > 0) {
        this.加工时间 = this.form1.录入工时 * this.form1.完成数量
      } else {
        this.加工时间 = this.form1.录入工时
      }
    },
    submit1() {
      this.工位号 = this.$route.query.OPNAME
      var param = []
      param[0] = ['工序流水号', this.工序流水号]
      param[1] = ['完成过程流水号', this.完成过程流水号]
      param[2] = ['完成数量', this.form1.完成数量]
      param[3] = ['完成数量_原', this.完成数量_原]
      param[4] = ['录入工时', this.form1.录入工时]
      param[5] = ['录入准结', this.form1.录入准结]
      param[6] = ['备注', this.form1.备注]
      var Data1 = this.CreateData('11', 'MES_机加工MES_编辑备注_Vue_New', param)
      this.ExecDatabase(Data1).then(response => {
        if (response.data[0].result === 1) {
          console.log('成功，数量减少   1')
        } else if (response.data[0].result === 2) {
          console.log('失败，工序状态已为4，不能继续增加   2')
          this.$message.error('此工序已经全部完成，不能继续增加数量！')
        } else if (response.data[0].result === 3) {
          console.log('失败，剩余数量不足   3')
          this.$message.error('检测到数量变化，请重新修改完成数量！')
        } else if (response.data[0].result === 4) {
          console.log('成功，数量增加，增加后工序状态完成   4')
        } else if (response.data[0].result === 5) {
          console.log('成功，数量增加，增加后工序状态仍未完成   5')
        } else if (response.data[0].result === 6) {
          console.log('成功，未修改数量   6')
        }
        this.searchTable2(this.row)
        this.dialogVisible1 = false
      })
    },
    handleSizeChange2(val) {
      this.pageCurrent2 = 1
      this.pageSize2 = val
      this.searchTable2()
    },
    handleCurrentChange2(val) {
      this.pageCurrent2 = val
      this.searchTable2()
    }
  }
}
</script>

<style scoped>
  .el-form--label-left >>> .el-form-item__label {
    text-align: right;
  }
  >>>.el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 20px 30px 20px
  }
  >>>.el-dialog__header {
    padding: 20px 20px 0px;
  }
  >>>.el-dialog__footer {
    padding: 0px 20px 20px;
    /*text-align: right;*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  >>>.el-form-item {
    margin-bottom: 13px;
  }
</style>
