<template>
  <div class="charge-box">
    <div class="charge-tools">
      <el-form :inline="true" :model="queryParams">
        <el-form-item label="日志范围：" style="margin-left: 35px">
          <el-select
            multiple
            v-model="robotValue"
            clearable
            placeholder="请选择"
            @change="changeSelect"
            collapse-tags
            @remove-tag="removeTag"
          >
            <el-option
              label="全选"
              value="全选"
              @click.native="selectAll"
            ></el-option>
            <el-option
              v-for="item in logOptions"
              :key="item.alarmCode"
              :label="item.alarmName"
              :value="item.alarmCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="时间范围:" style="margin-left: 50px">
          <el-date-picker
            v-model="dateTime"
            class="times"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="serch actve" @click="handleQuery"
            >查询</el-button
          >
          <el-button type="primary" class="serch" @click="resetForm"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="charge-table">
      <div class="charge-table-top">
        <el-button type="primary" class="daochu" @click="chargeExport"
          >导出结果</el-button
        >
      </div>
      <div class="charge-table-bottom">
        <el-table
          :data="datalist"
          :header-cell-style="{
            background: '#1d283e',
            borderColor: '#2f3c86',
            height: '36px',
            lineHeight: '36px',
            color: 'white',
            fontSize: '15px',
          }"
          stripe
          :height="tableheight"
          v-loading="loading"
          ref="tblist"
          style="width: 100%"
        >
          <el-table-column
            v-if="logOptions.length > 0"
            prop="time"
            label="发生时间"
            fixed="left"
            width="180"
          >
          </el-table-column>
          <af-table-column
            v-for="log in logheader"
            :key="log.alarmCode"
            :label="log.alarmName"
            :render-header="labelHead"
          >
            <template slot-scope="scope">
              {{ scope.row[log.alarmId] }}
            </template>
          </af-table-column>
        </el-table>
      </div>
      <div class="pageblock">
        <el-pagination
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!--导出弹窗-->
    <div class="rolemanage chargeshow">
      <el-dialog
        title="生成导出任务"
        :visible.sync="dialogExportVisible"
        :destroy-on-close="true"
      >
        <div class="setExport">
          <el-form :model="ruleForm" :rules="rules" ref="ExportForm">
            <el-form-item label="任务名称" prop="exportName">
              <el-input
                v-model="ruleForm.exportName"
                placeholder="请输入任务名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="AddExport">生成</el-button>
            </el-form-item>
          </el-form>
          <div class="descript">
            说明：导出任务生成后，你可以在数据导出列表中进行查询和下载
          </div>
        </div>
      </el-dialog>
    </div>
    <!--导出弹窗结束-->
  </div>
</template>

