<template>
  <div class="e-project-electricity">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="空间：" prop="spaceId">
        <treeselect
          style="width: 200px"
          v-model="queryParams.spaceId"
          :options="querySpaceOptions"
          :normalizer="normalizer"
          placeholder="请选择空间"
        />
      </el-form-item>
      <el-form-item label="月份：" prop="queryTime">
        <el-date-picker
          v-model="queryTime"
          type="month"
          :clearable="false"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="设备号：" prop="deviceId">
        <el-input
          style="width: 150px"
          v-model="queryParams.deviceId"
          placeholder="输入设备号"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <div class="debuff-table">
      <el-table
        v-loading="tableLoading"
        :data="tableList"
        :height="total > 0 ? '520px' : '560px'"
      >
        <el-table-column
          label="设备名称"
          align="left"
          width="180px"
          prop="deviceName"
        ></el-table-column>

        <el-table-column
          label="设备号"
          align="left"
          width="250px"
          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="地点" align="left" prop="deviceAddress">
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.deviceAddress">
              {{ scope.row.deviceAddress }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="本月电量" align="center" width="100" prop="tmReadSum">
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.tmReadSum">
              {{ scope.row.tmReadSum || 0 }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="上月电量" align="center" width="100" prop="lmReadSum">
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.lmReadSum">
              {{ scope.row.lmReadSum || 0 }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="对比" align="center" width="100" prop="qoq">
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.qoq">
              {{ scope.row.qoq || 0 }}%
            </span>
          </template>
        </el-table-column>

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

        <el-table-column label="联系电话" align="center" width="120" prop="phone">
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.phone">
              {{ scope.row.phone}}
            </span>
          </template>
        </el-table-column> -->

        <el-table-column label="状态" align="center" width="120" prop="status">
            <template slot-scope="scope">
              <div class="e-table-dev-status">
                <span>{{ scope.row.deviceStatus === '0' ? '启用' : '禁用' }}</span>
                <el-divider direction="vertical"></el-divider>
                <span class="c-success" v-if="scope.row.deviceState === 'ONLINE'">在线</span>
                <span class="c-danger" v-else-if="scope.row.deviceState === 'OFFLINE'">离线</span>
                <span class="c-warning" v-else-if="scope.row.deviceState === 'OUTLINE'">脱线</span>
                <span class="c-info" v-else-if="scope.row.deviceState === 'UNACTIVE'">未激活</span>
              </div>
            </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="100"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-search"
              @click="handleLinkDevDetails(scope.row)"
            >详情</el-button>
          </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 Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { projectElectricityTable } from "@/api/iot/project_new";
import { listSpace } from "@/api/iot/space";
export default {
  name: "EElectricity",
  props: {
    projectInfo: {
      type: Object,
      require: true,
    },
    sourceId: {
      type: [Number, String],
      require: true,
    },
    tempType: {
      type: String,
      require: true,
    },
  },
  components: {
    Treeselect,
  },
  data() {
    return {
      queryParams: {
        spaceId: null,
        deviceId: '',
      },
      queryTime: '',
      querySpaceOptions: [],
      tableList: [],
      tableLoading: false,
      total: 2
    };
  },
  watch: {
    sourceId(val) {
      if (val !== null && val !== undefined) {
        this.init();
      }
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.queryTime = this.parseTime(new Date(), "{y}-{m}-01 00:00:00");
      this.getSpaceList();
      this.handleQuery();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleLinkDevDetails(row) {
      var deviceUrl =
        this.$store.getters.tenantId === 0
          ? "/device/device"
          : "/device_tenant/device_tenant";
      this.$router.push({ path: deviceUrl, query: { 'deviceId': row.deviceId, 'tempType': 'details' } })
    },
    /** 转换项目空间数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.spaceId,
        label: node.spaceName,
        children: node.children
      };
    },
    /** 查询项目空间拉树结构 */
    getSpaceList() {
      let param = {
        projectId: this.sourceId,
      };
      listSpace(param).then((response) => {
        this.querySpaceOptions = [];
        const data = { spaceId: 0, spaceName: "顶级节点", children: [] };
        data.children = this.handleTree(response.data, "spaceId", "parentId");
        this.querySpaceOptions.push(data);
      });
    },
    // 查询列表
    getList() {
        var queryParams = JSON.parse(JSON.stringify(this.queryParams));
        projectElectricityTable(
          Object.assign(queryParams, {
            projectId: this.sourceId,
            time: this.parseTime(
              new Date(this.queryTime),
              "{y}-{m}-01 00:00:00"
            ),
            typeCode: this.tempType,
            timeType: 'month'
          })
        ).then((res) => {
          this.tableList = res.rows;
          this.total = res.total;
        });
    },
  },
};
</script>
<style lang="scss">
.e-project-electricity {
  .electricity-query {
    width: 100%;
    height: 40px;
    justify-content: start;
    align-items: center;
    display: flex;
    margin-bottom: 10px;
  }
  .e-table-dev-status {
    width: 100%;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    > span {
      font-size: 13px;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: #6B778C;
      line-height: 50px;
    }
    .c-success {
      color: #00C805;
    }
    .c-warning {
      color: #e6a23c;
    }
    .c-danger {
      color: #f56c6c;
    }
    .c-info {
      color: #909399;
    }
  }
}
</style>
