<template>
    <el-container>
      <el-header>
            <div class="left-panel">
              <div style="margin-right: 20px">交接班日志</div>
              <el-date-picker
                    v-model="query.time"
                    type="date"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    placeholder="日志时间"
                />
              <el-select
                  v-model="query.shift"
                  placeholder="班次"
                  clearable
                  style="margin-left: 2px; width: 120px"
              >
                  <el-option
                      v-for="item in optionsShift"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  ></el-option>
              </el-select>
              <el-select
                  v-model="query.team"
                  placeholder="班组"
                  clearable
                  style="margin-left: 2px; width: 120px"
              >
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  ></el-option>
              </el-select>
              <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="handleQuery"
              ></el-button>
            </div>
          </el-header>
          <el-main class="nopadding">
            <scTable
              ref="table"
              :apiObj="apiObj"
              row-key="id"
              stripe
              :params="query"
              highlightCurrentRow
              @row-click="rowClick"
            >
                <el-table-column type="index" width="50"/>
                <!-- <el-table-column label="关联工段" prop="mgroup_name"></el-table-column> -->
                <el-table-column label="开始时间" prop="start_time">
                    <template #default="scope">
                        <span>{{ scope.row.start_time.slice(0,16)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="结束时间" prop="end_time">
                    <template #default="scope">
                        <span>{{ scope.row.end_time.slice(0,16)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="班组名称" prop="team_name"></el-table-column>
                <el-table-column label="当前班次" prop="shift_name"></el-table-column>
                <el-table-column label="班长" prop="leader_name"></el-table-column>
                
                <el-table-column label="检验时间">
                    <template #default="scope">
                        <span v-if="scope.row.last_test_time">{{ scope.row.last_test_time.slice(0,16)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="100">
                  <template #default="scope">
                    <el-button link size="small" @click="sflog_edit(scope.row)" type="primary">编辑</el-button>
                    <!-- <el-button link size="small" @click="sflog_check(scope.row)" type="primary">质量检验</el-button> -->
                    <!-- <el-button link size="small" @click="sflog_other(scope.row)" type="primary">其他能源</el-button> -->
                    <el-button link size="small" @click="sflog_export(scope.row)" type="success">报表</el-button>
                  </template>
                </el-table-column>
            </scTable>
          </el-main>
      <el-drawer v-model="limitedExport" size="60%" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
          <h4 :id="titleId" :class="titleClass">交接班日志</h4>
          <el-button type="danger" @click="close">
            <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
            关闭
          </el-button>
        </template>
        <el-main class="nopadding">
            <div ref="print" id="myReport" class="printContainer">
              <div style="margin-right: 20px;text-align: center;font-size: 16px;font-weight: bold;margin-bottom: 20px;">
                <span v-if="sflogItem.end_time">{{sflogItem.end_time.slice(0,10)}}{{ sflogItem.shift_name }}</span>
                <span v-if="sflogItem.team_name">{{ sflogItem.team_name }}</span>
                交接班记录
              </div>
              <h3 style="text-align: center;display: flex;justify-content: space-around;">
                  <span>2023.06.21</span>
                  <span>白班</span>
                  <span>甲班</span>    
              </h3>
              <table border="1" width="1000" cellspacing="0" :key="timeStamp" id="myTable">
                  <tbody>
                      <tr>
                          <td class="numCell">产量（t）</td>
                          <td class="numCell">{{value1}}</td>
                          <td class="numCell">单位产品分布电耗（KW·h/t）</td>
                          <td class="numCell">{{value3}}</td>
                      </tr>
                      <tr>
                          <td class="numCell">生产情况记录</td>
                          <td class="numCell" colspan="5">时间、类别、原因、处置措施、处置人</td>
                      </tr>
                  </tbody>
              </table>
            </div>
        </el-main>
      </el-drawer>
    </el-container>
    <save-dialog
      v-if="dialog.save"
      ref="saveDialog"
      @success="handleSaveSuccess"
      @closed="dialog.save = false"
    ></save-dialog>
  </template>
  <script>
import saveDialog from "./handover_form.vue";
  export default {
    name: "listSon",
    components: {
        saveDialog,
    },
    data() {
      return {
        apiObj: this.$API.wpm.sflog.list,
        apiObj2: null,
        query: {
          mgroup:'3346491835287007232',
        },
        query2: {},
        dialog: {
          save: false,
        },
        sflogItem:{},
        selection: [],
        value1:1,
        value3:3,
        value5:5,
        modelValue:true,
        showClose:true,
        echartType:'line',
        asynDialog:false,
        options:[],
        optionsShift:[],
        limitedExport:false,
      };
    },
   
    methods: {
      sflog_export(){
        this.limitedExport = true;
      },
      rowClick(row) {
        this.sflogId = row.id;
        this.sflogItem = row;
      },
      //编辑
      sflog_edit(row) {
        this.dialog.save = true;
        this.$nextTick(() => {
            this.$refs.saveDialog.open("edit").setData(row);
        });
      },
     
      //删除
      async table_del(row) {
        this.$API.wpm.sflog.delete.req(row.id)
          .then((res) => {
            this.$message.success("删除成功");
            return res;
          })
          .catch((err) => {
            return err;
          });
      },
      //新增岗位后更新数据
      handleSaveSuccess(data, mode) {
        this.$refs.table.refresh()
        this.dialog.save = false;
      },
      handleOtherSuccess(){
        this.dialog.other = false;
      },
      handleCheckSuccess(){
        this.dialog.check = false;
      },
      closed() {
        this.dialog.save = false;
        this.$refs.table2.refresh();
      },
      handleDel(row) {
        this.$confirm(`确定删除选中的记录吗？`, "提示", {
          type: "warning",
        }).then(() => {
            this.$API.wpm.shift.delete.req(row.id).then((res) => {
              if (res.err_msg) {
                this.$message.error(res.err_msg);
              } else {
                // const loading = this.$loading();
                // this.$refs.table2.refresh();
                // loading.close();
                // this.$message.success("操作成功");
              }
            });
          })
          .catch(() => {});
      },
      handlePrint() {
          this.$PRINT('#myReport');
      },
      exportExcel() {
          this.exportLoading = true;
          this.$XLSX('#myTable', this.tableName)
          this.exportLoading = false;
      },
    },
  };
  </script>
  
  <style scoped>
  .printContainer{
        width: 1075px;
    }
    #numTable{
        margin-left: 37px;
    }
    #numTable td{
        height: 32px;
        padding-left: 5px;
    }
    .numCell{
        width: 80px;
    }
    .numCell.numCell_last{
        width: 100px;
    }
    .searchHead{
        display:flex
    }
    .middleText{
        height: 32px;
        line-height: 32px;
        margin: 0 5px;
        display: inline-block;
    }
    .searchBtn{
        margin-left: 5px;
    }
  </style>
  