<template>
  <div class="receiptF">
    <!-- 头部信息 -->
    <header>
      <div class="total">
        <div class="total-left">“ 数量 ” - <span>{{ this.name }}</span></div>
        <div class="total-right">
          <div style="width: 300px; margin-left: 35px;">
            <div class="icon">
              <i @click="pushIndex" class="el-icon-s-home" :style="{ fontSize: '32px', color: 'rgb(64,158,225)' }"></i>
              <i class="el-icon-s-operation" :style="{
              fontSize: '32px',
              marginLeft: '15px',
              color: 'rgb(64,158,225)',}">
              </i>
            </div>
          </div>
        </div>
      </div>
      <footer></footer>
    </header>
    <!-- 图标信息及表格 -->
    <div style="display: flex;">
      <div class="left-icon"></div>
      <div class="right-message">
        <el-table :data="tableData" style="width: 100%;" height="550" border v-loading="loading">
          <el-table-column prop="name" label="名称" width="180">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot" @click="handleClick(row)" style="cursor: pointer; color: rgb(127, 144, 255)">
                {{ row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type_waterstabilized" label="水稳站数量">
          </el-table-column>
          <el-table-column prop="type_weigh" label="磅站数量">
          </el-table-column>
          <el-table-column prop="type_concrete" label="混凝土站数量">
          </el-table-column>
          <el-table-column prop="type_asphalt" label="沥青站数量">
          </el-table-column>
          <el-table-column prop="type_project" label="物料系统数量">
          </el-table-column>
          <el-table-column prop="appRDCount" label="移动收发数量">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getEveryProjectSiteNumberAPI, // 项目站点数量接口
} from "@/api/index";
export default {
  data () {
    return {
      id: localStorage.getItem("id"),
      name: localStorage.getItem("name"),
      tableData: [], // 表格数据
      loading: true
    };
  },
  async mounted () {
    this.getEveryProjectSiteNumber()
  },
  methods: {
    // 获取各个项目站点数量
    async getEveryProjectSiteNumber () {
      const res = await getEveryProjectSiteNumberAPI({
        org_id: this.id,
      });
      if (res.data.code === 0) {
        this.tableData = res.data.data
      }
      this.loading = false
    },
    // 公司名称的点击事件
    handleClick (value) {
      localStorage.setItem("RGid", value.id)
      localStorage.setItem("RGname", value.name);
      // 跳转从新的标签页打开
      const routerJump = this.$router.resolve(`/numberC?id=${2}`)
      window.open(routerJump.href, '_blank')
      // this.$router.push(`/numberC?id=${2}`);
    },
    // 回到首页
    pushIndex () {
      this.$router.push("/");
    }
  },
};
</script>
<style scoped lang="scss">
.receiptF {
  width: 100%;

  header {
    width: 100%;
    height: 130px;

    .total {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;

      .total-left {
        margin-top: 20px;
        font-size: 32px;
        font-weight: 700;
        color: rgb(80, 139, 248);
      }

      .total-right {
        width: 900px;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        display: flex;
        overflow: hidden;
        margin-left: -100px;

        div:nth-child(2) {
          margin-left: -130px;

          ul {
            width: 200px;
            height: 35px;
            display: flex;
            border: 1px solid black;
            align-items: center;
            border-radius: 10px;

            li:last-child {
              border: none;
            }

            li {
              text-align: center;
              width: 50px;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              list-style: none;
              border-right: 1px solid black;
            }
          }
        }

        .icon {
          width: 80px;
          margin-left: -80px;
        }
      }
    }

    footer {
      width: 100%;
      height: 18px;
      background-color: rgb(216, 236, 255);
      color: blue;
      overflow: hidden;
    }
  }
  .left-icon {
    width: 20vw;
  }
  .right-message {
    margin-top: 10px;
    width: 63vw;
    height: 80vh;
    overflow: auto;
  }
}
</style>