<template>
  <div class="right-warp">
    <div class="top-box">
      <div class="title-tip">
        <div>项目装备</div>
        <div class="more">更多 ></div>
      </div>
      <div class="equipment-list">
        <div class="equip-item1 item">
          <div class="title">年度总投资额</div>
          <div class="number">{{ 2600 }} <span class="unit">亿元</span></div>
        </div>
        <div class="equip-item2 item">
          <div class="title">在建工程数</div>
          <div class="number">{{ 19467 }} <span class="unit">个</span></div>
        </div>
        <div class="equip-item3 item">
          <div class="title">在用装备数</div>
          <div class="number">{{ 45036 }} <span class="unit">台</span></div>
        </div>
      </div>
      <div class="top-bottom">
        <div class="usage-rate">
          <div class="usage-rate-item" @click="">
            <img src="../../img/usage-rate.png" alt="" />
            <div style="margin: 0 10px">在用率</div>
            <div style="width: 250px">
              <SegmentProgress :value="51" :total="20" />
            </div>
          </div>
        </div>
        <div class="turnround-rate">
          <div class="turnround-rate-title" @click="">
            <span style="color: #ccc; font-size: 15px">周转率 </span>
            {{ 2.41 }}
            <span class="unit"> 次/年</span></div
          >
        </div>
      </div>
    </div>
    <div class="center-box">
      <el-row :gutter="20">
        <el-col :span="10" :offset="0">
          <div class="usage-rate-situation">
            <UsageRateSituationList />
          </div>
        </el-col>
        <el-col :span="14" :offset="0">
          <div class="usage-rate-pro">
            <ProEquipSituationList />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bottom-box">
      <EquipUsageRate />
    </div>

    <!-- 更多 -->
    <UsageRateMore ref="usageRateMore" />
    <!-- 更多 -->
    <ProEquipMore ref="proEquipMore" />
    <EquipItemMore ref="equipItemMore" />
  </div>
</template>

<script>
import UsageRateSituationList from './UsageRateSituationList.vue'
import ProEquipSituationList from './ProEquipSituationList.vue'
import EquipUsageRate from './EquipUsageRate'
import { getProjectEquipmentApi } from '@/api/wsScreen'
import UsageRateMore from './UsageRateMore.vue'
import ProEquipMore from './ProEquipMore'
import EquipItemMore from './EquipItemMore.vue'
import SegmentProgress from './SegmentProgress.vue'

export default {
  components: {
    UsageRateSituationList,
    ProEquipSituationList,
    EquipUsageRate,
    UsageRateMore,
    ProEquipMore,
    EquipItemMore,
    SegmentProgress,
  },
  data() {
    return {
      annualTotal: 0, // 年度总投资额
      projectNUm: 0, // 在建工程数
      num: 0, // 在用装备数
      turnoverRate: 0, // 周转率
      proportion: 0, // 在用率
      dlgTitle: '',
      dlgParams: {},
    }
  },
  created() {
    // this.getInfo()
  },
  methods: {
    async getInfo() {
      try {
        const res = await getProjectEquipmentApi()
        console.log('🚀 ~ getInfo ~ res:', res)
        this.annualTotal = res.data.annualTotal
        this.projectNUm = res.data.projectNUm
        this.num = res.data.num
        this.turnoverRate = res.data.turnoverRate
        this.proportion = res.data.proportion || 0
      } catch (error) {
        console.log('🚀 ~ getInfo ~ error:', error)
      }
    },
    openDialog() {
      this.$refs.usageRateMore.openDialog()
    },
    openDialogPro() {
      this.$refs.proEquipMore.openDialog()
    },
    openDialogEquip(type) {
      this.$refs.equipItemMore.openDialog(type)
    },
  },
}
</script>

<style lang="scss" scoped>
.right-warp {
  margin: 80px 80px 0 0;
  .title-tip {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-left: 45px;
    font-family: DS-TITLE;
    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: '';
    }
  }
  .top-box {
    height: 180px;
    background-image: url('../../img/pro-equip.png');
    background-size: 100% 100%;
  }
  .center-box {
    height: 350px;
    .usage-rate-situation {
      width: 100%;
      height: 350px;
      background-image: url('../../img/equip-usage.png');
      background-size: 100% 100%;
    }
    .usage-rate-pro {
      width: 100%;
      height: 350px;
      background-image: url('../../img/equip-usage.png');
      background-size: 100% 100%;
    }
  }
  .bottom-box {
    height: 310px;
    background-image: url('../../img/equip-usage-rate.png');
    background-size: 100% 100%;
  }

  .equipment-list {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .item {
      padding-left: 39px;
      width: 202px;
      height: 60px;
      text-align: center;

      .title {
        margin: -5px 0 7px;
      }

      .number {
        font-size: 22px;
        font-weight: 800;
        font-family: 'DIN';
        background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .unit {
        font-size: 12px;
        color: #878585;
      }
    }
    .equip-item1 {
      background-image: url('../../img/total-investment.png');
      background-size: 100% 100%;
    }
    .equip-item2 {
      background-image: url('../../img/under-pro.png');
      background-size: 100% 100%;
    }
    .equip-item3 {
      background-image: url('../../img/inuse-equip.png');
      background-size: 100% 100%;
    }
  }

  .top-bottom {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .usage-rate {
      .usage-rate-item {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }

    .turnround-rate {
      width: 365px;
      height: 40px;
      background-image: url('../../img/turnround-rate.png');
      background-size: 100% 100%;

      .turnround-rate-title {
        font-size: 20px;
        font-weight: 800;
        color: #4aa4f4;
        margin-top: 5px;
        text-align: center;
        cursor: pointer;
        .unit {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
