<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">班次类型：</span>
        <el-select v-model="dataTypeValue" placeholder="班次类型" size="small" style="width:150px">
          <el-option
            label="白班"
            value="1"/>
          <el-option
            label="夜班"
            value="2"/>
        </el-select>
        <span style="margin-left: 10px">时间：</span>
        <el-date-picker
          v-model="dateTime"
          size="small"
          type="month"
          align="center"
          value-format="yyyy-MM"
          format="yyyy-MM"
          placeholder="选择月"
          @change="searchTable"
        />
        <el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 5px" @click="searchTable()">查询</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
        size="mini"
        height="740"
        center
        :expand-row-keys="expandsDetail"
        :row-key="getRowKeys"
        @expand-change="selectPlan"
        style="width: 100%">
        <el-table-column width="80" label="序号" type="index" align="center"/>
        <el-table-column label="日期" align="center">
          <template slot-scope="scope">
            {{ scope.row.日期 }}
          </template>
        </el-table-column>
        <el-table-column label="总时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.总时间 }}
          </template>
        </el-table-column>
        <el-table-column label="早会" align="center">
          <template slot-scope="scope">
            {{ scope.row.早会 }}
          </template>
        </el-table-column>
        <el-table-column label="间休" align="center">
          <template slot-scope="scope">
            {{ scope.row.间休 }}
          </template>
        </el-table-column>
        <el-table-column label="午餐" align="center">
          <template slot-scope="scope">
            {{ scope.row.午餐 }}
          </template>
        </el-table-column>
        <el-table-column label="晚餐" align="center">
          <template slot-scope="scope">
            {{ scope.row.晚餐 }}
          </template>
        </el-table-column>
        <el-table-column label="负荷时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.负荷时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)">修改</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--编辑订单弹窗-->
    <el-dialog :visible.sync="updateStopTimeVisible" title="非计划停机修改" center style="min-height: 200px" width="400px">
      <el-form label-position="right" label-width="110px">
        <el-form-item label="总时间" prop="orderNumber" style="display: inline-block">
          <el-input v-model="stopTimeForm.CountTime" size="small" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="早会" prop="engineTypeValue" style="display: inline-block">
          <el-input v-model="stopTimeForm.HeardTime" size="small" placeholder="产品型号" />
        </el-form-item>
        <el-form-item label="间休" prop="partCode" style="display: inline-block">
          <el-input v-model="stopTimeForm.PlaytimeBreak" size="small" placeholder="总成号" />
        </el-form-item>
        <el-form-item label="午餐" prop="partCode" style="display: inline-block">
          <el-input v-model="stopTimeForm.LunchTime" size="small" placeholder="总成号" />
        </el-form-item>
        <el-form-item label="晚餐" prop="partCode" style="display: inline-block">
          <el-input v-model="stopTimeForm.FinishTime" size="small" placeholder="总成号" />
        </el-form-item>
        <el-form-item label="负荷时间" prop="partCode" style="display: inline-block">
          <el-input v-model="stopTimeForm.WorkTime" size="small" placeholder="总成号" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="updateStopTimeVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="updateStopTimeSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      expands: [],
      expandsDetail: [],
      dataType: [], // 日志类型数组
      dataTypeValue: '1', // 班次类型
      valueType: [],
      valueTypeValue: '',
      alarmType: [],
      alarmTypeValue: '',
      dateTime: '', // 时间
      passTableData:[],
      updateStopTimeVisible:false,
      stopTimeForm:{
        ID:'',
        CountTime:0,
        HeardTime:0,
        PlaytimeBreak:0,
        LunchTime:0,
        FinishTime:0,
        WorkTime:0
      }
    }
  },
  created() {
    var year, month, day, audiTime
    this.date = new Date() // 修改数据date
    year = new Date().getFullYear()
    month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
    day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
    audiTime = year + '-' + month
    console.log(audiTime, 'audiTime')
    this.dateTime = audiTime
    this.searchTable()
  },
  methods: {
    // 控制展开列
    selectPlan(row, expandedRows) {
      if (expandedRows.length) {
        this.expandsDetail = []
        if (row) {
          this.passTableData = []
          var param = []
          param[0] = ['工位号', row.工位号]
          param[1] = ['日期', row.日期]
          var Data = this.CreateData('11', '测量数据发动机在线状态_工位数据_日期_查询', param)
          this.ExecDatabase(Data).then(response => {
            console.log(response.data)
            if (response.data.length !== 0) {
              this.passTableData = response.data
            }
            this.expandsDetail.push(row.工位号)
          })
        }
      } else {
        this.expandsDetail = []
      }
    },
    // 获取展开列的工单号
    getRowKeys(row) {
      return row.工位号
    },
    // 修改订单
    handleEdit(row) {
      this.stopTimeForm.ID = row.ID
      this.stopTimeForm.HeardTime = row.早会
      this.stopTimeForm.PlaytimeBreak = row.间休
      this.stopTimeForm.LunchTime = row.午餐
      this.stopTimeForm.FinishTime = row.晚餐
      this.stopTimeForm.CountTime = row.总时间
      this.stopTimeForm.WorkTime = row.负荷时间
      // 显示修改窗口
      this.updateStopTimeVisible = true
    },
    searchTable() {
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['date', this.dateTime]
      param[1] = ['班次代码', this.dataTypeValue]
      var Data = this.CreateData('11', '北汽福田_计划停机时间表_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.loading = false
        if (response.data.length !== 0) {
          this.tableData = response.data
        }
      })
    },
    // 提交修改内容
    updateStopTimeSubmit(){
      var param = []
      param[0] = ['ID', this.stopTimeForm.ID]
      param[1] = ['早会', this.stopTimeForm.HeardTime]
      param[2] = ['间休', this.stopTimeForm.PlaytimeBreak]
      param[3] = ['午餐', this.stopTimeForm.LunchTime]
      param[4] = ['晚餐', this.stopTimeForm.FinishTime]
      param[5] = ['总时间', this.stopTimeForm.CountTime]
      param[6] = ['负荷时间', this.stopTimeForm.WorkTime]
      var Data = this.CreateData('12', '北汽福田_计划停机时间表_修改', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result == 1) {
          this.$message.success("修改成功！")
          this.searchTable()
          this.updateStopTimeVisible = false
        }else{
          this.$message.error("修改失败！")
        }
      })
    }
  }
}
</script>

<style scoped>
.topDiv{
  margin-bottom: 10px;
}
</style>
