<template>
  <!-- 工作循环 -->
  <vue-scroll style="height: 100%">
    <div class="alarmInfo">
      <div class="title whiteBlock">
        <el-form :inline="true" size="medium" class="demo-form-inline">
          <!-- <el-form-item label="设备编号">
            <el-input
              v-model="formInline.user"
              placeholder="请输入设备编号"
            ></el-input>
          </el-form-item>-->
          <el-form-item :label="$t('message.lifter.devName')">
            <el-select
              v-model="devSn"
              :placeholder="
                $t('message.lifter.pleaseSelect') + $t('message.lifter.devName')
              "
              clearable
            >
              <el-option
                :label="item.devName"
                :value="item.devSn"
                v-for="(item, index) in towerList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              class="serarch_picker"
              size="medium"
              v-model="value1"
              @change="selectTime"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('message.lifter.startDate')"
              :end-placeholder="$t('message.lifter.deadline')"
            ></el-date-picker>
          </el-form-item>
          <!-- <el-form-item :label="$t('message.lifter.alarmTime')">
            <el-date-picker
              v-model="time"
              type="daterange"
              value-format="yyyy-MM-dd"
              :range-separator="$t('message.lifter.to')"
              :start-placeholder="$t('message.lifter.startDate')"
              :end-placeholder="$t('message.lifter.deadline')"
            >
            </el-date-picker>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" @click="getGantryCraneAlarmList" plain>
              {{
              $t("message.lifter.demand")
              }}
            </el-button>
            <el-button type="warning" plain @click="refresh">
              {{
              $t("message.lifter.refresh")
              }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content whiteBlock">
        <el-table :data="tableData" class="tables" style="width: 100%" height="600px">
          <el-table-column align="center" prop="devName" :label="$t('message.lifter.devName')"></el-table-column>
          <el-table-column
            align="center"
            width="180px"
            prop="devSn"
            :label="$t('message.lifter.devNumber')"
          ></el-table-column>
          <!-- 龙门吊报警时间 -->
          <el-table-column align="center" width="180px" prop="startTime" label="工作循环开始时间">
            <template slot-scope="scope">{{transformTimestamp(scope.row.startTime) }}</template>
          </el-table-column>
          <el-table-column align="center" width="180px" prop="endTime" label="工作循环结束时间">
            <template slot-scope="scope">{{transformTimestamp(scope.row.endTime) }}</template>
          </el-table-column>
          <el-table-column align="center" prop="maxWindSpeed" label="最大风速(m/s)"></el-table-column>
          <el-table-column align="center" prop="maxMainWeight" label="最大主钩吊重(t)"></el-table-column>
          <el-table-column align="center" prop="maxAuxiliaryWeight" label="最大副钩吊重(t)"></el-table-column>
        </el-table>
        <el-pagination
          class="pagerBox"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(total)"
          background
        ></el-pagination>
      </div>
      <!--      <el-dialog-->
      <!--              :modal-append-to-body="false"-->
      <!--              title="新增维保信息"-->
      <!--              :visible.sync="dialogVisible"-->
      <!--              :before-close="handleClose"-->
      <!--              width="667px"-->
      <!--      >-->
      <!--        <div class="dialog_content">-->
      <!--          <el-form-->
      <!--                  :model="maintenanceForm"-->
      <!--                  ref="maintenanceForm"-->
      <!--                  label-width="120px"-->
      <!--                  class="demo-ruleForm"-->
      <!--                  :rules="rules" size="medium"-->
      <!--          >-->
      <!--            <el-form-item label="维保设备" prop="devSn">-->
      <!--              <el-select-->
      <!--                      v-model="maintenanceForm.devSn"-->
      <!--                      :placeholder="-->
      <!--                  $t('message.lifter.pleaseSelect') +-->
      <!--                  $t('message.lifter.devName')-->
      <!--                "-->
      <!--                      style="width: 100%"-->
      <!--              >-->
      <!--                <el-option-->
      <!--                        :label="item.devName"-->
      <!--                        clearable-->
      <!--                        :value="item.devSn"-->
      <!--                        v-for="(item, index) in towerList"-->
      <!--                        :key="index"-->
      <!--                        style="width: 100%"-->
      <!--                ></el-option>-->
      <!--              </el-select>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="维保后状态" prop="maintenanceStatus">-->
      <!--              <el-select-->
      <!--                      v-model="maintenanceForm.maintenanceStatus"-->
      <!--                      :placeholder="-->
      <!--                  $t('message.lifter.pleaseSelect') +-->
      <!--                  $t('message.lifter.devName')-->
      <!--                "-->
      <!--                      style="width: 100%"-->
      <!--              >-->
      <!--                <el-option label="正常" :value="1"></el-option>-->
      <!--                <el-option label="不正常" :value="0"></el-option>-->
      <!--              </el-select>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="维保时间" prop="maintenanceTime">-->
      <!--              <el-date-picker-->
      <!--                      value-format="yyyy-MM-dd HH:mm:ss"-->
      <!--                      v-model="maintenanceForm.maintenanceTime"-->
      <!--                      type="datetime"-->
      <!--                      placeholder="选择日期时间"-->
      <!--                      style="width: 100%"-->
      <!--              >-->
      <!--              </el-date-picker>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="维保人" prop="personLiable">-->
      <!--              <el-input-->
      <!--                      v-model="maintenanceForm.personLiable"-->
      <!--                      placeholder="请输入"-->
      <!--              ></el-input>-->
      <!--              &lt;!&ndash; <el-select-->
      <!--                v-model="maintenanceForm.personLiable"-->
      <!--                :placeholder="-->
      <!--                  $t('message.lifter.pleaseSelect') +-->
      <!--                  $t('message.lifter.devName')-->
      <!--                "-->
      <!--                style="width: 100%"-->
      <!--              >-->
      <!--                <el-option-->
      <!--                  :label="item.workerName"-->
      <!--                  :value="item.id"-->
      <!--                  v-for="(item, index) in managementInfoList"-->
      <!--                  :key="index"-->
      <!--                ></el-option>-->
      <!--              </el-select> &ndash;&gt;-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="维保单位" prop="maintenanceUnit">-->
      <!--              <el-input-->
      <!--                      v-model="maintenanceForm.maintenanceUnit"-->
      <!--                      placeholder="请输入"-->
      <!--              ></el-input>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="描述" prop="remark">-->
      <!--              <el-input-->
      <!--                      v-model="maintenanceForm.remark"-->
      <!--                      placeholder="请输入"-->
      <!--              ></el-input>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="上传图片" prop="maintenanceImage">-->
      <!--              <el-upload-->
      <!--                      :action="uploadUrl"-->
      <!--                      list-type="picture-card"-->
      <!--                      name="files"-->
      <!--                      :show-file-list="false"-->
      <!--                      :on-success="handleAvatarSuccess"-->
      <!--              >-->
      <!--                <img-->
      <!--                        v-if="maintenanceForm.maintenanceImage"-->
      <!--                        :src="fileUrl + maintenanceForm.maintenanceImage"-->
      <!--                        style="width: 100%; height: 100%"-->
      <!--                />-->
      <!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
      <!--              </el-upload>-->
      <!--            </el-form-item>-->
      <!--          </el-form>-->
      <!--          <span slot="footer" class="dialog-footer">-->
      <!--            <el-button @click="dialogVisible = false" size="medium">取 消</el-button>-->
      <!--            <el-button type="primary" @click="saveBtn" size="medium">确 定</el-button>-->
      <!--          </span>-->
      <!--        </div>-->
      <!--      </el-dialog>-->
    </div>
  </vue-scroll>
</template>
<script>
import {
  getGantryCranelistApi,
  getGantryCraneAlarmListApi,
  getManagementInfoListApi,
  addMaintenanceRecordApi
} from "@/assets/js/api/gantryCrane";
import { getWorkerPageApi } from "@/assets/js/api/projectLevel/trackCrane.js";
import { getCranelistApi } from "@/assets/js/api/projectLevel/callData.js";

export default {
  data() {
    return {
      projectSn: "",
      towerList: [],
      devSn: "",
      time: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      uploadUrl: "",
      fileUrl: "",
      dialogVisible: false,
      managementInfoList: [],
      maintenanceForm: {
        devSn: "",
        devType: 3,
        maintenanceTime: "",
        maintenanceStatus: "",
        personLiable: "",
        maintenanceUnit: "",
        remark: "",
        maintenanceImage: ""
      },
      value1: "" //开始结束时间
    };
  },

  created() {
    this.projectSn = this.$store.state.projectSn;
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    console.log(this.$store.state.FILEURL);
    this.getTowerList();
    this.getGantryCraneAlarmList();
  },
  computed: {
    transformTimestamp() {
      return function(timestamp) {
        if (timestamp) {
          let a = new Date(timestamp).getTime();
          const date = new Date(a);
          const Y = date.getFullYear() + "-";
          const M =
            (date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1) + "-";
          const D =
            (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
            "  ";
          const h =
            (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
            ":";
          const m =
            (date.getMinutes() < 10
              ? "0" + date.getMinutes()
              : date.getMinutes()) + ":";
          const s = date.getSeconds(); // 秒
          const dateString = Y + M + D + h + m + s;
          return dateString;
        }
      };
    }
  },
  methods: {
    //监听时间选择
    selectTime(val) {
      // console.log(this.transformTimestamp(this.value1[0]));
      // console.log(val);
      // console.log(this.value1);
    },
    //获取设备下拉
    getTowerList() {
      let data = {
        projectSn: this.projectSn
      };
      getCranelistApi(data).then(res => {
        if (res.code == 200) {
          this.towerList = res.result;
        }
      });
    },

    //获取报警数据列表
    getGantryCraneAlarmList() {
      let data = {
        projectSn: this.projectSn,
        devSn: this.devSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        reportTime_begin: !this.value1
          ? undefined
          : this.transformTimestamp(this.value1[0]),
        reportTime_end: !this.value1
          ? undefined
          : this.transformTimestamp(this.value1[1])
      };
      getWorkerPageApi(data).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.tableData = res.result.records;
          this.total = res.result.total;
        }
      });
    },

    //刷新
    refresh() {
      this.devSn = "";
      this.pageNo = 1;
      this.pageSize = 10;
      this.value1 = "";
      this.getGantryCraneAlarmList();
    },
    // //关闭弹窗前
    // handleClose() {
    //   this.dialogVisible = false;
    // },
    // 文件上传成功
    // handleAvatarSuccess(file) {
    //   if (file.data.length > 0) {
    //     this.maintenanceForm.maintenanceImage = file.data[0].imageUrl;
    //   }
    // },

    //获取维保人
    // getManagementInfoList() {
    //   let data = {
    //     projectSn: this.projectSn,
    //   };
    //   getManagementInfoListApi(data).then((res) => {
    //     if (res.code == 200) {
    //       this.managementInfoList = res.result;
    //     }
    //   });
    // },

    // //保存按钮
    // saveBtn() {
    //   this.$refs["maintenanceForm"].validate((valid) => {
    //     if (valid) {
    //       let data = this.maintenanceForm;
    //       data.projectSn = this.projectSn;
    //       addMaintenanceRecordApi(data).then((res) => {
    //         if (res.code == 200) {
    //           this.dialogVisible = false;
    //           this.getMaintenanceList();
    //         }
    //       });
    //     } else {
    //       return false;
    //     }
    //   });
    // },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getGantryCraneAlarmList();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getGantryCraneAlarmList();
    }
  }
};
</script>

<style lang="less" scoped>
.alarmInfo {
  width: 100%;
  height: 100%;
  .title {
    // background-color: #ffffff;
    padding: 0 20px;
    padding-top: 17px;
    height: 70px;
    box-sizing: border-box;
  }
  .content {
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 720px;
    // background-color: #ffffff;
  }
}
.demo-ruleForm {
  width: 90%;
}
.dialog_content {
  margin: 0 20px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
