<template>
  <div>
    <el-dialog
      title="风机信息"
      :visible.sync="localdraught"
      width="1200px"
      @close="handleClose"
    >
      <el-table
        class="center-align-table"
        :data="tableData"
        border
        :cell-style="rowStyle"
        stripe
      >
        <el-table-column
          fixed
          prop="engineName"
          align="center"
          label="风机名称"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="fieldCode"
          align="center"
          label="风场编号"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="machineTypeCode"
          align="center"
          label="风机机型"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="manufacturerName"
          align="center"
          label="主机厂商"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="sightcing"
          align="center"
          label="是否标杆"
          min-width="100"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.sightcing === 1 || scope.row.sightcing === '是'"
              >是</span
            >
            <span
              v-else-if="
                scope.row.sightcing === 2 || scope.row.sightcing === '否'
              "
              >否</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="elevationHeight"
          align="center"
          label="海拔高度/米"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          prop="longitude"
          align="center"
          label="经度"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="latitude"
          align="center"
          label="纬度"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="ratedCapacity"
          align="center"
          label="额定容量(kW)"
          min-width="100"
        >
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          layout="total, prev, pager, next"
          :page-size="pageSize"
          :total="totalSize"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { windEngineGrouPage } from "@/api/ledger.js";
import { getTilePriority } from "ol/TileQueue";
export default {
  props: {
    draught: {
      type: Boolean,
      default: false,
    },
    draughtData: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    localdraught: {
      get() {
        console.log(this.draught);
        return this.draught;
      },
      set(value) {
        // 在这里不进行任何修改
      },
    },
  },
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      totalSize: 0,
    };
  },
  watch: {
    draughtData(newVal) {
      if (newVal) {
        this.getfengji();
      }
    },
  },

  methods: {
    rowStyle() {
      return "text-align:center";
    },
    handleClose() {
      this.$emit("handleClose", false, "draught");
    },
    //分页数据切换
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getfengji();
    },

    getfengji() {
      let paramsData = {
        fieldCode: this.draughtData.fieldCode,
        pageNum: this.pageNum || 1,
        pageSize: 10,
      };
      windEngineGrouPage(paramsData).then((res) => {
        this.tableData = res.data.list;
        this.totalSize = res.data.totalSize;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.general {
  display: flex;
  flex-wrap: wrap;

  .condition {
    width: 50%;
    display: flex;

    p {
      width: 100px;
      text-align: right;
      line-height: 40px;
    }

    span {
      line-height: 40px;

      padding-left: 20px;
    }

    .el-select {
      width: 100%;
      margin-bottom: 20px;
    }

    .el-input {
      margin-bottom: 20px;
    }
  }
}

.attachment {
  display: flex;
  padding-top: 10px;

  p {
    margin-right: 20px;
    color: #409eff;
  }
}
</style>
