<template>
  <div class="table-style">
    <div class="title-tip">
      <div class="title-text">工程在用装备情况</div>
      <div class="more more-warp">
        <div>
          <el-select v-model="proCode" placeholder="" clearable filterable size="mini" @change="getList">
            <el-option v-for="item in options" :key="item.proCode" :label="item.proName" :value="item.proCode" />
          </el-select>
        </div>
        <div style="margin-left: 50px" @click="">更多 ></div>
      </div>
    </div>

    <div>
      <div class="topView">
        <div style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between">
          <div :class="tabIndex == 0 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(0)">线路</div>
          <div :class="tabIndex == 2 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(2)">变电</div>
          <div :class="tabIndex == 1 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(1)">电缆</div>
        </div>
        <div>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0" style="width: 200px">
              <div style="display: flex; text-align: center">
                <img src="../../img/icon3.png" class="icon" />
                <div>
                  <div style="color: #ccc; font-size: 12px; margin-top: 10px">项目数（个）</div>
                  <div style="font-size: 16px; font-weight: 800">{{ 7695 }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="12" :offset="0" style="width: 220px">
              <div style="display: flex; text-align: center">
                <img src="../../img/icon1.png" class="icon" />
                <div>
                  <div style="color: #ccc; font-size: 12px; margin-top: 10px">在用装备数（台）</div>
                  <div style="font-size: 16px; font-weight: 800">{{ 37746 }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="table-list scroll-container">
      <table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
        <!-- 双层表头 -->
        <thead>
          <!-- 第一行：跨列合并 -->
          <tr>
            <th>排名</th>
            <th>工程名称</th>
            <th>在用装备数（台）</th>
            <th>规模（拆单公里）</th>
            <!-- <th>百公里线路装备使用情况</th> -->
          </tr>
        </thead>

        <!-- 表体：使用 v-for 渲染数据 -->
        <tbody>
          <tr v-for="(row, index) in tableData" :key="index">
            <td style="width: 60px">{{ index + 1 }}</td>
            <td style="width: 200px">{{ row.projectName }}</td>
            <td style="width: 120px">{{ row.inUser }}</td>
            <td>{{ row.scale }}</td>
            <!-- <td>{{ row.usage }}</td> -->
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { getEquipmentUseApi } from '@/api/wsScreen'
import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out'

export default {
  data() {
    return {
      proCode: '',
      options: [],
      proNum: 0,
      equipNum: 0,
      tabIndex: 0,
      tableData: [
        {
          projectName: '埇桥-萧砀|回500千伏线路工程',
          inUser: '82',
          scale: '172',
        },
        {
          projectName: '石岗-施桥110kV线路工程',
          inUser: '18',
          scale: '55.6',
        },
        {
          projectName: '换流站-金牛500kV线路工程',
          inUser: '18',
          scale: '55.6',
        },
        {
          projectName: '汤庄-平圩500kV线路工程',
          inUser: '18',
          scale: '55.6',
        },
        {
          projectName: '魏武-木兰n入祝集变电站220kV线路工程',
          inUser: '18',
          scale: '55.6',
        },
      ],
    }
  },
  created() {
    // this.getProList()
    // this.getList()
  },
  methods: {
    changTab(type) {
      this.tabIndex = type
      this.getList()
    },
    async getList() {
      try {
        const params = {
          type: this.tabIndex,
          proCode: this.proCode,
        }
        const res = await getEquipmentUseApi(params)
        this.tableData = res.data.equipmentUse || []
        this.proNum = res.data.proNum || 0
        this.equipNum = res.data.equipmentNum || 0
      } catch (error) {}
    },
    async getProList() {
      try {
        const res = await getUseProjectListAPI()
        this.options = res.data
      } catch (error) {
        console.log('🚀 ~ error:', error)
      }
    },
    openDialog() {
      this.$emit('openDialog')
    },
  },
}
</script>

<style lang="scss" scoped>
.table-style {
  height: 350px;
}
.scroll-container {
  width: 100%;
  overflow: auto;

  /* 隐藏滚动条轨迹 */
  -ms-overflow-style: none; /* IE / Edge */
  scrollbar-width: none; /* Firefox */
}

/* Chrome / Safari */
.scroll-container::-webkit-scrollbar {
  width: 0; /* 或者直接隐藏 */
  height: 0;
  background: transparent; /* 背景透明 */
}
.title-tip {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-left: 45px;
  font-family: DS-TITLE;
  .title-text {
    background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
  }

  .more {
    margin-right: 20px;
    color: #5fbbdb;
    cursor: pointer;
    font-weight: 600;
    font-family: '';
  }

  .more-warp {
    display: flex;
    align-items: center;
  }
}
.table-list {
  margin-top: -20px;
  height: 238px;
  overflow: auto;
}
.topView {
  width: 100%;
  height: 16%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fs-24 {
  margin-top: 10px;
  font-size: 15px;
  padding: 5px;
  cursor: pointer;
}
.topTab1 {
  width: 33%;
  height: 80%;
  color: #45adf1;
  background-image: url('../../../../../assets/cityScreen/tab11.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topTab2 {
  width: 33%;
  height: 80%;
  color: #45adf1;
  background-image: url('../../../../../assets/cityScreen/tab21.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topTab3 {
  width: 33%;
  height: 80%;
  color: #45adf1;
  background-image: url('../../img/tab31.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.active1 {
  background-image: url('../../img/tab12.png');
}
.active2 {
  background-image: url('../../img/tab22.png');
}
.active3 {
  background-image: url('../../img/tab32.png');
}

table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Alibaba-PuHuiTi-Regular';
  font-size: 11px;
}

th,
td {
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  /* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
  background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

th {
  font-weight: bold;
}
// 第一行背景
thead {
  background-image: url('../../img/tableHeader.png');
  background-size: 100% 100%;
}

tbody tr {
  background-image: url('../../img/tableTr.png');
  background-size: 100% 100%;
}

tbody tr:hover {
  background-image: url('../../img/table-hover.png');
  cursor: pointer;
}

::v-deep .el-select .el-input__inner {
  background-color: #1f4a85 !important ;
  color: #fff !important;
}
</style>
