<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      v-loading="isLoading"
      :visible.sync="dialogVisible"
      width="85%"
      :modal="false"
      class="dlg-box"
    >
      <div>
        <img src="@/assets/images/bgs/1.png" style="width: 100%" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getEquipmentDetailsApi } from '@/api/wsScreen'

export default {
  data() {
    return {
      isLoading: false,
      dialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        proName: '', // 装备类型
      },
      tableColumns: [
        { label: '工程名称', prop: 'proName' },
        { label: '在用装备数量（台）', prop: 'inUser' },
        { label: '类型', prop: 'projectTypeName' },
        { label: '电压等级（kV）', prop: 'voltage' },
        { label: '规模（拆单公里）', prop: 'scale' },
        { label: '百公里线路装备使用情况', prop: 'usage' },
      ],
      tableList: [],
      total: 0,
    }
  },
  created() {},
  methods: {
    openDialog() {
      this.dialogVisible = true
    },
    async getList() {
      try {
        const res = await getEquipmentDetailsApi({ ...this.queryParams })
        this.tableList = res.rows || []
        this.total = res.total || 0
      } catch (error) {
        console.log('🚀 ~ error:', error)
      }
    },
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.queryForm.resetFields()
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>
.dlg-box {
  .close-btn {
    width: 39px;
    height: 39px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }
  .dlg-title {
    margin-top: -25px;
    margin-bottom: 45px;
    font-size: 21px;
    text-align: center;
    font-weight: 800;
  }
}
</style>