<script>
import "./log.scss";
import { logModel, robotList, exportFile } from "@/api/log";
export default {
  name: "Robot",
  components: {},
  data() {
    return {
      // 查询时间数组
      dateTime: "",
      // 充电机ID下拉列表
      // 数据列表
      datalist: [],
      // 查询参数
      queryParams: {
        page: 1, // 当前页
        pageSize: 10, // 每页条数
        deviceNo: undefined,
        endTime: undefined,
        signals: undefined,
        startTime: undefined,
        exchangeNo: undefined,
        sort: 1,
      },
      total: 0, // 总条数，
      tableheight: 0, // 表格高度设置
      checked: false,
      indeterminate: false,
      robotValue: "",
      logOptions: [],
      logheader: [],
      heightTimer: false,
      loading: false,
      dialogExportVisible: false,
      ruleForm: {
        exportName: undefined,
      },
      rules: {
        exportName: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    tableheight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.heightTimer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val;
        this.heightTimer = true;
        setTimeout(function () {
          this.heightTimer = false;
        }, 400);
      }
    },
  },
  mounted() {
    this.getrobotList();
    this.getLogModel();
    this.onLoadHeight();
    this.changeWindow();
    this.getRecordParams();
  },
  methods: {
    labelHead(h, { column, index }) {
      let l = column.label.length;
      let f = 20;
      if (l <= 2) {
        f = 30;
      }
      column.minWidth = f * l;
      return h("div", { class: "table-head", style: { minWidth: "100%" } }, [
        column.label,
      ]);
    },
    /* 设置初始视窗高度*/
    onLoadHeight() {
      this.$nextTick(() => {
        this.tableheight = document.body.clientHeight - 370;
      });
    },
    /* 设置窗口变化高度*/
    changeWindow() {
      window.onresize = () => {
        return (() => {
          this.tableheight = document.body.clientHeight - 370;
        })();
      };
    },
    selectAll() {
      if (this.robotValue.length < this.logOptions.length) {
        this.robotValue = [];
        this.logOptions.map((item) => {
          this.robotValue.push(item.alarmCode);
        });
      } else {
        this.robotValue = [];
      }
    },
    changeSelect(val) {
      if (!val.includes("全选") && val.length === this.logOptions.length) {
        this.robotValue.unshift("全选");
      } else if (
        val.includes("全选") &&
        val.length - 1 < this.logOptions.length
      ) {
        this.robotValue = this.robotValue.filter((item) => {
          return item !== "全选";
        });
      }
    },
    removeTag(val) {
      if (val === "全选") {
        this.robotValue = [];
      }
    },
    //获取机器人日志列表
    getrobotList() {
      this.loading = true;
      console.log(this.queryParams, "queryparams");
      robotList(this.queryParams).then((res) => {
        this.datalist = res.data.list;
        this.total = res.data.total;
        this.$nextTick(() => {
          this.$refs.tblist.doLayout();
          this.loading = false;
        });
      });
    },
    //获取日志数据字典
    getLogModel() {
      logModel().then((res) => {
        this.logOptions = res.data;
        this.logheader = res.data;
        //接收换电记录传过来得参数
        if (
          this.$route.params.signals &&
          this.$route.params.signals.length > 0
        ) {
          let differenceSet = Array.from(
            new Set(
              [...this.logOptions].filter((x) =>
                this.$route.params.signals.includes(x.alarmCode)
              )
            )
          );
          this.logheader = differenceSet;
          this.robotValue = this.$route.params.signals;
          this.queryParams.signals = this.$route.params.signals;
          this.dateTime = [
            this.$route.params.startTime,
            this.$route.params.endTime,
          ];
        }
        this.$nextTick(() => {
          this.$refs.tblist.doLayout();
        });
      });
    },
    /** 分页下一页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getrobotList();
    },
    /** 分页选择页数 */
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.getrobotList();
    },
    // 搜索
    handleQuery() {
      if (this.dateTime || this.robotValue.length > 0) {
        if (this.dateTime) {
          this.queryParams.startTime = this.$moment(this.dateTime[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.queryParams.endTime = this.$moment(this.dateTime[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        if (this.robotValue.length > 0) {
          this.queryParams.signals = this.robotValue;
          let differenceSet = Array.from(
            new Set(
              [...this.logOptions].filter((x) =>
                this.robotValue.includes(x.alarmCode)
              )
            )
          );
          this.logheader = differenceSet;
        }
        delete this.queryParams.exchangeNo;
        this.getrobotList();
      } else {
        this.$message({
          message: "请选择查询条件！",
          type: "warning",
          duration: 1000,
          offset: 20,
        });
      }
      this.$nextTick(() => {
        this.$refs.tblist.doLayout();
      });
    },
    // 搜索重置
    resetForm() {
      // window.location.reload();
      this.robotValue = "";
      this.dateTime = "";
      this.queryParams.page = 1;
      this.queryParams.pageSize = 10;
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      this.getLogModel();
      this.getrobotList();
    },
    // 导出弹窗显示
    chargeExport() {
      this.dialogExportVisible = true;
    },
    //生成报表
    AddExport() {
      this.$refs.ExportForm.validate((valid) => {
        if (valid) {
          let addParams = {
            exportName: this.ruleForm.exportName,
            signals: this.robotValue,
            startTime: this.queryParams.startTime,
            endTime: this.queryParams.endTime,
            exportLogType: 1,
          };
          exportFile(addParams).then((res) => {
            if (res.code === 0) {
              this.dialogExportVisible = false;
              this.$router.push({ path: "/manage-log/data-export" });
            } else {
              this.$message({
                message: res.msg,
                type: "warning",
                duration: 1000,
                offset: 20,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //获取换电记录日志查询参数
    getRecordParams() {
      if (JSON.stringify(this.$route.params) == "{}") {
      } else {
        this.queryParams.exchangeNo = this.$route.params.exchangeNo;
        this.queryParams.startTime = this.$route.params.startTime;
        this.queryParams.endTime = this.$route.params.endTime;
        this.getrobotList();
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-table__fixed {
  height: calc(100% - 10px) !important;
}
::v-deep .el-table th.is-leaf{
  font-size: 15px !important;
}
/* .serch{
  min-width: 70px;
  width: 70px; 
  height: 40px; 
} */

</style>
