<template>
  <div class="e-scene-logging">
    <div class="device-children-header">
      <div class="left-link-home" @click="handleLinkToHome">
        <icon class="iconfont iconfanhui_1"></icon>
        <span class="link-bt-title">返回</span>
      </div>
      <div class="lift-gateway-info">
        <span class="gateway-label">场景名称：</span>
        <span class="gateway-adders">{{ sceneInfo.sceneName || '--'
          }}</span>
      </div>
      <div class="right-operate">
        <el-select
          v-model="queryParams.method"
          clearable
          placeholder="触发方式"
          size="small"
          style="margin-right: 10px"
          width="300"
        >
          <el-option
            v-for="(value, keys) in triggerMethod"
            :key="keys"
            :label="value"
            :value="keys"
          ></el-option>
        </el-select>

        <el-date-picker
          v-model="time"
          :clearable="false"
          :default-time="['00:00:00', '23:59:59']"
          end-placeholder="结束日期"
          range-separator="至"
          size="small"
          start-placeholder="开始日期"
          style="margin-right: 10px"
          type="datetimerange"
          @change="queryTimeChange"
        >
        </el-date-picker>

        <div class="operate-refresh" @click="handleRefresh">查询</div>
      </div>
    </div>
    <div class="device-children-center">
      <el-table
        v-loading="tableLoading"
        :data="tableList"
        :height="total > 0 ? '470px' : '510px'"
      >
        <el-table-column
          :index="
            (idx) => {
              return idx + 1 + (queryParams.pageNum - 1) * queryParams.pageSize;
            }
          "
          align="center"
          label="序号"
          type="index"
          width="80px"
        ></el-table-column>

        <el-table-column
          align="center"
          label="触发方式"
          prop="method"
          width="150px"
        >
          <template slot-scope="scope">
            <span :title="scope.row.method" class="lay-table-textarea">
              {{ triggerMethod[scope.row.method]}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="内容"
          prop="content"
        >
          <template slot-scope="scope">
            <span :title="scope.row.content" class="lay-table-textarea">
              {{ scope.row.content }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
          width="160px"
        >
          <template slot-scope="scope">
            <span :title="scope.row.createTime" class="lay-table-textarea">
              {{ scope.row.createTime }}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :limit.sync="queryParams.pageSize"
        :page.sync="queryParams.pageNum"
        :total="total"
        @pagination="getList"
      />
    </div>
  </div>
</template>
<script>
import { projectSceneLoggingList } from "@/api/iot/project_new";
const triggerMethod = {
  MANUAL: "手动触发",
  TIMER: "定时触发",
  DEVICE: "设备触发",
};
export default {
  name: "ELogging",
  props: {
    sceneInfo: {
      type: Object,
      require: true,
    },
    sourceId: {
      type: [String, Number],
      require: true,
    },
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableLoading: true,
      tableList: [],
      projectModelList: [],
      tableSelectList: [],
      stompClient: null,
      socket_flag: true,
      timeout_flag: null,
      total: 0,
      time: [],
      triggerMethod,
    };
  },
  created() {
    this.newTime();
    this.getList();
  },
  methods: {
    newTime() {
      const startTime = this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00");
      const endTime = this.parseTime(new Date(), "{y}-{m}-{d} 23:59:59");
      this.time = [startTime, endTime];
      this.queryParams.startDate = startTime;
      this.queryParams.endDate = endTime;
    },
    queryTimeChange(val) {
      if (val) {
        this.queryParams.startDate = this.parseTime(
          val[0],
          "{y}-{m}-{d} {h}:{i}:{s}"
        );
        this.queryParams.endDate = this.parseTime(
          val[1],
          "{y}-{m}-{d} {h}:{i}:{s}"
        );
      } else {
        this.queryParams.startDate = null;
        this.queryParams.endDate = null;
      }
    },
    handleLinkToHome() {
      this.$emit("handleLinkToHome");
    },
    // 处理数据 成为表格可用 列数据
    handleTableFilter(list) {
      var resultList = [];
      if (list && list.length > 0) {
        list.forEach((v) => {
          resultList.push({
            label: v["unitName"] ? `${v["name"]}(${v["unitName"]})` : v["name"],
            align: "center",
            prop: v["key"],
            width: list.length > 5 ? "200px" : "",
          });
        });
      }
      return resultList;
    },
    // 查询 子设备列表数据---需要考虑到型号的问题
    getList() {
      this.tableList = [];
      this.tableLoading = true;
      projectSceneLoggingList(
        Object.assign(
          {
            sceneId: this.sourceId,
          },
          this.queryParams
        )
      ).then((res) => {
        this.tableList = res.rows;
        this.total = res.total;
        this.tableLoading = false;
      });
    },
    handleRefresh() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 表格 分页查询
    handleQuery(e) {
      this.queryParams = Object.assign(this.queryParams, e);
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.e-scene-logging {
  width: 100%;
  height: 100%;
  .device-children-header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    .left-link-home {
      width: 70px;
      height: 32px;
      background: #f4f5f7;
      border-radius: 5px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #6b778c;
      display: flex;
      align-items: center;
      justify-content: center;
      .link-bt-title {
        margin-left: 5px;
      }
    }
    .lift-gateway-info {
      width: calc(100% - 920px);
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 10px;
      // justify-content: space-around;
      .gateway-label {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #6b778c;
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
      }
      .gateway-adders {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #344567;
        width: calc(95% - 60px);
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
      }
      .gateway-did {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #344567;
        width: calc(55% - 20% - 80px);
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
      }
      .gateway-stu {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #009003;
        width: calc(18% - 80px);
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
      }
      .off-line {
        color: #ff0000;
      }
    }
    .right-operate {
      width: 870px;
      display: flex;
      justify-content: flex-end;
      font-weight: 400;
      color: #344567;
      font-size: 12px;
      font-family: Source Han Sans CN;
      cursor: default;
      .operate-refresh {
        width: 60px;
        height: 32px;
        background: #f4f5f7;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
      }
      .operate-onekey-on {
        width: 75px;
        height: 30px;
        background: #f4f5f7;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        font-weight: 400;
        color: #344567;
      }
      .but-disable {
        color: #6b778c;
        opacity: 0.5;
      }
    }
  }
  .device-children-center {
    .children-device-operate {
      display: flex;
      justify-content: space-evenly;
      align-items: baseline;
      cursor: default;
      > span {
        display: block;
        width: 50px;
        text-align: center;
        font-size: 13px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #1890ff;
        align-items: center;
        > i {
          font-size: 16px;
          margin-right: 1px;
        }
      }
      .span-disable {
        color: #6b778c;
        opacity: 0.5;
      }
    }
    .children-device-online {
      font-size: 13px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #009003;
    }
    .children-device-offline {
      font-size: 13px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ff0000;
    }
  }
}
</style>
