<template>
  <div class="e-project-debuff">
    <div class="debuff-query">
      <el-date-picker
        v-model="queryTime"
        style="margin: 0 10px"
        type="datetimerange"
        :clearable="false"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-input
        style="width: 150px; margin: 0 10px 0 0"
        v-model="queryParams.deviceId"
        placeholder="输入设备号"
      ></el-input>
      <el-button
        type="primary"
        style="margin: 0 10px 0 0"
        @click="queryGetList"
        size="small"
        >查询</el-button
      >
      <el-dropdown>
        <el-button size="small">
          导出<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="handleExport('nowPage')"
            >导出当前页</el-dropdown-item
          >
          <el-dropdown-item  @click.native="handleExport('all')">导出全部</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="debuff-table">
      <el-table
        v-loading="tableLoading"
        :data="tableList"
        :height="total > 0 ? '530px' : '570px'"
      >
        <el-table-column
          label="事件ID"
          width="200px"
          align="left"
          prop="recordId"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.recordId">
              {{ scope.row.recordId }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="地点" align="left" prop="address">
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.address">
              {{ scope.row.address }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="设备号"
          align="left"
          width="180px"
          prop="deviceId"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.deviceId">
              {{ scope.row.deviceId }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="线路"
          width="80px"
          align="center"
          prop="lineType"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea">
              {{ scope.row.lineType == '0' ? "总路" : "支路" }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="检查的规则"
          width="180px"
          align="center"
          prop="typeName"
        />

        <el-table-column
          label="异常的描述"
          align="left"
          width="200px"
          prop="alarmContent"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.alarmContent">
              {{ scope.row.alarmContent }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="联系人"
          width="180px"
          align="center"
          prop="contacts"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.name">
              {{ scope.row.name }} {{ scope.row.phone }}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        style="margin-top: 5px; height: 35px"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>
<script>
import {
  projectAbnormalRecordTable,
  projectAbnormalRecordExport,
} from "@/api/iot/project_new";
import { downloadFile } from '@/utils/hciot'
export default {
  name: "EDebuff",
  props: {
    projectInfo: {
      type: Object,
      require: true,
    },
    sourceId: {
      type: [Number, String],
      require: true,
    },
    tempType: {
      type: String,
      require: true,
    },
  },
  watch: {
    sourceId(val) {
      if (val !== null && val !== undefined) {
        this.queryGetList();
      }
    },
  },
  data() {
    return {
      queryParams: {
        deviceId: "",
        pageNum: 1,
        pageSize: 10,
      },
      tableLoading: false,
      tableList: [],
      queryTime: [],
      total: 0,
    };
  },
  created() {
    this.queryTime = [
      this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00"),
      this.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
    ];
    this.queryGetList();
  },
  methods: {
    queryGetList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      projectAbnormalRecordTable(
        Object.assign(this.queryParams, {
          projectId: this.sourceId,
          startTime: this.parseTime(
            new Date(this.queryTime[0]),
            "{y}-{m}-{d} {h}:{i}:{s}"
          ),
          endTime: this.parseTime(
            new Date(this.queryTime[1]),
            "{y}-{m}-{d} {h}:{i}:{s}"
          ),
          typeCode: this.tempType,
        })
      ).then((res) => {
        this.tableList = res.rows;
        this.total = res.total;
      });
    },
    /** 导出按钮操作 */
    handleExport(type) {
      let queryParams = {};
      queryParams = JSON.parse(JSON.stringify(this.queryParams));
      if (type === 'all') {
        queryParams.pageNum = undefined;
        queryParams.pageSize = undefined;
      };
      queryParams = Object.assign(queryParams, {
        projectId: this.sourceId,
        typeCode: this.tempType,
        startTime: this.parseTime(
          new Date(this.queryTime[0]),
          "{y}-{m}-{d} {h}:{i}:{s}"
        ),
        endTime: this.parseTime(
          new Date(this.queryTime[1]),
          "{y}-{m}-{d} {h}:{i}:{s}"
        )
      });

      this.$confirm("是否确认导出所有项目数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return projectAbnormalRecordExport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  },
};
</script>
<style lang="scss">
.e-project-debuff {
  .debuff-query {
    width: 100%;
    height: 40px;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    margin-bottom: 10px;
  }
}
</style>
