<template>
  <FullScreenContainer :width="1920" :height="1080" :loading="loading" @getScale="getScale">
    <Header> </Header>
    <div class="container">
      <el-row class="full" :gutter="10">
        <el-col :span="7" class="left">
          <div class="card mini-card card-border1">
            <div class="card-title card-title-border1">平台实时利用率</div>
            <div class="card-body">
              <RealTimeUsed :scale="scale"></RealTimeUsed>
            </div>
          </div>
          <div class="card card-border2">
            <div class="card-title card-title-border1">单位使用排名</div>
            <div class="card-body">
              <ScrollTable :data="departTrend" :column-width="['80px']" :columns="['排名', '单位名称', '机时']" :options="{ singleHeight: 32 }">
                <template v-slot="scope">
                  <scroll-table-column :value="scope.row.rank" width="80px">
                    <template slot-scope="scope">
                      <div class="square" :style="{ 'background-color': colorMap[scope.value - 1] || 'gray' }">{{ scope.value }}</div>
                    </template>
                  </scroll-table-column>
                  <scroll-table-column :value="scope.row.org_name"> </scroll-table-column>
                  <scroll-table-column :value="scope.row.calc_time"> </scroll-table-column>
                </template>
              </ScrollTable>
            </div>
          </div>
          <div class="card mini-card card-border3">
            <div class="card-title card-title-border1">应用软件使用排名</div>
            <div class="card-body">
              <ScrollTable :data="appTrend" :column-width="['80px']" :columns="['排名', '软件名称', '机时']" :options="{ singleHeight: 32 }">
                <template v-slot="scope">
                  <scroll-table-column :value="scope.row.rank" width="80px">
                    <template slot-scope="scope">
                      <div class="square" :style="{ 'background-color': colorMap[scope.value - 1] || 'gray' }">{{ scope.value }}</div>
                    </template>
                  </scroll-table-column>
                  <scroll-table-column :value="scope.row.app_name"> </scroll-table-column>
                  <scroll-table-column :value="scope.row.calc_time"> </scroll-table-column>
                </template>
              </ScrollTable>
            </div>
          </div>
        </el-col>
        <el-col :span="10" class="center">
          <div class="card intro-card card-border4">
            <div class="card-title card-title-border2">平台简介</div>
            <div class="card-body">
              <img class="intro-img m-t" src="./images/plateform.png" />
              <div class="intro-text">
                <div>
                  电科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之一，以设计标准化、部署模块化、管理可视化、运维智能化为依托，打造满足中国机房设计标准、美国机房设计标准和Uptime
                  Institute的创新性平台，致力于拓展科研手段、深化生产服务，为火力发电、新能源等领域的关键技术、核心装备、系统集成等相关科技研发提供有力支撑。
                </div>
                <div>平台建筑面积200余平方米，硬件设施智能完善、软件系统高效便捷，主要开展火力发电固体燃料热解与燃烧、气体燃料燃烧、污染物生成与脱除、物质流能量流、全过程控制优化的数值模拟，以及综合能源系统仿真研究等八大研究方向。</div>
              </div>
              <el-row>
                <el-col :span="6" v-for="(item, index) in introItems" :key="index">
                  <div class="intro-item m-r" :style="{ 'background-image': `url(${item.img})` }">
                    <div class="p-l-lg">
                      <span class="intro-item-value" :style="{ color: introColorMap[index] }">{{ item.value }}</span>
                      <span>{{ item.unit }}</span>
                    </div>
                    <div class="p-l-lg">{{ item.text }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="card mini-card card-border5">
            <div class="card-title card-title-border2">当前在用软件清单</div>
            <div class="card-body">
              <ScrollTable :data="inUseApps" :column-width="['80px']" :columns="['序号', '软件名称', '使用人员', '单位名称']" :options="{ singleHeight: 32 }">
                <template v-slot="scope">
                  <scroll-table-column :value="scope.row.rank" width="80px"> </scroll-table-column>
                  <scroll-table-column :value="scope.row.app_name"> </scroll-table-column>
                  <scroll-table-column :value="scope.row.combined_info"> </scroll-table-column>
                  <scroll-table-column :value="scope.row.departName"> </scroll-table-column>
                </template>
              </ScrollTable>
            </div>
          </div>
        </el-col>
        <el-col :span="7" class="right">
          <div class="card mini-card card-border1">
            <div class="card-title card-title-border1">平台利用率趋势</div>
            <div class="card-body">
              <UsedTrend></UsedTrend>
            </div>
          </div>
          <div class="card card-border2">
            <div class="card-title card-title-border1">用户使用排名</div>
            <div class="card-body">
              <ScrollTable :data="userUseTrend" :column-width="['80px']" :columns="['排名', '人员姓名', '单位名称', '机时']" :options="{ singleHeight: 32 }">
                <template v-slot="scope">
                  <scroll-table-column :value="scope.row.rank" width="80px">
                    <template slot-scope="scope">
                      <div class="square" :style="{ 'background-color': colorMap[scope.value - 1] || 'gray' }">{{ scope.value }}</div>
                    </template>
                  </scroll-table-column>
                  <scroll-table-column :value="scope.row.full_name"> </scroll-table-column>
                  <scroll-table-column :value="scope.row.org_name"> </scroll-table-column>
                  <scroll-table-column :value="scope.row.calc_time"> </scroll-table-column>
                </template>
              </ScrollTable>
            </div>
          </div>
          <div class="card mini-card card-border3">
            <div class="card-title card-title-border1">
              应用软件集成需求
              <div class="btn-group">
                <a class="tips" href="https://www.baidu.com/" target="_blank">需求提交</a>
                <a class="tips" href="https://www.baidu.com/" target="_blank">问题建议</a>
              </div>
            </div>
            <div class="card-body">
              <ScrollTable :data="appDemandList" :column-width="['80px']" :columns="['排名', '软件名称', '需求频次']" :options="{ singleHeight: 32 }">
                <template v-slot="scope">
                  <scroll-table-column :value="scope.row.rank" width="80px">
                    <template slot-scope="scope">
                      <div class="square" :style="{ 'background-color': colorMap[scope.value - 1] || 'gray' }">{{ scope.value }}</div>
                    </template>
                  </scroll-table-column>
                  <scroll-table-column :value="scope.row.app_name"> </scroll-table-column>
                  <scroll-table-column :value="scope.row.cnum"> </scroll-table-column>
                </template>
              </ScrollTable>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </FullScreenContainer>
</template>

<script>
import FullScreenContainer from './components/FullScreenContainer.vue'
import Header from './components/Header.vue'
import ScrollTable from './components/ScrollTable/index.vue'
import ScrollTableColumn from './components/ScrollTable/TableColumn.vue'
import { reactive, toRefs } from '@vue/composition-api'
import subIcon1 from './images/sub-icon1.png'
import subIcon2 from './images/sub-icon2.png'
import subIcon3 from './images/sub-icon3.png'
import subIcon4 from './images/sub-icon4.png'
import RealTimeUsed from './RealTimeUsed'
import UsedTrend from './UsedTrend.vue'
import { getDepartDuration, getSoftwareDuration, getInUseSoftware, getUserUseTrend, getSoftwareIntegrate, getPlateformSum } from './api'
export default {
  components: { FullScreenContainer, Header, ScrollTable, ScrollTableColumn, RealTimeUsed, UsedTrend },
  setup() {
    const state = reactive({
      colorMap: ['red', '#ffc107', 'rgb(6,141,255)'],
      introColorMap: ['rgb(23,230,255)', '#489ef1', '#6ce2bb', '#d09154'],
      loading: false,
      departTrend: [],
      appTrend: [],
      inUseApps: [],
      introItems: [
        {
          value: 0,
          unit: '人',
          text: '注册人数',
          img: subIcon1
        },
        {
          value: 0,
          unit: '家',
          text: '注册单位',
          img: subIcon2
        },
        {
          value: 0,
          unit: '个',
          text: '软件数量',
          img: subIcon3
        },
        {
          value: 0,
          unit: '小时',
          text: '使用总时长',
          img: subIcon4
        }
      ],
      userUseTrend: [],
      appDemandList: [],
      scale: {
        wRatio: 1,
        hRatio: 1
      }
    })
    const getScale = (scale) => {
      state.scale = scale
    }
    const getDepartDurationList = async () => {
      const res = await getDepartDuration()
      state.departTrend = res.data.map((item, index) => {
        return { ...item, rank: index + 1 }
      })
      if (state.departTrend.length > 7) state.departTrend.length = 7
    }
    const getSoftwareDurationList = async () => {
      const res = await getSoftwareDuration()
      state.appTrend = res.data.map((item, index) => {
        return { ...item, rank: index + 1 }
      })
      if (state.appTrend.length > 4) state.appTrend.length = 4
    }

    const getInUseSoftwareList = async () => {
      const res = await getInUseSoftware()
      state.inUseApps = res.data.map((item, index) => {
        return { ...item, rank: index + 1 }
      })
      if (state.inUseApps.length > 4) state.inUseApps.length = 4
    }

    const getUserUseTrendList = async () => {
      const res = await getUserUseTrend()
      state.userUseTrend = res.data.map((item, index) => {
        return { ...item, rank: index + 1 }
      })
      if (state.userUseTrend.length > 7) state.userUseTrend.length = 7
    }
    const getDemandList = async () => {
      const res = await getSoftwareIntegrate()
      state.appDemandList = res.data.map((item, index) => {
        return { ...item, rank: index + 1 }
      })
      if (state.appTrend.length > 4) state.appTrend.length = 4
    }
    const getPlateformSumList = async () => {
      const res = await getPlateformSum()

      res.data.map((item) => {
        if (item.keyName === 'userNum') {
          state.introItems[0].value = item.numValue
        }
        if (item.keyName === 'orgNum') {
          state.introItems[1].value = item.numValue
        }
        if (item.keyName === 'softNum') {
          state.introItems[2].value = item.numValue
        }
        if (item.keyName === 'timeSum') {
          state.introItems[3].value = item.numValue
        }
      })
    }

    const initData = async () => {
      try {
        await Promise.all([getDepartDurationList(), getSoftwareDurationList(), getInUseSoftwareList(), getUserUseTrendList(), getDemandList(), getPlateformSumList()])
      } catch (error) {}
      state.loading = false
    }
    initData()
    return {
      ...toRefs(state),
      getScale
    }
  }
}
</script>
<style lang="scss" scoped>
.text-right {
  text-align: right;
}
.container {
  width: 100%;
  height: 100%;
  background: url('./images/bg.png') no-repeat;
  padding: 73px 20px 0 20px;
  box-sizing: border-box;
  color: #fff;
}
.full {
  height: 100%;
  width: 100%;
}
.left,
.right {
  width: 26%;
}
.center {
  width: 48%;
  height: 100%;
}
.mini-card {
  height: 285px !important;
}
.card-border1 {
  background: url('./images/item-border1.png');
  background-size: 100% 85%;
  background-repeat: no-repeat;
  background-position-y: 40px;
}
.card-border2 {
  background: url('./images/item-border2.png');
  background-size: 100% 89%;
  background-repeat: no-repeat;
  background-position-y: 40px;
}
.card-border3 {
  background: url('./images/item-border3.png');
  background-size: 100% 85%;
  background-repeat: no-repeat;
  background-position-y: 40px;
}
.card-border4 {
  background: url('./images/item-border4.png');
  background-size: 100% 94%;
  background-repeat: no-repeat;
  background-position-y: 40px;
}
.card-border5 {
  background: url('./images/item-border5.png');
  background-size: 100% 86%;
  background-repeat: no-repeat;
  background-position-y: 40px;
}
.card-title-border1 {
  background: url('./images/item-header1.png');
}
.card-title-border2 {
  background: url('./images/item-header1.png');
  background-position-x: -33px !important;
  padding-left: 80px !important;
}
.p-l-lg {
  padding-left: 55px;
}
.card {
  height: 385px;
  padding: 15px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;

  &:not(:last-child) {
    margin-bottom: 13px;
  }
  .card-title {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    padding-left: 70px;
    background-position-x: -40px;
    height: 60px;
    line-height: 75px;
    background-repeat: no-repeat;
  }
  .card-body {
    height: calc(100% - 56px);
    overflow: hidden;
  }
}
.btn-group {
  position: absolute;
  right: 0;
  top: 0;
  a {
    background-image: url('./images/buttons.png');
    background-repeat: no-repeat;
    width: 115px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    display: inline-block;
    background-size: 100% 220px;
    background-position: 0px -110px;
    margin-right: -5px;
    font-weight: normal;
    font-size: 14px;
  }
}
.intro-card {
  height: 680px;
  .intro-img {
    display: block;
    width: 100%;
    height: 280px;
    border-radius: 10px;
  }
  .intro-text {
    border-radius: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    text-indent: 2em;
  }
  .intro-item {
    width: 100%;
    height: 120px;
    background-position: center;
    background-position-x: -10px;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 15px;
    .intro-item-value {
      margin-right: 5px;
      font-size: 36px;
      font-weight: bold;
      text-shadow: 0px 0px 1px #fff;
      text-stroke: 1px #ffffff;
      line-height: 38px;
      text-transform: none;
      -webkit-text-stroke: 1px #fff;
    }
  }
}
.square {
  width: 20px;
  height: 20px;
  background-color: gray;
  text-align: center;
  line-height: 20px;
  color: #fff;
  border-radius: 5px;
}
</style>
