<template>
  <div>
    <div class="title-tip">
      <div>装备在用率统计</div>
      <div class="more" @click="">更多 ></div>
    </div>
    <!-- <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 == 1 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(1)">线路</div>
      <div :class="tabIndex == 2 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(2)">变电</div>
      <div :class="tabIndex == 3 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(3)">电缆</div>
    </div> -->

    <div class="item-list">
      <div class="item" :class="`item-bg-${index + 1}`" v-for="(item, index) in tableList" :key="index">
        <div style="text-align: center; margin-top: 20px">{{ item.name || '-' }}</div>
        <div style="margin: 112px 0 0 42px"
          ><span style="font-size: 12px; color: #ccc">在用率</span> {{ item.proportion || 0 }} %</div
        >
        <div style="margin-left: 42px"
          ><span style="font-size: 12px; color: #ccc">周转率</span> {{ item.turnoverRate || 0 }} 次/年</div
        >
      </div>
    </div>

    <!-- 更多 -->
    <EquipUsageRateMore ref="equipUsageRateMore" />
  </div>
</template>

<script>
import { getUsageStatisticsApi } from '@/api/wsScreen'
import EquipUsageRateMore from './EquipUsageRateMore'

export default {
  components: { EquipUsageRateMore },
  data() {
    return {
      tabIndex: 0,
      tableList: [
        {
          name: '张力机',
          proportion: 64.58,
          turnoverRate: 4.08,
        },
        {
          name: '牵引机',
          proportion: 53.13,
          turnoverRate: 4.3,
        },
        {
          name: '抱杆',
          proportion: 46.88,
          turnoverRate: 2.83,
        },
        {
          name: '滤油机',
          proportion: 17.71,
          turnoverRate: 2.66,
        },
        {
          name: '电缆输送机',
          proportion: 13.54,
          turnoverRate: 2.51,
        },
      ],
    }
  },
  created() {
    // this.getInfo()
  },
  methods: {
    changTab(type) {
      console.log('🚀 ~ changTab ~ type:', type)
      this.tabIndex = type
      // this.getInfo()
    },
    async getInfo() {
      try {
        let type = 0
        if (this.tabIndex == 0) {
          type = 0
        } else if (this.tabIndex == 1) {
          type = 5474
        } else if (this.tabIndex == 2) {
          type = 5080
        } else if (this.tabIndex == 3) {
          type = 5010
        }
        const res = await getUsageStatisticsApi({ type })
        if (!res.data) return
        if (res.data.length > 5) {
          this.tableList = res.data.slice(0, 5)
        } else {
          this.tableList = res.data
        }
        console.log('🚀 ~ 装备在用率统计 ~ res:', res)
      } catch (error) {
        console.log('🚀 ~ 装备在用率统计 ~ error:', error)
      }
    },
    openDialog() {
      console.log('🚀 ~ openDialog ~ openDialog:')
      this.$refs.equipUsageRateMore.openDialog()
    },
  },
}
</script>

<style lang="scss" scoped>
.title-tip {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-left: 45px;
  font-family: DS-TITLE;
  background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  .more {
    margin-right: 20px;
    color: #5fbbdb;
    cursor: pointer;
    font-weight: 600;
    font-family: '';
  }
}
.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');
}

.item-list {
  margin-top: 30px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  .item {
    width: 190px;
    height: 220px;
    font-weight: bolder;
    margin-right: 22px;
  }
  .item-bg-1 {
    background-image: url('../../img/list-1.png');
    background-size: 100% 100%;
  }
  .item-bg-2 {
    background-image: url('../../img/list-2.png');
    background-size: 100% 100%;
  }
  .item-bg-3 {
    background-image: url('../../img/list-3.png');
    background-size: 100% 100%;
  }
  .item-bg-4 {
    background-image: url('../../img/list-4.png');
    background-size: 100% 100%;
  }
  .item-bg-5 {
    background-image: url('../../img/list-5.png');
    background-size: 100% 100%;
  }
}
</style>
